Lesson 7.3 - Titles

TextMesh Pro is a package capable of creating stylish text in Unity. Import the TextMesh Pro essential resources and fonts into your project.

1. From the top menu dropdown, select: Window > Text Mesh Pro > Import TMP Essential Resources (Figure 01).

Figure 01: How to import TMP Essential Resources

2. Make sure the entire TextMesh Pro package is selected and click import (Figure 02).

Figure 02: The boxes that must be checked in order to import the package

3. From the top menu dropdown, select:

Window > TextMeshPro > Import TMP Examples and Extras (Figure 03).

Figure 03: How to import TMP fonts

4. You only need the Fonts package here. Uncheck the TextMesh Pro box to deselect the unnecessary boxes. Check the Fonts box in order to only select the fonts package and click import (Figure 04).

Figure 04: TMP Examples and Extras with only Fonts selected

Now that you have the necessary tools in your project, it’s time to create your title. You will be using a font called Bangers. You will begin by creating the Font Asset.

1. Create a new Font Asset by going to the TextMesh Pro folder in Assets then navigating to Examples and Extras > Fonts > Bangers (Figure 05).

Figure 05: Bangers in the Fonts folder

2. Right click on Bangers and then select: Create > TextMesh Pro > Font Asset (Figure 06).

Figure 06: How to create a Font Asset

This will create “Bangers SDF,” (Figure 07) a new Font Asset in your Fonts folder.

Figure 07: Bangers SDF is above the Bangers font

Now that you have your Font Asset available, you will create the title itself.

3. Right click in the Hierarchy and navigate to UI > Text - TextMeshPro (Figure 08) to create a new TextMesh Pro GameObject in your scene.

Figure 08: How to create a TextMesh Pro GameObject

You should now see some text in your Game view (Figure 09).

Figure 09: Text in the Game view

4. This step will also create a Canvas, which will be the parent of your Text (TMP) GameObject. Rename this “TitleCanvas.” (Figure 10)

Figure 10: TitleCanvas in the Hierarchy

• Make sure TitleCanvas is selected. In the Inspector under Canvas Scaler, change the UI Scale Mode from Constant Pixel Size to Scale With Screen Size (Figure 11) in order to keep the title proportionate to the 16:9 aspect ratio.

Figure 11: How to change the Canvas Scale Factor to Scale With Screen Size

5. Change the Reference Resolution under Canvas Scaler to X: 1920 Y: 1080 and change the Match value to 0.5 (Figure 12) so that our title remains centered, proportionate to our screen resolution.

Figure 12: How to adjust the Canvas Scaler settings

6. Back in the Hierarchy window, rename Text (TMP) to “Title.” (Figure 13)

Figure 13: The Title GameObject

7. In the Inspector, go to TextMeshPro - Text (UI) and change “New Text” to “The Chase.” (Figure 14)

Figure 14: Where to change the text

8. Under Rect Transform, change the Width to 1280 and the Height value to 250 (Figure 15) so that it evenly scales our title to a transform position on the screen. Additionally, change your X and Y position values to 0 in order to get our title where it needs to be on screen.

Figure 15: Changing the Rect Transform values

9. In the Anchor Presets, click the center, middle box to keep our title positioned and centered in view(Figure 16).

Figure 16: Center, Middle Anchor Preset

At this point, here’s what your title should look like (Figure 17). Notice that it does not yet appear centered. This will change when we increase its size:

Figure 17: The title with the updated settings

Now that you have your title asset created, it’s time to give it a stylized look that will match the aesthetic of your film.

10. Go back to the TextMesh Pro - Text (UI) tab in the Inspector (Figure 18).

• Change the Font Asset to Bangers SDF.
• Change the Font Size to 250.
• You can either have one colour for your font by changing Vertex Color, or you can use a gradient by enabling Color Gradient. Enable this checkbox and made the first color “#FFD900FF,” the second color “#FF006FFF,” the third color “#FF005BFF,” and the fourth color “#A500FFFF.”
• Change the Alignment to center.

Figure 18: The TextMesh Pro - Text (UI) section with the adjusted settings

The result should look like this (Figure 19):

Figure 19: The title with some basic adjustments

11. In the Inspector, below Extra Settings, expand the triangle for Bangers Atlas Material, and then in the setting labelled Face, change Color to light pink and change the Dilate value to 0.5 (Figure 20). Doing this will make the title appear fuller and get letters to overlap.

Figure 20: Extra Settings adjustments

The result will look like this (Figure 21):

Figure 21: Result of the changes from the previous step

12. Create a 3-color border around the text that will really help it pop out (Figure 22).

• Under Outline change Color to Navy Blue and change the Thickness value to 0.7. The Outline is the outer edge of the text and the outermost border element.
• Underlay is the innermost border element. Enable the Underlay checkbox, and then select the Underlay field again to expand its properties. Change Underlay Color to Purple (make sure the Alpha in the Color settings is set to 255), Offset X to 0.15, the Offset Y to 0.2, the Dilate value to 0.62, and the Softness value to 0.07.
• Glow is the color in between Outline and Underlay. Enable the Glow checkbox, and then select the Glow field again to expand its properties. Change Glow Color to Turquoise, again with the Alpha set to 255. Make the Offset value 1, the Inner value 0.255, the Outer value 0.7, and the Power value 0.3.

Figure 22: Extra settings needed to create a border around the title

Your title should now look like this (Figure 23):

Figure 23: A completed title

TextMesh Pro offers a lot of flexibility in terms of styling text. Continue experimenting with your title’s settings if you want to give it an even more unique look.

