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 before, this will create three objects, which we'll talk about in more detail now:
For more information on the Canvas object, check out http://docs.unity3d.com/Manual/UICanvas.html.
For more information on EventSystem
, check out: http://docs.unity3d.com/Manual/EventSystem.html.
Text
object. 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.Text
object selected and change its name to Game 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.
For more information on positioning objects and Rect Transform, check out http://docs.unity3d.com/Manual/UIBasicLayout.html.
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.
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 to 0
, 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 Title
object'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 at 0
be the edge of the map relative to our height and thankfully we have the Pivot property to fix that.
1
and then change Pos Y to 0
.
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
, and 1
and see the differences in how things are rotated.
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.
Game Title
object 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 to Twinstick Shooter
and change Alignment of the object to the center vertically and horizontally. Afterward, change Font to the OSP-DIN
we used in the last chapter and then change Font Size to 35
and 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.200
and Width to 50
. We will also want it to be offset from the top of the world, so let's change Pos Y to -30
to 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.
Canvas
object from Hierarchy and then in Inspector from Canvas Scaler change Ui Scale Mode to Scale with Screen Size. From there, change Reference Resolution to 800 x 600
if it isn't there already.400
and Height to 100
and then change the Text component's Font Size to 70
.Now, if we play the game from a higher resolution, it will display our title nicely:
As we can see, it's working great!
For more information on Canvas Scaler, check out: http://docs.unity3d.com/Manual/script-CanvasScaler.html.