Creating a background and panel - Unity Tutorial

- [Instructor] Now let's move forwards with the creation of our UI and to do that, I'm going to be creating the background of our scene. Before doing that I'm going to do something that we should have done a long time ago and that is save the scene in front of us here because we don't want to create work and then lose it. We need to be smart here. So I'm going to save it by pressing Control + S on the keyboard, Command + S on a Mac or choose File Save. The scene that gets saved is the sample scene, which is inside the Scenes folder down here in the project panel. So the first thing that I want to add is the background element to this world. Now, you might think that the best way to do that is by dragging and dropping the background into the scene but it really isn't. In creating this and by dragging and dropping the background, unity creates a sprite object. You can see from the inspector, it creates a sprite. Now a sprite is not part of the user interface system. These are the kinds of elements that move around a world inside a 2D game, like a player character or an enemy character, but they're not part of the UI. So by default usually gets it wrong if we just drag and drop from the project panel to the scene. So I'm going to select the object that it created automatically and I'm going to right click to delete that. Instead, I want to select the canvas object. Right click with my mouse, choose UI and then select image to add an image as the background. Now inside the source image field in the inspector, that is where we drag and drop the element that is to be part of the background. You can see the background here. Now to ensure this is set to the correct aspect ratio for this image, I'm going to hit the button here that says Set Native Size and there we have it. We've got a pretty big image. I'm going to scale this down a little bit by selecting the rect tool up here. This allows me to click and drag to manipulate the different corner elements. Now I'm going to undo that because what I want to do is hold down the shift key on the keyboard and move to one of the corners. This allows me to resize the element while preserving the aspect ratio. So something smaller like this and then position that to the center so we're capturing this image within the frame. I can move to the game tab to check out the result of how that looks and that's pretty good. The next thing I'm going to do is make sure that this image is centered here. So you can see that it has its center point at the center of the screen, but I'm also going to lock the edges of this image to the edges of the screen so that if the width or the height of the screen were to change, this background would still scale with the screen size change. So here, I'm going to move to these anchor points and click in these presets. I'm going to move down to the bottom right hand side, which is the stretch preset. I can easily test it by moving to the game tab and I'm going to begin to resize the window. And as I begin to resize, you can see we can change the size and this image is scaling and shrinking to adapt to the new size. Perfect. We've now added this background element. Of course, I'm going to rename this, not to image but as the background. Now, in addition to the background we also want this other element here. If I left click to select it, you can see in the preview here that this effectively is a panel that should appear on top of the background and I'm going to use another image object to create this. So I'm going to select the background and right click and choose UI, and then select Image again. So just select Image here to bring that into view. Again, for the source image, drag and drop this element into it. I'm going to choose Set Native Size to resize this element. And it's looking pretty good, but that is simply too large. So once again, holding down the shift key on the keyboard I can click and drag from one of the corner points and then snap this to the center here, to somewhere around there. And unlike the background, I don't want to lock the edges of this image to the edges of the screen. I want to keep the width and the height of this and still keep it positioned at the center. So I'm going to leave the anchor points here set to the center and then select the image. And I'm going to rename this to Panel Buttons and press Enter on the keyboard to accept those changes. And let's just check out the results here in the game tab. Inside the game tab, I can see the result here and that's looking pretty good. I'm pretty happy with the results there. So we now set up a background and a panel in front of it. We're now ready to begin adding some new elements.