Displaying Text on the Screen

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.

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.

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.

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.

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!

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.

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.

You will now see your text in the Scene view. Chances are, 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.

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:

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.

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.

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.

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.

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.

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.

Resize the dots to match the width 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

Now, your text is good to go!

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!