Of course, one of the best things to begin a game with is a title screen and that title screen will need to display the game's name. Let's learn how to do that while also learning more about how Unity's UI system works:
- Just like we did in the previous chapter, we will first create a text object with the name of our game, so with that in mind go to GameObject | UI | Text.
Just like before, this will create three objects, which we'll talk about in more detail now:
- Canvas – This is the area where all of the UI elements will reside and if you try to create a UI element without one, Unity will create one for you like it did here. From the Scenes view, it will draw a white rectangle around itself to show you how large it is. The game object contains a Canvas component which allows you to dictate how the image will be rendered, as well as Canvas Scaler to make your art scale depending on the resolution of the device the game is running on and Graphic Raycaster which determines whether any objects on the Canvas have been hit.
Note
For more information on the Canvas object, check out http://docs.unity3d.com/Manual/UICanvas.html.
- Text – This object is our actual text object and has all of the properties to allow us to position the object anywhere on the Canvas and change what text, color, size, and more will be displayed.
- EventSystem – This object allows users to send events to objects in our game based on various input types, from keyboard to touch events to gamepads. There are properties here that allow you to specify how you'd like users to interface with your UI and if you try to create a UI element without one, Unity will create one for you like it did here.
Note
For more information on
EventSystem, check out: http://docs.unity3d.com/Manual/EventSystem.html. - Canvas – This is the area where all of the UI elements will reside and if you try to create a UI element without one, Unity will create one for you like it did here. From the Scenes view, it will draw a white rectangle around itself to show you how large it is. The game object contains a Canvas component which allows you to dictate how the image will be rendered, as well as Canvas Scaler to make your art scale depending on the resolution of the device the game is running on and Graphic Raycaster which determines whether any objects on the Canvas have been hit.
- To make it easier to see our text object, go to the Hierarchy tab and double-click on the
Textobject. It may be a little difficult to see, so from the Inspector tab scroll down to the Text component and change the Color property to white.
- The next thing we are going to do is make it easier to tell what this object is, so with that in mind scroll all the way up on the Inspector tab with the
Textobject selected and change its name toGame Title.After this, we are going to want to move this object to its proper place in the world; however, just like in the last chapter, you'll note that instead of the default Transform component we've been seeing our text object has a Rect Transform component in the same place. The Rect Transform component is probably the most different thing about working in the UI system, so it's a good idea to learn as much as we can about it.
Rect Transform is different from regular Transform in the sense that whereas Transform represents a single point or the center of an object, Rect Transform represents a rectangle that the UI element will reside in. If an object with Rect Transform has a parent that also has Rect Transform, the child will specify how the object should be positioned relative to the parent.
Note
For more information on positioning objects and Rect Transform, check out http://docs.unity3d.com/Manual/UIBasicLayout.html.
- Now, to get a better idea of what the properties of the Rect Transform component mean, change the Pos X and Pos Y values to
0, which will center our object around the object's anchors.
Our object's anchors are visible from the Scene tab via the four small rectangles creating the X shape in the center of our Scene tab if you have the Game Title object selected. (Double-click on it to center the object on the screen.)
Anchors give you the ability to "hold on" to a corner or part of the canvas so that if the canvas were to move and/or change, the pieces of UI will stay in an appropriate place. This can be quite useful when it comes to things like supporting multiple resolutions without scaling the art assets created. In our case, we will want to have our title position itself relative to the top of the level.
- Click on the Anchor Presets menu in the upper-left corner of the Rect Transform component. From there, it shows some of the most common anchor positions that are used in games for easy selection. In our case, we will want to pick the top-center option.
Notice that now the Pos Y value has become
-93. This is saying that our object is positioned 93 units below the anchor's y position. If we change the Pos Y value to0, the object would be centered along the y axis' anchor, which would put the object half off the screen, which is not good.However, if we changed our
Game Titleobject's Pos Y to-15(subtracting half its Height value), it would be positioned correctly; however, if we decided we wanted to change the Height later on, we would have to remember to adjust this as well. It would be a lot nicer if we had something to make Pos Y at0be the edge of the map relative to our height and thankfully we have the Pivot property to fix that. - Next, change the Pivot Y property to
1and then change Pos Y to0.
Pivots are markers that inform the other values in the Rect Transform component saying where we want to affect things, relative to this position on our object. This means that objects will be moved, rotated, and/or scaled via this position. To note how things react and what changing the values does, try changing the Rotation Z property with Pivot Y of
0, 0.5, and1and see the differences in how things are rotated.Note
Note that it is possible to set the Pivot, Position, and Anchors of an object via the Anchors Preset menu I mentioned previously if you hold down the Alt and Shift keys while clicking on the desired spot. This way, all of the steps we discussed will happen all at once, but it's a good idea to get an understanding of what everything means before jumping straight into using the shortcuts.
- Now that we have our object positioned correctly, let's give it some visual flair. Select the
Game Titleobject from the Hierarchy tab and then move over to the Inspector tab and scroll down to the Text component. From there, change the Text property toTwinstick Shooterand change Alignment of the object to the center vertically and horizontally. Afterward, change Font to theOSP-DINwe used in the last chapter and then change Font Size to35and Color to white. Notice that now the text doesn't show up, because we've made the text too big for the Rect Transform that we defined. - With that in mind, scroll up to Rect Transform and change Height to
200and Width to50. We will also want it to be offset from the top of the world, so let's change Pos Y to-30to give it a little offset.
Now, this looks great for this resolution, but if we were to play the game at a higher resolution, it may look like this:
This can be good if you're trying to do a HUD in your game, but for the title screen it's usually a good idea to make things large, so with that in mind we will use the Canvas Scaler component to adjust the size of the objects automatically.
- Select the
Canvasobject from Hierarchy and then in Inspector from Canvas Scaler change Ui Scale Mode to Scale with Screen Size. From there, change Reference Resolution to800 x 600if it isn't there already. - Next, let's make the text a bit larger. With that in mind, from Rect Transform change Width to
400and Height to100and then change the Text component's Font Size to70.
Now, if we play the game from a higher resolution, it will display our title nicely:
As we can see, it's working great!
Note
For more information on Canvas Scaler, check out: http://docs.unity3d.com/Manual/script-CanvasScaler.html.