Displaying a perspective 3D Text Mesh

Unity provides an alternative way to display text in 3D via the Text Mesh component. While this is really suitable for a text-in-the-scene kind of situation (such as billboards, road signs, and generally wording on the side of 3D objects that might be seen close up), it is quick to create and is another way of creating interesting menus or instruction scenes.

In this recipe, you'll learn how to create a scrolling 3D text, simulating the famous opening credits of the movie Star Wars, which looks something like this:

Getting ready

For this recipe, we have prepared the fonts that you need in a folder named Fonts, and the text file that you need in a folder named Text, in the 01_07 folder.

How to do it...

To display perspective 3D text, follow these steps:

1. Create a new Unity 3D project (this ensures that we start off with a Perspective camera, suitable for the 3D effect we want to create).

Note

If you need to mix 2D and 3D scenes in your project, you can always manually set any camera's Camera Projection property to Perspective or Orthographic via the Inspector panel.

2. In the Hierarchy panel, select the Main Camera item, and, in the Inspector panel, set its properties as follows: Camera Clear Flags to solid color, Field of View to 150, and Background color to black.
3. Import the provided Fonts and Text folders.
4. In the Hierarchy panel, add a UI | Text game object to the scene—choose menu: GameObject | UI | Text. Name this GameObject as Text-star-wars.
5. Set UI Text Text-star-wars Text Content to Star Wars (with each word on a new line). Then, set its Font to Xolonium Bold, its Font Size to 50, and its Color to White. Use the anchor presets in Rect Transform to position this UI Text object at the top-center of the screen. Set Vertical Overflow to Overflow. Set Alignment Horizontal to center (leaving Alignment Vertical as top).
6. In the Hierarchy panel, add a 3D Text game object to the scene – choose menu: GameObject | 3D Object | 3D Text. Name this GameObject Text-crawler.
7. In the Inspector panel, set the Transform properties for the Text-crawler GameObject as follows: Position (100, -250, 0), Rotation (15, 0, 0).
8. In the Inspector panel, set the Text Mesh properties for the Text-crawler GameObject as follows:
   • Paste the content of the provided text file, star_wars.txt, into Text.
   • Set Offset Z = -20, Line Spacing = 1, and Anchor = Middle center
   • Set Font Size = 200, Font = SourceSansPro-BoldIt

9. When the Scene is made to run, the Star Wars story text will now appear nicely squashed in 3D perspective on the screen.

How it works...

You have simulated the opening screen of Star Wars, with a flat UI Text object title at the top of the screen, and 3D Text Mesh with settings that appear to be disappearing into the horizon with 3D perspective "squashing."

There's more...

There are some details you don't want to miss.

We have to make this text crawl like it does in the movie

With a few lines of code, we can make this text scroll in the horizon just as it does in the movie. Add the following C# script class, ScrollZ, as a component to the Text-crawler GameObject:

using UnityEngine; using System.Collections; public class ScrollZ : MonoBehaviour { public float scrollSpeed = 20; void Update () { Vector3 pos = transform.position; Vector3 localVectorUp = transform.TransformDirection(0,1,0); pos += localVectorUp * scrollSpeed * Time.deltaTime; transform.position = pos; } } 

In each frame via the Update() method, the position of the 3D text object is moved in the direction of this GameObject's local up-direction.

Where to learn more

Learn more about 3D Text and Text Meshes in the Unity online manual at http://docs.unity3d.com/Manual/class-TextMesh.html.

Note

An alternative way of achieving perspective text like this would be to use a Canvas with the World Space render mode.