Join Jesse Freeman for an in-depth discussion in this video Create the start screen, part of Unity 5 2D: Advanced UI.
- [Voiceover] Now it's time for us to create our first window. In order to do that, let's create a whole new scene that we can keep all the windows for our game inside of. I'm gonna hit Command + N on a Mac, or Control + N if you're on a PC, to create a new scene, and let's save this by hitting Command + S into the Scenes folder. Here we're gonna call this GameWindows. Now, just like we did before, we're gonna need to recreate the canvas, so from the hierarchy, let's click on the Create menu, go to UI, and select the Canvas from the options.
We'll change the render mode to camera, set the camera to the main camera, and in the UI scale mode, we'll change this to scale with screen size by setting it to 240 x 160. We'll also want to make sure that the reference pixels per unit is set to 1. Next, let's go to our camera, and change the background color to one of our palette presets. Here, I'm gonna select the light grey, since it's a neutral color, and this will represent the color we see if there was no window present.
Now let's create the first window for our game. A window is going to be similar to a scene, but instead of having multiple scenes for the start, for the game over, for the high scores display, and anything else we create in our game, we're gonna keep all of this inside of one scene. We'll manage this inside of our canvas. To create our first window, let's right click on the canvas, go to UI, and create a new panel.
If you double click on the panel, it'll focus the panel inside of the scene view. It looks like Unity has switched over to the free aspect ratio, so let's go back and make sure we're set to 8 x 5 in order to constrain this correctly. Now, let's rename this panel to StartWindow. Now, when it comes to naming things in the hierarchy, you'll see that sometimes Unity is a little bit inconsistent with its nomenclature. The main camera has a space, whereas newer things, like the event system, does not have a space.
I'm gonna stick to having everything be camel cased so that we don't have to deal with separate spaces inside of any of our names, especially when we're going to look them up, so make sure that when you write StartWindow, you don't have a space in between the two words. Next, we're gonna want to make sure that this panel is stretched completely to each of the edges of the border. Panels will automatically be configured like this, so there isn't much that we need to do in the Rect Transform.
As we scroll down, the other thing we'll see is that a panel includes a background image, and a color that's set to a little bit under half transparency. Let's change the source image to one of our palette colors. Here, I have colors that represent each one of the palettes, but as sprites. It's very important that when working with the image component on a UI object, that we include a source image so that it knows how to properly display it in the hierarchy.
I'm gonna set this to color 2, and let's go to the color setting, and change the alpha to 100%. Now it's going to be a little hard to see, because the background camera and this screen both have the same background colors, but as we create more windows with different background colors, you'll see the importance of making sure that the panel has a proper image to complete the full size of the window. At this point, we have the basic foundation for our start window.
The things that we're gonna add to it are going to be a title, a row of buttons, and some credits. At this point, we have the basic foundation for our start window, and we've also gone through and reconfigured our canvas from scratch to match the UI examples that we built earlier. At this point, save your project so we're ready to move on to adding the elements to 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