Hello guys.
Welcome to the video.
In this one we're going to work on a level selection UI.
Going to be pretty simple to do.
We just need to use a couple of new components that we didn't see before.
And then I have a way of automating the level system.
So we can just create levels.
And the rest of the things will be done by the script we have.
So let's open level selection UI.
And first, before we make any levels, we need some sort of an area where we can place buttons that
will help us to choose level.
So we're going to click right button.
And make UI scroll view.
So scroll view allows you to scroll window like horizontally and vertically.
First of all, let's make it bigger.
Maybe something like this will work for us.
Yeah.
Now we want to remove this, uh, scroll bar here and here.
We don't need it because it's going to work anyway.
Just.
We don't want to see that scroll bars on the side.
Now, how it's going to work.
Well, we can arrange buttons inside of this, uh, content window manually with our hands, but that
would take a lot of time to do.
So better.
We're going to use component to arrange buttons automatically.
Then I'm going to explain how the scroll view works.
Okay.
Let's just see it.
First I'm going to make UI uh button here.
And let's just duplicate this button a bunch of times, like really a lot.
So now we have 22 buttons and they all at one place.
And it would be a really big headache for us to place them with our hands in the order that we want.
Instead, we can select Content Object and we can add a grid layout group.
Now these buttons will be arranged automatically and more to that, this component can change size of
the object buttons as well.
So for example, I want it to be 250 uh, on the X and 100, and the Y is fine.
Also, I would like to have a bit of a space in between buttons.
So I'm going to put spacing on the x 25.
Yeah, this is good.
And on the way.
Maybe 15.
Nice.
And let's keep child alignment.
Upper left.
Uh, start corner, upper left.
So basically, we don't need to change anything here.
Now, look, this looking fine.
I like it, but I don't like that we don't have any spacing on the left and on the top.
To fix that, we can go to the viewport and let's adjust the size of a viewport.
Let's press T and maybe scroll it down like that.
And let's do alignment in the center.
I'm gonna align it to the center.
And I'm going to hold Shift and Alt here.
Click this and then let's just reduce the size of a viewport.
To something like.
This.
Yeah.
Can you see that?
So now it will not be attached to the borders and it looks much better and prettier.
Very nice.
Now what else we can do here?
I don't like how it looks now.
We have six rows for buttons, but there is lots of space on the right, so maybe a bit more spacing
on the X.
Um, let's try to add padding from the left.
Something like this will do, I guess 70.
Maybe we can arrange everything with bedding.
I think that would be a good idea.
Let's stretch it back how it was.
And let's take the content and just add padding on the top.
20 is good.
20 from the bottom.
Let's see.
Maybe more padding on the left.
Like that.
100.
It seems like a hundred is 110.
Yeah, 110 seems like.
Okay, so this is good.
Now we have buttons that are arranged with a grid layout group.
And also these buttons can be scrolled because all of this is a part of a scroll view.
Now let's go ahead to play mode and see.
How does it work right now?
Because we need to fix a couple of things here.
First of all, we can scroll down.
Uh, we need more buttons, I guess.
Let's add more.
So let's say we have this many levels.
And when we go to play mode and try to scroll down, you can see it returns back to the first, uh,
buttons we have.
I cannot scroll down.
So that happens because scroll view and the scroll availability, let's say is determined by the size
of the content window over here.
We basically need to stretch it like that, and then it will allow us to scroll down more.
But still you cannot scroll all the way down.
That happens because again, this content window is not the size of all buttons we have.
We basically would have to do something like this, so it will allow us to scroll down more.
Now you can see I can scroll down, but we cannot fix it manually every time we add or delete buttons.
To overcome that, we can go here and click Add Component.
And then we're going to choose Content Size Filter.
And on the vertical we need to choose Mean size.
Because of that, this window will adjust itself according to the amount of elements it has.
If I'm deleting half of this.
Then it's going to have this size.
If I add more.
You can see it is increasing the size of itself automatically, which is really convenient for us.
Very nice.
Now let's talk about the scroll view itself.
As of now it behaves in a certain way and we can adjust it to make it work for us.
First of all, it can be scrolled horizontally as well.
That's not what we want.
So we would have to disable horizontal here.
Now you cannot scroll horizontally, only vertically.
That is good.
Now something else.
If you try to scroll down it's fine.
But if you try to scroll up, you can see it bounces back to the position it had.
And I like how it works, so I'm going to keep it at that.
I just want to tell you that this parameter is controlled by the elasticity over here.
And if you increase it, it's going to look a bit weird because it's going to just scroll down and then
it's going to bounce back but much slower.
So I prefer to keep this at low like 0.1 is fine.
Then we have inertia which basically keeps the movement after you stop scrolling.
So if I try to scroll a bit, you can see there is a bit of a movement even when I stop.
And if you increase this value like that and you just scroll a little bit, it's going to scroll it
automatically, which I don't really like.
So I'm going to keep this at low value as well.
And now scroll sensitivity affects the Will button on your mouse.
So as of now, if I try to scroll it with my wheel button, it's really difficult to do.
But if you increase this value to 30, for example, then it becomes much easier.
All right.
So I can select these parameters.
And I'm going to keep them.
So let me just copy component go out of a play mode and then paste component values.
Great.
So now we know how it works.
Before we go any further let's delete the extra buttons here.
And now we need to make a couple of levels so we can go to some levels with these buttons.
Right.
Because now we just have one level.
So there is no point of having multiple buttons.
So how are we going to make a couple of levels.
First of all, let's take this sample scene and let's change the name of this scene to uh level underscore.
And let's make it maybe as three okay.
Now I'm going to duplicate this and let's do duplicate.
It's not going to be level one.
And we need to duplicate it one more time and do level two.
Now I'm going to go inside of this scene.
And here let's save the changes.
And over here I'm going to somehow change the level.
So it's easier for me to recognize the difference.
And also maybe it will serve some purpose.
For example, in this level I just want to let player know that he can move left and right and he can
jump.
That's why I'm going to make something very simple, where he has just to go left and right and collect
some fruits.
That's the only thing I want him to do in this level.
So I'm going to take the wooden platform and do like that.
All right.
So I tried to make something interesting, but ended up with a very simple level over here.
And that's going to be just the first level.
I just want to teach player that he can jump, and that's all he's going to do in this, um, level.
Now let me make a second level real quick.
I'm going to go to level two.
Let me save the changes.
And in this scene, for example, I want player to learn that he can do double jump.
Yeah.
Totally possible.
Okay.
So this is the level two.
And we have level three as well.
Very nice.
Level one.
Level two level three.
Now let's go back to main menu.
And over here we have a goal a very simple goal.
This button can load the scene that we want.
It just need to know the name of the scene or the index of the scene and let me go back.
To this viewport.
There is a content and there is a button.
So this is the button that is responsible for opening the level.
And we want to create button for each level we have in the build settings.
So first of all let's go to File Build Profile Sin list.
And over here we have only main menu level three.
And the end.
We need to take level one.
Drag it here.
And we need to take level two and drag it here.
Now all of the scenes are in the scene list and we can see that each scene has an index.
This one is zero for the main menu.
Then level one has one, level two has two, level three is three and the end has the last one.
And we can utilize this index to open the scene that we want.
Or we can take the name of the scene and open the scene that we want.
Or we can take both parameters and make it work for us.
We can take the name to open the scene and index will allow us to make this process automatic.
First let's add component on a button.
It's going to be UI level button.
Let me find that script.
UI level button over here.
I'm going to make variable public just so we know that it works.
And later on we're going to just make it private.
So let's make public string scene to load.
All right, well, let's do a C name.
All right.
Very nice.
Now, um.
Let's make a method public void.
Lord level and this will do something simple.
Scene manager load scene with a scene name just like we did before with a new game button.
Right now what I want to do is to make a method that will create a button for each level we have in
the project, and then it will assign this variable on its own while creating a button.
For that, we need to go to level selection.
Add component of a new script UI level selection.
Uh, let's go inside of this script.
And over here we want to have reference to the buttons prefab so we can create all of the buttons together,
uh, in the code.
So private UI level button.
I'm going to use a script, not the GameObject, because we're going to need access to the component
of a UI level button.
So let's do button prefab.
And also we need the reference to the parent.
So we're going to do private transform buttons parent.
And we're going to use content.
Sorry.
We're going to use content as a parent for all of the buttons, and because of that, we don't need
to set position or anything else.
We can just make buttons here and they will be aligned automatically because we have this component
of a grid layout group.
So let's go back to script.
And over here we're going to make private void read level buttons.
And first we want to know how many buttons we need to create.
So let's make int levels amount.
How can we check this.
We can do scene manager scene count in build settings.
And this will return us amount of scenes we have uh over here.
In a scene list.
The only change we want to do is we want to exclude the end button.
We're also going to exclude main menu, but in a different way.
As of now we just need to exclude the end.
So how are we going to do this.
We're going to go back to script and type here minus one which means all of them minus one.
Which means again we're going to do all of the scenes except the last one.
Then we're going to make a for loop.
On the levels amount.
And of course we don't want to include the main menu scene.
And if we don't want to do that, we just need to change I to one.
So it will start from one, not from zero.
And because we excluded the last one, it's only going to do that for level since we have and now we're
going to do UI level button.
New button equals to instantiate button prefab.
And over here we can give it a parent.
We're just going to give it buttons parent.
Nice.
Now we want to take new button and give it the index of itself so it knows what level it needs to load.
Let's go to UI level button over here I'm going to make a method.
Public void setup button and this button needs to know int level index or sin index doesn't really matter.
So I'm going to make here private int level index.
And then we're going to do.
This level index or actually, let's just make it as new level index, new level index and is going
to be level index equals to new level index.
Very nice.
Now we can take scene name and make it equals to level underscore.
This is how we have it in the asset folder.
And then plus level index just that that's what we need.
Also I want to write name of the level I mean number of the level on the button itself.
So I'm going to make serialize field private text mesh pro GUI.
Level number text.
And then over here we can do level number text dot text equals to level space plus level index.
It's very good.
Let's save this one then.
Let's go to level selection.
And over here we're going to do a new button.
Set up button with a I.
Now let's call method in the start.
Start.
Create level buttons.
Very good.
Let's go back to unity.
We have levels in the scene list and names are here.
And we did not take the main menu because we started from one.
And also we did not take the end because we did minus one.
Now we can go to this button.
Let's rename it to level.
Button.
We want to assign reference to the text over here, and then we can go to prefab.
Let's make a folder for UI UI.
And then let's drag this level button to UI just like that.
Now we can delete it from the content.
And on the level selection we need to assign this button over here.
And also we want to give parent over here.
So we're going to drag content to this field.
Now let's go to play mode.
And ta da!
We have level one, level two, level three, and each button has a name of a scene that it's supposed
to load level one, level two, level three, and we can click any of them.
And it will not work because I forgot to add on click event.
Let's do it now and let's click add here.
Drag your level button and choose Level Load.
This is supposed to be done in the prefab over here okay let's try again.
And.
Ta da!
I'm on a second level.
Perfect.
This works very well for us.
So this one going to be used when we click Continue game.
And we want to select the level or start from the level that we want.
For example player wants to collect all of the fruits so he wants to start over.
Yeah that is good.
Now what is next.
We need to save the progress of the levels we've completed.
But we're going to do that in another video.
As of now, let's give each scene a knowledge of what the index this scene has.
So I'm going to go to level one.
Let me save it.
We need to take game manager, and on a game Manager script, we can make some sort of a header.
Header level management.
Over here I'm going to do serialize field private int.
Current level index.
And then maybe in the start we can do current level index equals to scene manager get active scene dot
build index.
Very nice.
So now this one has information about the current level index.
And then we're going to go to the level finished method over here.
Or actually where we load the end scene.
And we're going to make another one private void load next level which will do something simple for
us.
It will do int next level index equals to current level index plus one.
Then we're going to do uh scene manager load scene.
Over level underscore plus current.
I mean next level index.
We could use only index in a build settings, but then we would have only numbers in the script.
And that would be a bit confusing.
But if we have string we basically can see that we load in the level.
So that's why I prefer to use name of the scene.
Now in this method, we need to decide if we want to load the next level or the final scene and show
that game is over.
So first of all, we're going to use fade effect two times now in this method.
So that's why I want to do fade effect.
Fade effect equals to UI in game dot instance dot fade effect.
This will help me to type less code over here.
All right.
Now we want to know if there is no more levels in build.
I guess we can do um, bool.
No more levels and this will be equals to true if current level index plus one is equals to the, um,
scene manager.
My brain is not raining today.
Scene count and build settings.
Yeah.
So this is what we have.
And then we're going to do if normal levels then load the end scene else do fade effect screen fade
1.5 f.
Uh load next level.
Very nice.
So what's the idea here?
Uh, let me open.
I'll build profiles, scene list.
And now we can see that, for example, we're doing this check on the last level we have which has index
three three plus one is four.
If and if that is equals to sin counts and builds.
Uh, one, two, three.
Or this is actually should be five because this will count 012, three, four, five.
So this will be five.
Because we need to calculate the, um, oh my God, we need to calculate the amount of levels, but
we don't need to calculate one and two.
So.
Easiest way would be type here.
Last two.
But then that can be very confusing.
So now we need to make it clear somehow.
So it's understandable what we're doing here.
Let's do it this way.
Let's do int last level index equals to scene manager.
Uh scene content build settings minus two.
And I'm going to leave a comment here.
Okay.
Very well.
Now we're going to do if current level index is equals to last level index then there is no more levels.
And if that's the case then we're going to load the end scene.
Very cool.
Now let's save this.
Let's go back to unity.
Uh, over here on the canvas.
We need to change scene name to level one.
And I think it's better to change the variable name.
I'm going to change it to first level.
Name.
Okay, this is better because this one is, uh, loaded with a new game.
This is going to be changed later, but as of now, this is good.
So we're going to do level one here.
And now let's just go and try.
I'm going to go to play mode.
New game.
All right, go forward, go forward!
Let's go.
Now.
Level two.
Perfect.
And oh my.
And level three.
And.
The end.
Nice.
Very nice.
I'm so happy about it.
Very cool.
All right.
We still have much to do.
So let's go to the next video.
We're going to manage new game and continue game button I'll see you there.