Displaying Text on the Screen

By Brian Moakley Oct 16, 2023 #tutorial

At this point, you have installed Unity. You have installed Visual Studio. Your project is setup and you are now familiar with the editor. You have everything ready to start learning C#. It all comes to this moment.

Except, you won’t be writing any C# just yet. You are going to set up a working scene. This scene is a template that you’ll use throughout this article series in order to output the result of your code so you can see it displayed in the game world versus printing small messages on the console.

Keep in mind, you will not be creating a game in this series. You’ll be learning C#. You’ll put everything into practice in a follow-up course. This article series contains only half of the knowledge you need to create a game in Unity. The second half comes with putting your code to use.

Building a Basic User Interface

To get started, you’re going to play with Unity’s user interface or UI. Unity UI refers to the tools used to construct user interfaces in your games. For instance, you may create a text field for players to enter their names.

By using Unity’s prebuilt UI components, you get things such as focus, copy and paste, and all the behavior you expect from modern UI controls. If Unity didn’t provide these controls, you would need to build them yourself.

This article won’t go into detail about Unity’s UI although if you are interested, check out this article over here.

Open your project in progress. If you haven’t made it yet, see this article over here on how to get started. To get started, you need to create a Canvas. In the Hierarchy, click the Plus sign and select UI / Canvas.

This creates a Canvas object. You’ll be able to give it a new name, but using the name Canvas is fine. In the Scene view, you’ll see the outline of a white rectangle.

The Canvas represents the screen presented by the user. As you add UI components to it, those components will appear on the screen, over the game. While the Canvas exists in a 3D space in the scene, it will always show on top of your game.

If you don’t see the Canvas, select the Canvas in the Hierarchy by single-clicking on it. It will appear blue.

Once selected, place your cursor over the Scene view. Press the f key otherwise known as the focus key. The Canvas will appear centered in the Scene view. You’ll use this key a lot, but there are ways to navigate through the Scene view.

Navigating the Scene View

As mentioned in the previous article, the Scene view is where you build your game. It’s the visual stage. You’ll be spending quite a bit of time in it, so you should know how to navigate it. For the most part, the Scene view contains a skybox and grid. It helps to have an actual model to use as a reference.

In the Hierarchy, click the plus sign. Select 3D Object and then select Cube.

This will create a cube. Select the cube in the Hierarchy, and with your cursor over the Scene view, press the f key. Now should see the Cube.

A screenshot of the Unity Scene view. It shows a 3D cube. It sports an orange outline, indicating that it has been selected.

The orange outline indicates that the Cube is selected. By using your scroll wheel, you can zoom in or zoom out from the cube. Notice when you zoom into the cube, it disappears. Instead, you’ll see a green outline.

A screenshot of the Scene view which shows the 3D outline of a cube. This is the result of a camera being too close to the cube.

In game development, it oftentimes doesn’t make sense to render the inside parts of a model as players won’t see them. Thus, most models are optimized to render only exterior surfaces that can be seen by the user. You can see this in modern games when you fall through or clip through the world and everything is missing.

A screenshot of a 3D game where the player character has fallen through the world. The character is looking up at the world. The streets, buildings, and even walls are gone.

Thus, the cube will only render exterior surfaces as opposed to interior ones.

To look around in the Scene view, click the right mouse button. Your cursor will turn into an “eye”. At this point, when you move the mouse, the scene will move with it.

This gif shows a person moving the screen by right clicking and moving their mouse.

While you are also pressing the right mouse button, you can use the WASD keys and move around the scene like a first-person shooter. You can even hold down Shift for a speed boost!

This shows a person zooming in and out of a cube.

Finally, press and hold your middle mouse button to pan the scene. This is helpful to keep the same viewing angle while also moving left or right.

This shows a person panning the screen left and right.

Adding Text on Screen

Throughout this article series, you’ll be writing C# scripts that will present text on the screen. This allows you to see the effects of your code in real time. This also requires that you get comfortable working with Unity.

In the beginning, it will be strange and cumbersome. By the time you finish, you will intimately understand how to configure your scripts to work with C#. In between, there’s a whole lot of practice.

Okay, it’s time to add text. Select the Cube in the Hierarchy. On Windows, press the delete key. On macOS,press Command-Backspace. The cube is now deleted!

Now to add some text to the screen. In the Hierarchy, click the plus sign. From the drop down, select UI and then click Text – TextMeshPro.

In this screenshot, the plus sign is annotated. In the flyout menu, the mouse selects UI and then Text - TextMeshPro.

You will now see your text in the Scene view. Chances are, the text is backwards.

This screenshot shows the Canvas from the back. The text is backwards.

The text is backwards because you are looking at it from the behind. To see it the “right way”, place the mouse over Scene view, hold down the right mouse button, and navigate it to look at the front side.

This gif shows the person navigating around the canvas so the text is printed forwards and not backwards.

Now you can actually read it! Nice work!

Formatting the Text

Now that you have the text added to the screen, it would be nice to center it. Select the Text in the Hierarchy. Next, in the Inspector, find the Rect Transform section. Set the Pos X to 0 and Pos Y to 0. It should like the following:

This screen shot shows the inspector. The Pos X and Pos Y values are zero

By default, the text is anchored in the center of the screen. By setting the coordinates to center, the text returns to the center. If you look in the Game view, the text looks to have vanished. It’s actually still there. It blends in with the horizon.

This screenshot shows the New Text. It is white text against a white background, making it hard to see.

It would be nice to actually see the text. Select the text in the Hierarchy. In the Inspector, look for the Main Settings section. Set the Font Size to 50. Next, set the Vertex Color to red. Finally, set the Alignment to Center.

The screen shot shows the unity inspector. The Font Size is set to 50. The Vertex Color is red. The Alignment is centered.

Great! Now you can see the text, but you’ll notice that the text is now wrapping to another line. This isn’t exactly ideal.

This shows a screen shot of the New Text. There is a line break between New and Text.

Time to do a little text arranging!

Arranging the Text

The words are breaking to a new line because the font is so big. This isn’t ideal as you want the text to expand the width of the screen. Select the text in the Hierarchy. In the Scene view, you’ll see a yellow border on the top most line.

This screen shot shows a yellow border between the New which indicates the text's bounding layer.

You want it to expand across the entire screen. Select the Rect tool in the Scene view toolbar. This is a floating toolbar in the upper left hand corner.

This screen shot shows the Rect tool selected.

The Rect tool is used to manipulate 2D sprites. It also works great for UI elements. You’ll notice that the text element has four blue dots.

This screen shot shows the text layer selected. There are blue dots on each corner of the bounding box.

Resize the dots to match the width of the canvas.

This gif shows the text bounding box extended to both sides of the Canvas.

With your text centered in the center of the screen, the last thing to do is provide some new text. Select the text. In the Inspector, look for the Text Input section. In the large text field, replace the New Text default with This space for rent

This screenshot shows the text "This space for rent" written in the Text Input for the Text object. This is found in the inspector.

Now, your text is good to go!

This is a screen shot of the words, "This space for rent". The text is large in red letters.

Where to go from here

Wow – that was a lot of configuring and you still haven’t even touched the C# language yet! Have no fear! In the next article, you’ll actually print your name on the screen, except you’ll do it all in C# code.

So take a break, grab a drink, and when you are ready, check out the next article in this series. That is, when I finish writing it!

By Brian Moakley

Brian Douglas Moakley is a writer and technologist who lives amongst the quiet hills in New England. When not reading tales of high adventure, he is often telling such stories to all who will listen.

Related Post

Leave a Reply