You now have your stylized title. It’s now time to fade your title in and out at the beginning of your film. You will do this by animating its opacity or alpha channel value. You will start by creating an Animation Track for the title.

1. In the Timeline window, right click to create a new Track Group (Figure 24).

Figure 24: Creating a new Track Group in the Timeline

2. Rename the Track Group “Title Group.”

3. Add an Animation Track to Title Group for the title (Figure 25).

Figure 25: Adding an animation track to Title Group

4. Drag your “Title” GameObject in your Hierarchy to the empty animation track and click Create Animator on Title (Figure 26).

Figure 26: Assigning the animation track to “Title”

Now that you have your animation track for the title, you will animate its opacity.

5. Click the red record button to begin animating the title.

Figure 27: Record button

6. With the Timeline playhead cursor set to Frame 0, ensure that the "Title" GameObject is selected in the Hierarchy window. Next, select the Vertex Color in the Inspector window, within the TextMeshPro - Text (UI) component (Figure 28).

Figure 28: Vertex Color under TextMeshPro - Text (UI)

7. Change the A (alpha) value to 0 to make the title transparent (Figure 29).

Figure 29: Where to adjust the A value under Color

8. In the Timeline, scrub forward to Frame number 20 in and change the title’s alpha value back to 255 to make it visible once again. The title will now fade in from being completely clear (Figure 30).

Figure 30: The alpha value back at 255 about 20 frames in

9. You can further adjust the look of the title fade in by going into the graph editor and adjusting the time and values of the individual keys, which you can do by right clicking on them and selecting Edit Key. Try changing the key’s starting time from 20 frames in to 35 frames in to make the fade in time lengthen (Figure 31) and (Figure 32).

Figure 31: Adjusting the individual keys in the Graph editor

Figure 32: The second keyframe moved to 35 frames in to make the fade in occur over a longer duration

Now that your title fades in, it’s time to fade it back out as the action begins.

10. Scrub the Timeline to about 81 frames in and right click the graph editor to add a new key (Figure 33). This should add a new keyframe with the same 255 alpha value of the title.

Figure 33: Adding a new key to begin the fade out

11. Scrub a little bit further forward to about 89 frames in and change the title’s alpha value to 0 to create the fade out (Figure 34).

Figure 34: With the alpha value set to 0, you now have a fade in and fade out for the title

You can now adjust the settings of the fade out to make it look more gradual and better match up with the timing of the film.

12. Right click the third keyframe, select Edit Key, and change its time to 65 frames. Right click the fourth keyframe, select Edit Key, and change its time to 75 frames (Figure 35).

Figure 35: Changing the keyframe settings by right clicking on keys

13. Be sure to click the flashing red circle and save to finish editing this animation (Figure 36).

Figure 36: Re-click the recording button to end the recording

14. You can also make further adjustments by clicking and dragging transitions until the timing looks right (Figure 37). Try dragging the final keyframe out to 85 frames (Figure 38).

Figure 37: Adjusting the animation once the recording has ended

Figure 38: The final keyframe moved back to frame 85

Finally, you will want to add a fade in and fade out to the beginning and end of our film. You will do this by creating a black image and adjusting its opacity, much like we did with our title.

First, create a black image that will cover the canvas.

1. In the Hierarchy, right click on the TitleCanvas and select UI > Image (Figure 39).

Figure 39: Creating a black image

This will create an Image GameObject that is a child of TitleCanvas (Figure 40).

Figure 40: Image in the Hierarchy

2. In the Inspector, change the Anchor Presets under Rect Transform to Stretch, Stretch while holding down the Alt/Option and Shift keys in order to stretch the image to fit over the entire view (Figure 41). You should immediately see a white image cover the entirety of your Game View.

Figure 41: Changing the Anchor Preset to stretch, stretch

3. Below, under Image, change the color from white to black (Figure 42). Doing this should change the color of the Game view from white to black.

Figure 42: Changing Image’s color to black

4. Now change the name of Image to “FadeInToBlack” (Figure 43).

Figure 43: Image’s new name: “FadeInToBlack”

You now have the black image. It’s time to animate its opacity to create a fade in and fade out just like you did with your title.

5. In the Timeline, right click the Title Group and select Add Animation Track (Figure 44).

Figure 44: Adding an Animation Track

To edit the new animation track you’ve created whilst changing values in the Inspector for the FadeToBlack GameObject, click the lock on the top right corner of the Timeline to lock it (Figure 45).

Figure 45: How to lock Timeline

6. Drag FadeInToBlack onto the empty Animation Track and select Create Animator on FadeInToBlack (Figure 46).

Figure 46: Assigning the empty animation track to FadeInToBlack

7. Press the record button to animate the FadeInToBlack GameObject’s opacity.

a. Scrub the Timeline to 0 frames and in the Inspector under Image, click the color and change the A (alpha value) to 255 (Figure 47).

Figure 47: Where to adjust the alpha value of FadeInToBlack

b. Scrub to 10 frames and change the A value to 0. The video should now fade in.

c. To fade out, create a new key at frame 485 frames and make sure FadeInToBlack’s alpha value remains set to 0.

d. Create one final frame at 515 frames and set the FadeInToBlack’s alpha value to 255. The fade out should look something like this on the graph editor (Figure 48). Feel free to tweak these values depending on how drastic of a fade in and fade out you want.

Figure 48: The graph editor and game view as the film fades out

In this lesson, we learned how to use TextMesh Pro to create a stylish title and how to use the Timeline to fade the title and video itself in and out.