Hello, guys.
In this video, we're going to make layout for shop.
It's going to be a pretty simple task, actually, with all that stuff that we already have.
Let's switch off.
These two actually lets me duplicate Main menu.
I'm going to rename this to shop UI.
Chop UI.
Let's switch it on.
What we want here is just one button in the corner so we can close the shop.
So we don't need a shop button.
We don't need the mute button, but we need the settings button that we can rename to close button.
Let's find an icon for this.
This one looks okay.
So I can just drag it here.
This looks good.
We don't need to start and game info.
Well, let's keep it.
We're going to just change it by a bit.
Now, next step would be is to go to Dark Prefabs panel.
And here we can find different prefab that was prepared by creator of the assets.
Let's try and see how shop looks by default.
Hmm.
This is okay.
Now we need to only change it by a bit.
Let's go and choose colour black and then make it transparent to somewhat like this, maybe even more
transparent.
Now, we need to change the size of the shop because I don't like how it looks.
We're going to change this to something like.
This, but not covering the close button or even maybe better, just make it fit entire screen.
Let's click over here align to center by holding shift alt and click the center point.
Okay, that's good.
Now I want to change it a bit and for that we better to unpack prefab.
So let's do this prefab and back completely.
Next step would be to make two columns because we want to have colors for player and colors for platform.
Let's go inside.
Let me switch them off and show you what is the components inside one by one.
Nothing special, honestly.
Just some graphic images.
And so, like this divider is just a line.
Nothing else.
Or this close button.
By the way, it has closed button inside.
Let me see how it looks.
Hmm.
This looks not bad at all.
So let's keep this one.
When I delete this close button.
And we're just going to rename this to the name I use BTN.
Yeah.
Looks not bad at all.
Now there is a title which we could use as well for shop, but we need to change this to what we need.
So let's take the font we have.
And by the way, and by the way, if you want, you can upload your own fonts for this, but I guess
this font looks okay for this game.
I guess by opening this shop player we'll understand that this is a shop so we can put some different
text here.
For example, click to buy, very simple and increase the size.
Now featured items.
What is it?
This is just one template of what of our content game object.
So let's close this one for now.
Go to scroll view.
Let's open this and this is the scroll view that allows us to swipe buttons up and down.
And also it contains lots of objects in it.
Before we change anything, let's change the size of this by pressing T and dragging it to something
like this.
Okay, I'm going to switch off general info for now.
And we're going to go inside scroll view viewport content.
And this is the layout group that allows you to layout buttons within one window.
I covered more on how to make layout groups like this in my other course on how to make platformers.
If you want to, you can check that as well.
For now, let's just use this asset so we have this content and look carefully.
I can delete these three buttons and it's going to be fine.
It's going to contain one, but I can as well create more if I hold my control.
Now you can see I created like 18 buttons and in the play mode, let's go and see this.
It will now contain all of that player is restart in the game.
Wait, let me switch it off.
We can see now I have 18 buttons inside of this menu and I can swipe it like this and it will work with
your mobile phone as well.
So what we need to do now is to adjust the size of these buttons and change content for them.
What is inside of this button?
All right, let's go.
Yeah, This is a good close button.
You seen?
I just pressed it intuitively.
That's a good sign.
So let's delete these.
All of these buttons.
Take the first one and change it and change its size to something smaller.
I also would like to change the border for this.
Hmm.
This one looks okay.
This one with a.
Let's drag it here.
Let's make it white.
And just to be transparent.
Now, let's see what is inside of this content button.
There is an image that we're going to use later, so let's just move it over here and we're going to
change that sprite.
Well, let's do it now.
Let's go to graphics.
Player Idol choose this image and drug player idol over here and maybe we can make it bigger.
We should make it bigger.
We don't need that.
Now, what else is going to have?
We're going to have a price.
So let's say it's going to be 30 coins.
We're going to place it in the center.
Then we need an icon that says, What is this number?
So let's create an image under that UI image.
Again, we need to find our graphic graphics and drop coin over here.
That is good.
We can make it smaller.
So a 50 by 50.
Place it somewhere.
Here, let's align the text, align to the right pivot point in the center.
Then take the image, move it to the right for a bit.
And maybe place it here.
Or in the middle.
I think here is okay.
This buy button.
We don't need it.
We can make entire button as a buy button.
Cool.
Now let's see how it looks.
I think this looks okay.
Now let's continue and move further.
The next step I want to do here is to make a second one.
So we have all information in one shop.
Let's do this scroll view.
Let's take it and change size a bit to something like this to make it slimmer.
Let's see, the size could be just 500 on the width and height, 600 and the size of the content button
is 400 by 480 by 115, let's say.
That's okay.
So we have one scroll view.
Let's move it to the right just like this and make another one.
Press control D to duplicate.
Way to the right again.
That's good.
So one of them going to have colors for a player that you can purchase and change color of your player.
And second one will be for platforms.
So you can change color of the platforms as well.
Before we continue, I want to make kind of a display.
Let's close this scroll view for now and create new UI image here.
Let's go to dark UI free.
Find a border for this one.
Okay.
Now we need to change size to something bigger.
It's going to be our display.
That's okay.
Now we need to place a platform inside and a player inside.
So we are going to change colour in this display to see what we are buying.
All right, let's do this.
Let's rename this to display.
And inside we're going to make UI image.
I'm just going to rename this to form.
Then go to prefabs.
Sorry.
Prefabs.
Level part.
Grab the platform.
Take the colour and copy this number.
Then going back to your wide platform and change color here.
Based in.
Now let's change the size of this to make it look like a platform in the game.
Yeah.
Then let's create another image UI image.
Player.
We need the graphics folder with the player sprites.
We can choose any of them or we even can make an animation for example, and we can do that.
Why not?
Let's do the run animation.
Yeah, let's put the running sprite here.
Let's set native size.
That looks better.
Now let's go to assets animations UI create new controller layer display a C.
Drag it then animation create.
Make sure we have same folder animations UI layer.
Display.
I guess, before we name the animations with a small letter.
Yeah, we should do this as well.
I'm sorry.
Let's be consistent.
It's very important.
Oh.
Yeah.
So now let's find our animation player display.
Go to graphics player run drug price here.
Let's change.
Simple right to wealth.
It's okay if we don't like how it looks.
If it feels dizzy, we can change animation.
Or just make it steel.
Yeah.
Cool.
Bit higher.
And maybe a bit smaller.
I don't like how it looks.
Let's use scale so we don't mess up the sprite.
Now, what else do we need here?
We need to know.
Amount of money we have.
Right?
So let's switch on divider that we had before.
What would be low somewhere here And then find this general info bar that I had again rename it to info
bar.
This is a better name.
We can delete this last score from inside and best score as well and have only enough about coins.
So this text could be bigger.
Why not?
Sort of like for t.
Yeah.
Let's put here 3256, for example.
And I want to keep info bar with the same size so you kind of have impression.
You can have a big number that can fit in these borders like a million or something.
Cool.
And from where we have display, we have let's double check the scroll view.
First one, we need to rename this to player color view.
And this one will be platform color view.
All right, That's good.
For now, let's go inside of this one open viewport.
Find content.
Content one.
And I want to change this source image to a square image to represent a platform.
I guess if we delete this one.
Sorry.
Not this one image over here.
Yeah.
And if we delete an image here, it's going to be just a square like that.
And then we can change size to what we need.
To make it a square.
Let's make it 60 by 60.
And it might feel a bit unclear.
What is it we're selling here, but we're going to set not such a big price.
And just after first purchase, it's pretty clear and intuitive what happened just now and how does
this shop work?
So it's going to be very simple to navigate around and understand this shop, I'm telling you.
Now.
Let's close this.
And this title going to be an info bar.
And this title Game object.
We're going to change the text of it to let a player know if purchase was successful or not.
If you don't have enough money or any other result that happened in the shop.
So anyway, let's rename this from title to just info text.
Yeah.
Okay.
I want to arrange it a bit.
So divider Divider two over here.
Close button in for text after that.
In bar.
Display.
And I think what we can do here is to make.
This one child of the canvass.
So we don't have an extra parent for this one.
Let's rename this to chop UI.
Do I record?
I do record.
Let's make sure size is right.
Let's do alignment in the center.
Don't forget to press out and shoot when you do this.
I'll set in position.
Shift for certain pivot point.
Okay, that's good.
If something comes up, we can fix it later.
Let's go to the next video.