Theming Default Views
Last updated
Was this helpful?
Last updated
Was this helpful?
The default presenters that come with Yarn Spinner have their own specific look, but they're designed to be rethemed without requiring any custom code. This tutorial demonstrates how to modify the built-in line and options presenters to use a sliced sprite and different font for a complete visual overhaul—all without writing any code.
Modifying existing dialogue presenters
Slicing sprites via the sprite editor
Importing custom fonts into TextMeshPro
The nightmare hellscape that is Unity UI
If you want to see a finished version of this project, you can find it at PATH TO SAMPLE.
If you haven't already installed Yarn Spinner, follow the instructions in the link to install guide. Once installed, we'll start by building out a basic scene:
Make a new scene in Unity.
From Samples/Shared Assets/Prefabs drag the Basic Arena into the scene
From Samples/Shared Assets/Prefabs add a Camera Rig into the scene
From Samples/Shared Assets/Prefabs drag a Player prefab into the scene
From Samples/Shared Assets/Prefabs drag an NPC prefab into the scene and rename it to be Alice
Add a default dialogue system to the scene, in the Hierarchy right click Yarn Spinner -> Dialogue Runner
Create a new Yarn Spinner project Assets -> Create -> Yarn Spinner -> Yarn Project and name it Rethemed Dialogue
Create a new Yarn script Assets -> Create -> Yarn Spinner -> Yarn Script and name it Alice
Delete the previous camera called Main Camera
Replace the contents of the Alice Yarn script with the following:
This is a very simple node with just a few lines of dialogue and a single option. All we need is to show off the main features of lines and options, so feel free to change it, but for now this is sufficient.
Select the Camera Rig and in the inspector drag the Player into the target field
Select Alice and in the Inspector set the Dialogue field to use the new Rethemed Dialogue project
Select Alice and in the Inspector select the Alice node in the dropdown
Select Alice and in the Dialogue Runner field drag in the Dialogue System object from the hierarchy
Select the Dialogue System and in the Inspector set the Yarn Project to use the Rethemed Dialogue project
Arguably the easiest but most impactful change you can make is to use a different font. This will immediately make the UI look different with minimal effort. Selecting a font is a very important stylistic choice for your game, as it will influence everything about how you design the rest of your UI.
For this sample, we've chosen a pixel font that works well with our desired aesthetic. At this stage, we're just adding the font to the project; we'll connect it to the various presenters later.
Grab the PixelifySans font from LINK TO FONT
Add the font into the Project assets
Go to Window -> TextMeshPro -> Font Asset Creator
Drag the PixelifySans-Bold font into the Source Font field
Click Generate Font Asset
Click Save and save the TMP version of the font into your project
Repeat these steps for the PixelifySans-Regular font
With this done, our fonts are ready to be used. We'll return to them when we start making layout changes, but first we also need some sprites.
Our retheming will rely on a sprite sheet that we'll slice. Let's set that up now. We'll need the Sprite Editor for slicing, which you might already have installed.
Open the Package Manager by going to Window -> Package Manager
In the side bar select the Unity Registry option
Wait for Unity to populate the manager
Find the package called 2D Sprite
Install it
Add the sprite sheet into the project from link to sprite sheet
Select the sprite sheet and in the Inspector change it's Texture Type to be Sprite (2D and UI)
Set the sprite mode to be Multiple
Set the Pixels per Unit to be 20
Set the Filter Mode to be Point (no filter)
Click Apply
Select the sprite sheet and in the Inspector click on the Open Sprite Editor button
Now we need to slice the sprite sheet into individual sprites and define the regions. Without doing this, the sprites would stretch in undesirable ways and look distorted. We need to identify and slice eight different sprites, which is somewhat tedious to describe, but thankfully the Sprite Editor makes the process relatively straightforward.
In the top bar of the editor, in the Slice dropdown configure it to be an Automatic slice with a Center pivot and click the Slice button
This does most of the work for us, using the transparent space in the sprite sheet to identify the eight different sprites. Now that we have the individual sprites identified, we need to define which regions can stretch and which cannot. Without this step, the sprites will scale oddly.
Select the left-topmost sprite
Name it Button-Filled-Up
Set it's L, R, T, and B to all be 7
Select the sprite on the right of the Button-Filled-Up sprite
Name it Button-Empty-Up
Set it's L, R, T, and B to all be 7
Select the sprite on the right of the Button-Empty-Up sprite
Name it Button-Continue-Up
Set it's L, R, T, and B to all be 7
Select the sprite on the right of the Button-Continue-Up sprite
Name it Option-Selected
Select the sprite below the Button-Filled-Up sprite
Name it Button-Filled-Down
Set it's L, R, T, and B to all be 7
Select the sprite on the right of the Button-Filled-Down sprite
Name it Button-Empty-Down
Set it's L, R, T, and B to all be 7
Select the sprite on the right of the Button-Empty-Down sprite
Name it Button-Continue-Down
Select the bottom-leftmost sprite
Name it Background
Set it's L, R, T, and B to all be 16
Click the Apply button
Now all our sprites are neatly sliced and ready to use. This was quite a bit of slicing, but fortunately most sprites use the same slice settings. If you don't want to do all this work or made a mistake, you can grab the pre-sliced version from the Sample folder. What we've accomplished here is defining which parts of each sprite can stretch and which parts should remain fixed.
Next, we'll modify the Line Presenter to use our custom sprites instead of the default visuals.
Select the Dialogue System prefab in the Hierarchy
Expand out the Canvas -> Line View and select the Background gameobject
In the Image component of the Inspector change the Source Image to be our freshly sliced Background sprite
In the Image component of the Inspector change the Color to be fully opaque white
In the Image component of the Inspector change the Image Type dropdown to be Sliced
In the Hierarchy select the Line View game object
In the Vertical Layout Group component set the Left and Right padding to be 40, the Top to be 24, The bottom to be 115 and set the Spacing to be 20
Now we need to make the line presenter use our custom font.
Select the Text Mesh Pro field inside of Dialogue System -> Canvas -> Line View -> Character Name
In the Inspector on the Text Mesh Pro component change the Font Asset field to point to the Pixelify-Sans font
Set the font size to be 48
Select the Text Mesh Pro field inside of Dialogue System -> Canvas -> Line View -> Text
In the Inspector on the Text Mesh Pro component change the Font Asset field to point to the Pixelify-Sans font
Set the font size to be 50
Expand the Extra Settings section and find the Margins
Set the margins to be Left 20, Top 0, Right 20, and Bottom 0
With that, our line presenter is finished! We can test it to see how it looks in action.
We're halfway there! Now we need to apply similar changes to our options presenter. This has a slight additional step—we'll need to make a prefab for our option items—but otherwise the process is similar to what we did for the line presenter. Let's start by creating the options item prefab, which requires the most work.
Right click on the Options Presenter Dialogue Systemm -> Canvas -> Options View and add a new UI -> Text - TextMeshPro child game object
Rename it to be Option Item
Select the Option Item and in the Inspector find the Text Mesh Pro component
Change the Font Asset to point to Pixelify-Sans font
Set the Font Size to be 50
Expand out the Extra Settings
Set the margins to be Left 30, and Top, Right and Bottom to all be 0
Add a new Image child game object to the Option Item
Rename it to be called Selection Indicator
Make it so it is a full height stretch but with a fixed width of 20
Select the Options Item in the Hierarchy
Add an Options Item component onto the game object
In the Text field drag the Option Item game object in
In the Selection Image field drag in the Selection Indicator game object
Expand out the Selected section of the inspector
Set the Selected sprite to be the Option-Selected sprite
Drag the Option Item game object out of the Hierarchy into the Assets to make it a prefab
Delete the existing Option Item game object, it has served it's purpose
With that done, our final steps are to modify the Options Presenter to use our new Option Item.
Select the Options View game object in the Hierarchy
In the Inspector find the Options View Prefab field inside the Options Presenter component
Replace the existing prefab with our Option Item prefab we made above
Select the Background child game object of the option presenter
In the Inspector find the Image component
Set the Source Image to be our Background sprite
Set the Color to be fully opaque white
Set the Image Type to be Sliced
Select the Last Line child game object
In the Inspector on the Text Mesh Pro component change the Font Asset field to point to the Pixelify-Sans font
Change the Font Size to be 48
Set the Font to be using Bold
Expand the Extra Settings and change the Margins to be Left, Right and Top to be 0, and set Bottom to be 14
And with that, our Options Presenter is also rethemed!
With these straightforward changes, we've completely transformed the look of the default dialogue presenters without writing any code. Hopefully, you now feel confident in your ability to customize the visuals of built-in presenters. Take your newly styled dialogue system for a spin and see how it enhances your game's visual identity!
