In this lecture, we're going to learn all about the UI canvas and set up a background image for our
game.
Okay.
So here we are in a brand new Unity 2D project.
So if you haven't set that up just yet, go ahead and do that.
Now, you can see in the top here that I've called mine Quizmaster and I'm using Unity 2020 1.1.7.
I've also gone ahead and renamed my sample scene to game and I've imported the sprite pack that's attached
to the resources for this lecture.
So in here we have a background image for the game.
We have a couple of different button images and we also have the pre visualization images that you saw
in my game design document in the last lecture.
So feel free to download those and import them into your own project or you can go ahead and create
your own images and you can just use these provided ones for a rough idea of the size they need to be
so that you can follow along without any weird scaling issues.
Now, before we go ahead and add anything else to our project, let's actually discuss what UI is and
how a canvas works.
So whenever you hear the term UI in game development, this tends to mean user interface.
And the user interface includes everything from text boxes, buttons, sliders, menus, mini maps and
pretty much anything that the user can interact with that isn't part of the game world itself.
Now, in Unity, the UI elements, as they're known, live on something called a canvas.
Now this canvas generally exists in something called screen space and is mostly separated from the game
world, which exists in world space because these canvas objects are objects in the hierarchy.
We can also have multiple canvases in our game and this is going to come in really handy for our quiz
game because we're going to be separating things like the quiz itself from the background elements so
that we can flick between canvases without having to change everything every time we change screen.
So if we jump back over into unity, let's actually have a look at the canvas in a bit more detail.
As I mentioned, this is an object that exists in the hierarchy.
So to add one, we can go over to our hierarchy area, right click, head down to UI and then click
on canvas.
Now the first thing you might notice is that we have a canvas being added, but we've also had an event
system added.
Now you don't really have to worry too much about the event system for now.
Really, the only thing you need to know at this stage is not to delete it because we are going to be
using the event system later on.
Now, if we click on the canvas and take a look at the inspector, the first thing you'll notice in
here is that it doesn't have a standard transform component like every other object you will have encountered
so far.
Instead, we have something called a rect transform, and this works fairly similar to the standard
transform component.
So it has a position, a rotation and a scale, but it also has some extra stuff in there as well.
So we have things like the width and height.
We have some anchor points and pivot point information.
Now in time we'll also get familiar with these other components.
So the canvas component, the canvas scalar and the graphics ray caster.
But for now we can just leave all of that alone and we'll just come to look at these when we actually
need to change things in the future.
Now, adding just a canvas on its own to our project isn't particularly exciting, and to really see
all of it in action, we need to add something to that canvas.
So we're going to start off with a simple image and whenever we add stuff to the UI, it has to be a
child of the canvas itself.
So if we go ahead and right click on the canvas rather than in the general hierarchy area, head down
to UI and then click on image.
We'll add an image to our canvas.
Now if we look closely, we can't actually see anything in our camera view here, but if we change over
to the game view, then lo and behold, here is our nice big sprite.
So why isn't it showing up in our same view?
Well, if we flick back over to the same view, this is the camera view.
So this is looking at the world space of our game.
But as I mentioned in the earlier slides, the canvas exists in screen space and you may be able to
see this kind of white outline on the edge here.
And that's actually the corner of our canvas.
So let's double click on our canvas to center it and you'll notice we zoom all the way out and down
in the bottom left corner.
You might still just about be able to see where the camera view is.
We can also see that our sprite has now shown up in the center of our canvas area.
But even though the canvas is significantly bigger in scene view, in game view, everything comes together
with world space behind the camera and then the screen space being overlaid on top.
And to demonstrate this a little bit better, let's also go ahead and add a sprite from our 2D objects
and we'll just add a circle so we can tell the difference.
We'll set the position to be, say, five on the X axis and zero on the Y axis, and we can see our
circle here.
And then if we click on the canvas image so we can see the difference in position.
Opposition here is at zero zero.
But if we change the x axis to be five so it's the same as the circle, we notice the square only moves
ever so slightly.
So this can be a little bit confusing when you first encounter the world space and screen space working
together.
But with a little bit of time and a little bit of practice, then all of this should hopefully become
fairly intuitive as we move forward.
For now, let's just go ahead and delete our Circle Sprite because we don't really need it for our game
because we're working purely within the UI.
So for this project, we're not actually going to have to worry about that kind of difference between
screen space and world space.
It's just something that I wanted to point out so that you are aware of it.
Now if we head back into same view so we can work on things a little bit easier and click back on our
image.
If we scroll in a little bit so we can see what we're doing a bit clearer.
And if we head back over to the inspector, we can see that our rect transform now has all of the options
open for us to be able to change.
So in addition to us being able to change things like the position, the rotation and the scale, we
can also play around with some of these other options.
As you might expect, if we change the width of our square, then the width will increase and the same
goes for the height.
But notice as well that the x and y position are also changing.
So let's reset that back to zero and we can see that the Sprite gets represented back on the center
of the screen.
And that's because this is viewing the center of the screen as the zero position.
This isn't necessarily fixed in stone, though, and we can change it based on the anchors for our image.
And we can see here that we've got options to set the different anchor points.
However, rather than amending the anchors and pivot manually for now, let's actually click on this
icon in the top left of the rect transform this little square with the Red Cross in it.
If we click on this, this will give us some anchor presets that we can use.
So if we click on, say, the top left, this will anchor our image to the top left of the screen.
And I don't know if you can see this, but we've got this icon here that was previously in the center
of our square but is now locked to the top corner.
Our image hasn't actually moved, but if we look at the rect transform behind this window, we can see
that our position has changed from zero 0 to 5, seven, seven and negative to 60.
If we set these back to zero, then the center of our image goes to the top left corner.
And this brings us onto the pivot point.
So our pivot point of our image is currently the center of our sprite, but we can also change this
and we again have some options here that we can play around with or we can use the anchor preset option
again.
And this time let's hold shift to also set the pivot.
So holding shift we notice the icons all change to add this little blue pivot icon and if we again click
on the top left corner, we'll notice again that our position has been changed and if we set this back
to zero, the pivot point is now the top left of our image and so is the anchor.
So it's now anchored the sprite to the top corner of the screen.
One final thing we can do in this anchor preset is also set the position by holding down the alt key.
If we hold down the alt key will notice again that the image is changed to represent the image being
moved and we can actually do both of these things together so we can set the position and the pivot
point by holding shift and alt and let's pick a different option.
Let's move it to the top right instead.
And if we do that, then notice that the anchor moves, the pivot moves as well, and so does the image.
And now some other great options within these anchor presets.
Are these options around the edge, which will allow us to stretch the image.
So if we again hold shift alt and then click on this top one, we could say stretch the image across
the entire top of the screen and notice how the anchor, which used to be a cross, is now been split
down the middle.
So we have two anchor points on this side and two anchor points on this side.
An options like this that stretch across the top or bottom of the screen are great for things like menu
bars and stuff like that.
But for us, we're going to be adding a background image to our canvas.
So we're actually going to use this one in the bottom right corner.
So if we hold Shift Alt and then click on this, it will break the anchors apart again and it will stretch
the image across the entire canvas.
And this will be the case regardless of the aspect ratio or resolution that your game is in.
And while we're on the subject of resolutions, we could reasonably use these different anchors and
pivots and setups to design a game that can work on multiple different resolutions and aspect ratios.
But since this is our first foray into the UI and the rect transform, let's actually just design our
game with one specific resolution in mind.
And that's going to be the most common resolution, which is HD.
So over in our game view, there's change from free aspect to full HD 1920 by 1080.
And now whenever we look at our game view, we'll always have a good idea of our target resolution.
Now let's jump back into our same view and actually do some work on our game.
Now, rather than making this the background image for our game, I'm actually going to turn this into
a pre visualization image which will help us to lay out elements of our game as we move forward.
So down in our sprites folder, I'm going to take the first pre visualization image that I've got and
drag it into the source image.
And because I want this to appear on top of everything else and be slightly faded out so we can see
behind it, I'm going to change the color and I'm just going to bring the alpha value down to say around
0.25.
And on the canvas itself, I'm going to change the canvas, sort order and just increase up to, say,
100.
All this really means is that it will appear on top of any other canvases that we add with a lower salt
order.
And finally, I'm going to rename my canvas to the pre visualization canvas.
And that, I think, brings us nicely on to your challenge.
I want you to add a second canvas to the hierarchy.
And on this second canvas, I want you to add to the background image for your game so you can either
use the one that came in the resources or find your own for your particular game.
And I want you to make this image stretch to fill the entire screen.
So pause the video now and give that a go.
Okay.
Welcome back.
So to add a second canvas to our hierarchy, we're going to go over to our hierarchy area, right click,
go down to UI and then select canvas.
This allowed a second canvas and I'm going to rename this to the background canvas.
Then we're going to right click on our canvas.
Head down to UI again and go up to image.
We can then make this stretch across the entire screen by going to our anchor presets, holding shift
alt, and then selecting this bottom right option.
And then finally we can take our background sprite image and drag that into the source image.
If we want to see our background on Obscured, then we can just click on our pre visualization canvas
and hide it and with our canvas all set up, that puts us in a great place for the next lecture where
we're going to start adding some text to our canvas.
So I'll see you there.