Displaying a "Hello World" UI text message
The first traditional problem to be solved with a new computing technology is often to display the Hello World message. In this recipe, you'll learn to create a simple UI Text object with this message, in large white text with a selected font, and in the center of the screen.
Getting ready
For this recipe, we have prepared the font that you need in a folder named Fonts
in the 1362_01_01
folder.
How to do it...
To display a Hello World text message, follow these steps:
- Create a new Unity 2D project.
- Import the provided
Fonts
folder. - In the Hierarchy panel, add a UI | Text GameObject to the scene – choose menu: GameObject | UI | Text. Name this GameObject Text-hello.
Note
Alternatively, use the Create menu immediately below the Hierarchy tab, choosing menu: Create | UI | Text.
- Ensure that your new Text-hello GameObject is selected in the Hierarchy panel. Now, in the Inspector, ensure the following properties are set:
- Text set to read
Hello World
- Font set to
Xolonium-Bold
- Font size as per your requirements (large—this depends on your screen—try
50
or100
) - Alignment set to horizontal and vertical center
- Horizontal and Vertical Overflow set to
Overflow
- Color set to white
The following screenshot shows the Inspector panel with these settings:
- Text set to read
- Now, in the Rect Transform, click on the Anchor Presets square icon, which should result in several rows and columns of preset position squares appearing. Hold down SHIFT and ALT and click on the center one (row middle and column center).
- Your Hello World text will now appear, centered nicely in the Game panel.
How it works...
You have added a new Text-hello GameObject to a scene. A parent Canvas and UI EventSystem will also have been automatically created.
You set the text content and presentation properties, and use the Rect Transform anchor presets to ensure that whatever way the screen is resized, the text will stay horizontally and vertically centered.
There's more...
Here are some more details that you don't want to miss.
Styling substrings with Rich Text
Each separate UI Text component can have its own color, size, boldness styling, and so on. However, if you wish to quickly add some highlighting style to a part of a string to be displayed to the user, the following are examples of some of the HTML-style markups that are available without the need to create separate UI Text objects:
- Embolden text with the "
b
" markup:I am <b>bold</b>
- Italicize text with the "
i
" markup:I am <i>italic</i>
- Set the text color with hex values or a color name:
I am <color=green>green text</color>, but I am <color=#FF0000>red</color>
Note
Learn more from the Unity online manual Rich Text page at: http://docs.unity3d.com/Manual/StyledText.html.