Join Jesse Freeman for an in-depth discussion in this video Add a title to the start screen, part of Unity 5 2D: Advanced UI.
- View Offline
- [Voiceover] So right now, our start window is looking a little bit bare. Let's add some other UI elements, to help flesh it out. We'll start by right-clicking on the start window, go into UI and selecting image. Let's add a title image for our game. I'ma select the source image from the new image UI component we've added and look for the title. As you can see, the title is completely stretched out. And that's because by default, each image that's created, is set to a width and height of 100.
We can fix this by clicking on the "set native size" button. As you can see, the Rect Transform has now been changed to 128x16, which is the correct dimensions of the actual title of the game. Here, I'm borrowing a title from a game that I've already created called "Dragon Sweeper." Let's scroll up to the top and change the game object and call it "Title." Next, we're gonna want to align this to the top of the screen. We can do this by clicking inside of the anchor preset button and while holding down "option" on a Mac or "alt" on a PC, you'll see that all the anchor presets change.
Here, we're gonna select the top middle anchor point and by holding down the "option" key, and what will happen is that it will reset the x and y position of our Rect Transform for us automatically. Go ahead and select the top align position. Now, our title is positioned at the very top of the screen. We can close this window and you'll see that the position y is set to negative eight. That's because the height of our title is 16.
So naturally, since the pivot y is set to point five, which is halfway between the center of our image, the position y is gonna offset it by half of the heights' value. Let's go ahead and change the position y value to negative 16. Here, you can see the title has been moved down just a little bit. Next, let's go to the resolution drop-down and take a look at the different aspect ratios. We'll start with 4x3, next, 16x9, and let's go back to 8x5.
As you can see, at each aspect ratio the title still remains anchored at the top of the screen. Next, let's add some text that'll be the credits for our game. Here, we'll drag the small-bodied prefab into the start window in the hierarchy. Next, we'll configure the small-bodied text. Let's go ahead and open up the anchor presets, hold down "option," and change it to align to the bottom and scale completely across the screen.
As you can see, the small-bodied text has now moved to the bottom lefthand corner of the screen. But that's a little bit deceptive. If we click in the scene and zoom in you'll see that the boundary for this text area now stretches across the entire size of the screen. The text is simply a line to the left. Let's scroll down and change the alignment to center. We'll also wanna move it up just a little bit from the bottom. So, let's change the y position to eight.
Depending on your target, especially if you're going to something like TV, you may wanna move these objects in a little bit more from the edge of the screen in order to take in account for bleeding of the edges or overscan, depending on the type of monitor it's displaying on. Now that we have this text here, we can simply change this to credits and you put the credits for your game at the bottom. Now that we've configured the title and the credits, we can save our scene and move on to the next elements that would go inside of the start window.
Unity expert Jesse Freeman helps you design your UI using custom prefabs (reusable UI elements), UI components such as windows and buttons, simple buildup animations, and transitions. He also helps you create a window manager to guide changes and relationships between windows, and extend the window system with a custom Unity editor that lets you standardize window display and navigation throughout your game.
- Creating Unity prefabs: fonts, colors, buttons, and labels
- Adding a title, credits, and buttons to the start screen
- Adding a game over screen
- Creating animated stats for the game over screen
- Transitioning between windows
- Building a keyboard window
- Mouse, keyboard, and controller navigation
- Building a custom Unity editor for managing in-game windows
- Adding a window to select difficulty level