[MUSIC] In this lecture, we'll set up our in game user interface. Our in game interface will parallel classic arcade games. We'll display score, high score, level, and number of extra lives across the four corners of our display. Our objectives will be to create the UI canvas, and setup the scaler properties. Create anchor and position the UI elements, and use layout groups to dynamically lay out the extra life indicators. Let's start by creating a canvas to hold our UI. Under the higher key, select create UI in canvas. I'm going to go ahead and rename my canvas, my game UI. And notice when the canvas was created it also created the event system game object. Leave this game object in the scene as it provides all the functionality of the event system. For the UI, such as animator control, button control and that sort of thing. And in the future we'll come back and make some modifications here. But for now, let's go back to the canvas, and let's modify the canvas scalar component. So right now, the UI scale mode is to constant pixel size. Remember, at any time you can click on the little book icon to bring up the reference related to any of the components. For my purposes, I wanna change this to Scale With Screen Size. So the canvas will scale up or scale down based on the size of the screen. So let's start building our UI elements, starting with the score indicator. So under create, under hierarchy, I'm gonna choose UI, text. Because I'm just gonna a text element to display the score. Then I'm gonna go ahead and rename this my score display. And I'm gonna anchor this. So you can see it down here, in the game view, it's just sort of in the bottom left hand corner. I actually want to put it in the top left hand corner. So, with the anchoring tool here, let me tap on that and hold down Shift+Alt. And I'll select the top left corner, and it moved it up to the top there. And as you can see, right now it's right up against the edge of the left hand and the top. I do like to give it a little bit of breathing room, a little bit of white space, around UI elements. So they're not right up against the edge. So we can do that through the position x and the position y. So I'm gonna move it over five pixels in the x direction, and I'm gonna move it down five in the y. So this would actually be negative five, to move it down from the top since we're anchored to the top. And I'm gonna modify the text from new text. To something much more like what it is going to look like. So I'll type score colon zero, as sort of a placeholder. And I'm going to increase the font size from 14 up to 20. So it's a little bit more prominent on the screen. And the alignment looks to be okay. On the line left, on the line top within the box. The overflow mode for horizontal and vertical, generally I like to make these overflow. So if the text gets bigger than the size of the width and height box it doesn't disappear, it'll actually just overflow that box. And of course right now we can't really see this color that well against the blue background, so I want a nice contrasting color, so I'm just going to go ahead and pick white so it really sticks out on that blue background. So we have our scores splice set up, we're going to create a high score display now. It's going to be very similar, so I'm just going to duplicate that game object and rename it high score display. Of course I'm gonna anchor it to the other side of the screen so the top right. So we'll open the anchoring preset tool and holding down shift and alt we'll pick the top right, and a lot of our settings are already set up. Of course we want to change our default text to say high score colon zero. And we'll change our alignment properties, so within the box there, it'll be aligned to the right side and once again to the top. And you can see it's right up against the edge on the top of the bottom, so let's go ahead and add a little bit of white space. So we'll back off five, from the right side of the screen, so we'll do negative five here. And then once again, negative five and the y to push it down. And let's go ahead now and add our level indicator, so once again I'm going to select the high score display and duplicate it, and we'll rename this level indicator. Because this is also just a text display that will be very similar. We're going to go ahead and anchor this to the lower right side, so holding down shift and alt I'll tap on the bottom right. And of course I'll modify the default text. I'll type level space one. And this is aligned to the right, which is great. It's also aligned to the top of the box. I actually wanna align this to the bottom of the box. And you can see I'm right up against the edges once again, so let's go ahead and do similar sort of whitespace around this just to give that breathing room. So we'll do negative five from this x. And this time we'll do a positive five for the y to push it up off the bottom anchor. In our UI element on our screen, it's gonna be our extra lives indicator. Of course we could do this through text like we've done everything else. But let's create a slightly more sophisticated UI display. Like most arcade games, we could actually use a little small representation of Sparty as icons down here in the corner to represent each extra life that we have available. So, to do that, I'm gonna create an empty game object to start with, and I want it to be a child of my game UI, so let me just select game UI. And choose Create > Create Empty Child. And this will make our game object, which will serve as our parent of the sub-elements, so let's go ahead and rename this Extra Lives Indicator. And we can set up the Anchoring and Position properties of the parent element. Very similar to how we set up the others. So you can see we've got the Rect Transform tool. This is here because it is a child of a canvas, which propagates this down into the children. So let me go ahead and pick the Anchoring preset. And once again holding down Shift+Alt will anchor to the bottom left Of course, it's kind of hard to see this right now, because there's no actual visual content yet. But if you actually tab f, you will zoom out. And we can actually sort of see the box here. Let me zoom out even further, so you can see the entire UI display here. So, this is basically my canvas. You can see the score, the high score, the level and this box down here that's gonna represent my area that my extra live icons are gonna appear. So, you can see where currently I'm right up against the edge. So, just like everything else I'm gonna add five pixels, push it off the x position, and five pixels to push it up off the bottom. I also wanna actually adjust the size of this box. Right now, notice it's 100 by 100. I'm gonna go ahead and set this to 320 by 32. So the reason I picked 320 by 32. I'm eventually gonna have 10 slots of 32 by 32 along here. So each of those cells, in essence, will be a spot to show an extra life indicator. So at max, in this game, I can have up to ten extra lives, probably much more than I'll ever actually have. So to actually create these little icons within here, unity has these concepts called layouts in the UI system. Which defines how child game objects will be laid out in the UI. We will use a layout to dynamic layout our extra life indicators. So on the extra lives indicator let's go ahead and add a component, and go down to layout. There's a variety of different layout options here, I'm going to choose grid layout group. Within the layout group component, we can specify the cell size. This is how big each of those extra live icons are going to be. I'm going to set this to 32 by 32. And then we can set the constraint. So this constraint right now says flexible, I'm gonna set this to a Fixed Row Count cuz I'm gonna have one more of these things. And the constraint count we set to one to create that one row. So now we just need to create our extra life images. So in the Hierarchy > Create > UI > Image. Because each extra life indicator is just going to simply be an image so we've created that image game object and notice the size of it on the display currently. And if I make this a child, so I am going to drag this into extra life indicator notice it scales down to 32 by 32 and it snaps right down there in the corner within that box. So this is what that grid layout is doing for us. So let me go ahead and rename this as extra life icon. And I wanna set the source image to one of Sparty's images, so I'm going to select the target here. And this shows all the sprites and the projects and graphical elements in the project. So I'm going to go down to the Sparty idol one, and choose that. And you can see the white box is replaced by the image of Sparty. So now that we have one of these game objects set up I'm just gonna duplicate this nine times. And you can see each time I duplicated it, it added a new one along this row. And of course, we could go in and rename these if we want but I'm just gonna stick with the default names for expedience purposes. So if I go ahead and play, you can see we have the UI on screen now but it's not being updated. We'll solve this problem soon but for now, we've got our UI set up so let's go ahead and save our scene. [MUSIC]
