1
00:00:00,000 --> 00:00:01,000
Hello, guys.

2
00:00:01,000 --> 00:00:03,000
In this video, we're going to make layout for shop.

3
00:00:03,000 --> 00:00:07,000
It's going to be a pretty simple task, actually, with all that stuff that we already have.

4
00:00:07,000 --> 00:00:08,000
Let's switch off.

5
00:00:08,000 --> 00:00:12,000
These two actually lets me duplicate Main menu.

6
00:00:13,000 --> 00:00:15,000
I'm going to rename this to shop UI.

7
00:00:18,000 --> 00:00:19,000
Chop UI.

8
00:00:19,000 --> 00:00:21,000
Let's switch it on.

9
00:00:21,000 --> 00:00:26,000
What we want here is just one button in the corner so we can close the shop.

10
00:00:26,000 --> 00:00:28,000
So we don't need a shop button.

11
00:00:28,000 --> 00:00:35,000
We don't need the mute button, but we need the settings button that we can rename to close button.

12
00:00:35,000 --> 00:00:37,000
Let's find an icon for this.

13
00:00:37,000 --> 00:00:38,000
This one looks okay.

14
00:00:39,000 --> 00:00:41,000
So I can just drag it here.

15
00:00:42,000 --> 00:00:43,000
This looks good.

16
00:00:43,000 --> 00:00:45,000
We don't need to start and game info.

17
00:00:45,000 --> 00:00:46,000
Well, let's keep it.

18
00:00:46,000 --> 00:00:48,000
We're going to just change it by a bit.

19
00:00:49,000 --> 00:00:53,000
Now, next step would be is to go to Dark Prefabs panel.

20
00:00:54,000 --> 00:00:59,000
And here we can find different prefab that was prepared by creator of the assets.

21
00:01:00,000 --> 00:01:03,000
Let's try and see how shop looks by default.

22
00:01:04,000 --> 00:01:05,000
Hmm.

23
00:01:05,000 --> 00:01:06,000
This is okay.

24
00:01:06,000 --> 00:01:07,000
Now we need to only change it by a bit.

25
00:01:07,000 --> 00:01:14,000
Let's go and choose colour black and then make it transparent to somewhat like this, maybe even more

26
00:01:14,000 --> 00:01:15,000
transparent.

27
00:01:15,000 --> 00:01:18,000
Now, we need to change the size of the shop because I don't like how it looks.

28
00:01:19,000 --> 00:01:22,000
We're going to change this to something like.

29
00:01:23,000 --> 00:01:30,000
This, but not covering the close button or even maybe better, just make it fit entire screen.

30
00:01:31,000 --> 00:01:37,000
Let's click over here align to center by holding shift alt and click the center point.

31
00:01:38,000 --> 00:01:39,000
Okay, that's good.

32
00:01:39,000 --> 00:01:43,000
Now I want to change it a bit and for that we better to unpack prefab.

33
00:01:43,000 --> 00:01:46,000
So let's do this prefab and back completely.

34
00:01:46,000 --> 00:01:52,000
Next step would be to make two columns because we want to have colors for player and colors for platform.

35
00:01:54,000 --> 00:01:55,000
Let's go inside.

36
00:01:56,000 --> 00:02:01,000
Let me switch them off and show you what is the components inside one by one.

37
00:02:01,000 --> 00:02:02,000
Nothing special, honestly.

38
00:02:02,000 --> 00:02:04,000
Just some graphic images.

39
00:02:04,000 --> 00:02:07,000
And so, like this divider is just a line.

40
00:02:07,000 --> 00:02:08,000
Nothing else.

41
00:02:08,000 --> 00:02:10,000
Or this close button.

42
00:02:10,000 --> 00:02:12,000
By the way, it has closed button inside.

43
00:02:12,000 --> 00:02:13,000
Let me see how it looks.

44
00:02:14,000 --> 00:02:15,000
Hmm.

45
00:02:15,000 --> 00:02:16,000
This looks not bad at all.

46
00:02:17,000 --> 00:02:18,000
So let's keep this one.

47
00:02:18,000 --> 00:02:20,000
When I delete this close button.

48
00:02:20,000 --> 00:02:24,000
And we're just going to rename this to the name I use BTN.

49
00:02:26,000 --> 00:02:26,000
Yeah.

50
00:02:26,000 --> 00:02:27,000
Looks not bad at all.

51
00:02:27,000 --> 00:02:34,000
Now there is a title which we could use as well for shop, but we need to change this to what we need.

52
00:02:34,000 --> 00:02:36,000
So let's take the font we have.

53
00:02:36,000 --> 00:02:41,000
And by the way, and by the way, if you want, you can upload your own fonts for this, but I guess

54
00:02:41,000 --> 00:02:43,000
this font looks okay for this game.

55
00:02:43,000 --> 00:02:48,000
I guess by opening this shop player we'll understand that this is a shop so we can put some different

56
00:02:48,000 --> 00:02:49,000
text here.

57
00:02:49,000 --> 00:02:56,000
For example, click to buy, very simple and increase the size.

58
00:03:00,000 --> 00:03:01,000
Now featured items.

59
00:03:01,000 --> 00:03:02,000
What is it?

60
00:03:02,000 --> 00:03:06,000
This is just one template of what of our content game object.

61
00:03:06,000 --> 00:03:08,000
So let's close this one for now.

62
00:03:08,000 --> 00:03:10,000
Go to scroll view.

63
00:03:10,000 --> 00:03:17,000
Let's open this and this is the scroll view that allows us to swipe buttons up and down.

64
00:03:17,000 --> 00:03:20,000
And also it contains lots of objects in it.

65
00:03:20,000 --> 00:03:26,000
Before we change anything, let's change the size of this by pressing T and dragging it to something

66
00:03:26,000 --> 00:03:28,000
like this.

67
00:03:29,000 --> 00:03:34,000
Okay, I'm going to switch off general info for now.

68
00:03:35,000 --> 00:03:39,000
And we're going to go inside scroll view viewport content.

69
00:03:39,000 --> 00:03:46,000
And this is the layout group that allows you to layout buttons within one window.

70
00:03:46,000 --> 00:03:50,000
I covered more on how to make layout groups like this in my other course on how to make platformers.

71
00:03:50,000 --> 00:03:52,000
If you want to, you can check that as well.

72
00:03:53,000 --> 00:03:57,000
For now, let's just use this asset so we have this content and look carefully.

73
00:03:57,000 --> 00:04:00,000
I can delete these three buttons and it's going to be fine.

74
00:04:00,000 --> 00:04:04,000
It's going to contain one, but I can as well create more if I hold my control.

75
00:04:04,000 --> 00:04:11,000
Now you can see I created like 18 buttons and in the play mode, let's go and see this.

76
00:04:12,000 --> 00:04:17,000
It will now contain all of that player is restart in the game.

77
00:04:17,000 --> 00:04:18,000
Wait, let me switch it off.

78
00:04:19,000 --> 00:04:24,000
We can see now I have 18 buttons inside of this menu and I can swipe it like this and it will work with

79
00:04:24,000 --> 00:04:25,000
your mobile phone as well.

80
00:04:25,000 --> 00:04:30,000
So what we need to do now is to adjust the size of these buttons and change content for them.

81
00:04:30,000 --> 00:04:31,000
What is inside of this button?

82
00:04:31,000 --> 00:04:33,000
All right, let's go.

83
00:04:33,000 --> 00:04:34,000
Yeah, This is a good close button.

84
00:04:34,000 --> 00:04:35,000
You seen?

85
00:04:35,000 --> 00:04:37,000
I just pressed it intuitively.

86
00:04:37,000 --> 00:04:38,000
That's a good sign.

87
00:04:38,000 --> 00:04:40,000
So let's delete these.

88
00:04:40,000 --> 00:04:41,000
All of these buttons.

89
00:04:42,000 --> 00:04:49,000
Take the first one and change it and change its size to something smaller.

90
00:04:49,000 --> 00:04:52,000
I also would like to change the border for this.

91
00:04:55,000 --> 00:04:55,000
Hmm.

92
00:04:55,000 --> 00:04:56,000
This one looks okay.

93
00:04:56,000 --> 00:04:58,000
This one with a.

94
00:04:58,000 --> 00:04:59,000
Let's drag it here.

95
00:04:59,000 --> 00:05:01,000
Let's make it white.

96
00:05:01,000 --> 00:05:03,000
And just to be transparent.

97
00:05:04,000 --> 00:05:07,000
Now, let's see what is inside of this content button.

98
00:05:07,000 --> 00:05:12,000
There is an image that we're going to use later, so let's just move it over here and we're going to

99
00:05:12,000 --> 00:05:14,000
change that sprite.

100
00:05:14,000 --> 00:05:15,000
Well, let's do it now.

101
00:05:15,000 --> 00:05:17,000
Let's go to graphics.

102
00:05:18,000 --> 00:05:25,000
Player Idol choose this image and drug player idol over here and maybe we can make it bigger.

103
00:05:25,000 --> 00:05:26,000
We should make it bigger.

104
00:05:33,000 --> 00:05:34,000
We don't need that.

105
00:05:34,000 --> 00:05:35,000
Now, what else is going to have?

106
00:05:35,000 --> 00:05:37,000
We're going to have a price.

107
00:05:37,000 --> 00:05:41,000
So let's say it's going to be 30 coins.

108
00:05:41,000 --> 00:05:42,000
We're going to place it in the center.

109
00:05:42,000 --> 00:05:46,000
Then we need an icon that says, What is this number?

110
00:05:46,000 --> 00:05:49,000
So let's create an image under that UI image.

111
00:05:50,000 --> 00:05:56,000
Again, we need to find our graphic graphics and drop coin over here.

112
00:05:56,000 --> 00:05:57,000
That is good.

113
00:05:57,000 --> 00:05:59,000
We can make it smaller.

114
00:06:00,000 --> 00:06:02,000
So a 50 by 50.

115
00:06:05,000 --> 00:06:06,000
Place it somewhere.

116
00:06:06,000 --> 00:06:12,000
Here, let's align the text, align to the right pivot point in the center.

117
00:06:12,000 --> 00:06:15,000
Then take the image, move it to the right for a bit.

118
00:06:18,000 --> 00:06:20,000
And maybe place it here.

119
00:06:21,000 --> 00:06:22,000
Or in the middle.

120
00:06:23,000 --> 00:06:24,000
I think here is okay.

121
00:06:26,000 --> 00:06:27,000
This buy button.

122
00:06:27,000 --> 00:06:27,000
We don't need it.

123
00:06:27,000 --> 00:06:30,000
We can make entire button as a buy button.

124
00:06:32,000 --> 00:06:32,000
Cool.

125
00:06:33,000 --> 00:06:35,000
Now let's see how it looks.

126
00:06:35,000 --> 00:06:36,000
I think this looks okay.

127
00:06:36,000 --> 00:06:38,000
Now let's continue and move further.

128
00:06:38,000 --> 00:06:41,000
The next step I want to do here is to make a second one.

129
00:06:41,000 --> 00:06:43,000
So we have all information in one shop.

130
00:06:43,000 --> 00:06:45,000
Let's do this scroll view.

131
00:06:45,000 --> 00:06:52,000
Let's take it and change size a bit to something like this to make it slimmer.

132
00:06:52,000 --> 00:07:01,000
Let's see, the size could be just 500 on the width and height, 600 and the size of the content button

133
00:07:01,000 --> 00:07:06,000
is 400 by 480 by 115, let's say.

134
00:07:06,000 --> 00:07:07,000
That's okay.

135
00:07:07,000 --> 00:07:09,000
So we have one scroll view.

136
00:07:10,000 --> 00:07:15,000
Let's move it to the right just like this and make another one.

137
00:07:15,000 --> 00:07:17,000
Press control D to duplicate.

138
00:07:18,000 --> 00:07:20,000
Way to the right again.

139
00:07:21,000 --> 00:07:21,000
That's good.

140
00:07:21,000 --> 00:07:27,000
So one of them going to have colors for a player that you can purchase and change color of your player.

141
00:07:27,000 --> 00:07:29,000
And second one will be for platforms.

142
00:07:29,000 --> 00:07:31,000
So you can change color of the platforms as well.

143
00:07:32,000 --> 00:07:34,000
Before we continue, I want to make kind of a display.

144
00:07:37,000 --> 00:07:43,000
Let's close this scroll view for now and create new UI image here.

145
00:07:43,000 --> 00:07:45,000
Let's go to dark UI free.

146
00:07:47,000 --> 00:07:48,000
Find a border for this one.

147
00:07:52,000 --> 00:07:52,000
Okay.

148
00:07:52,000 --> 00:07:55,000
Now we need to change size to something bigger.

149
00:07:59,000 --> 00:08:01,000
It's going to be our display.

150
00:08:03,000 --> 00:08:04,000
That's okay.

151
00:08:06,000 --> 00:08:09,000
Now we need to place a platform inside and a player inside.

152
00:08:09,000 --> 00:08:13,000
So we are going to change colour in this display to see what we are buying.

153
00:08:13,000 --> 00:08:14,000
All right, let's do this.

154
00:08:15,000 --> 00:08:18,000
Let's rename this to display.

155
00:08:18,000 --> 00:08:22,000
And inside we're going to make UI image.

156
00:08:22,000 --> 00:08:25,000
I'm just going to rename this to form.

157
00:08:27,000 --> 00:08:28,000
Then go to prefabs.

158
00:08:28,000 --> 00:08:29,000
Sorry.

159
00:08:29,000 --> 00:08:30,000
Prefabs.

160
00:08:30,000 --> 00:08:31,000
Level part.

161
00:08:31,000 --> 00:08:32,000
Grab the platform.

162
00:08:32,000 --> 00:08:35,000
Take the colour and copy this number.

163
00:08:36,000 --> 00:08:39,000
Then going back to your wide platform and change color here.

164
00:08:40,000 --> 00:08:41,000
Based in.

165
00:08:41,000 --> 00:08:45,000
Now let's change the size of this to make it look like a platform in the game.

166
00:08:50,000 --> 00:08:51,000
Yeah.

167
00:08:51,000 --> 00:08:54,000
Then let's create another image UI image.

168
00:08:56,000 --> 00:08:56,000
Player.

169
00:08:56,000 --> 00:08:59,000
We need the graphics folder with the player sprites.

170
00:08:59,000 --> 00:09:06,000
We can choose any of them or we even can make an animation for example, and we can do that.

171
00:09:06,000 --> 00:09:06,000
Why not?

172
00:09:06,000 --> 00:09:08,000
Let's do the run animation.

173
00:09:08,000 --> 00:09:11,000
Yeah, let's put the running sprite here.

174
00:09:13,000 --> 00:09:14,000
Let's set native size.

175
00:09:15,000 --> 00:09:16,000
That looks better.

176
00:09:19,000 --> 00:09:28,000
Now let's go to assets animations UI create new controller layer display a C.

177
00:09:29,000 --> 00:09:34,000
Drag it then animation create.

178
00:09:34,000 --> 00:09:38,000
Make sure we have same folder animations UI layer.

179
00:09:41,000 --> 00:09:42,000
Display.

180
00:09:46,000 --> 00:09:49,000
I guess, before we name the animations with a small letter.

181
00:09:49,000 --> 00:09:51,000
Yeah, we should do this as well.

182
00:09:51,000 --> 00:09:52,000
I'm sorry.

183
00:09:52,000 --> 00:09:53,000
Let's be consistent.

184
00:09:54,000 --> 00:09:55,000
It's very important.

185
00:09:58,000 --> 00:09:58,000
Oh.

186
00:10:00,000 --> 00:10:01,000
Yeah.

187
00:10:03,000 --> 00:10:05,000
So now let's find our animation player display.

188
00:10:05,000 --> 00:10:11,000
Go to graphics player run drug price here.

189
00:10:16,000 --> 00:10:17,000
Let's change.

190
00:10:17,000 --> 00:10:18,000
Simple right to wealth.

191
00:10:23,000 --> 00:10:25,000
It's okay if we don't like how it looks.

192
00:10:25,000 --> 00:10:27,000
If it feels dizzy, we can change animation.

193
00:10:27,000 --> 00:10:29,000
Or just make it steel.

194
00:10:31,000 --> 00:10:31,000
Yeah.

195
00:10:32,000 --> 00:10:32,000
Cool.

196
00:10:35,000 --> 00:10:36,000
Bit higher.

197
00:10:37,000 --> 00:10:38,000
And maybe a bit smaller.

198
00:10:38,000 --> 00:10:40,000
I don't like how it looks.

199
00:10:42,000 --> 00:10:45,000
Let's use scale so we don't mess up the sprite.

200
00:10:54,000 --> 00:10:55,000
Now, what else do we need here?

201
00:10:55,000 --> 00:10:56,000
We need to know.

202
00:10:56,000 --> 00:10:58,000
Amount of money we have.

203
00:10:58,000 --> 00:10:58,000
Right?

204
00:10:58,000 --> 00:11:01,000
So let's switch on divider that we had before.

205
00:11:02,000 --> 00:11:10,000
What would be low somewhere here And then find this general info bar that I had again rename it to info

206
00:11:10,000 --> 00:11:10,000
bar.

207
00:11:10,000 --> 00:11:12,000
This is a better name.

208
00:11:14,000 --> 00:11:20,000
We can delete this last score from inside and best score as well and have only enough about coins.

209
00:11:21,000 --> 00:11:23,000
So this text could be bigger.

210
00:11:24,000 --> 00:11:24,000
Why not?

211
00:11:26,000 --> 00:11:27,000
Sort of like for t.

212
00:11:28,000 --> 00:11:28,000
Yeah.

213
00:11:28,000 --> 00:11:33,000
Let's put here 3256, for example.

214
00:11:37,000 --> 00:11:42,000
And I want to keep info bar with the same size so you kind of have impression.

215
00:11:42,000 --> 00:11:47,000
You can have a big number that can fit in these borders like a million or something.

216
00:11:47,000 --> 00:11:47,000
Cool.

217
00:11:48,000 --> 00:11:51,000
And from where we have display, we have let's double check the scroll view.

218
00:11:52,000 --> 00:11:58,000
First one, we need to rename this to player color view.

219
00:12:00,000 --> 00:12:06,000
And this one will be platform color view.

220
00:12:08,000 --> 00:12:09,000
All right, That's good.

221
00:12:09,000 --> 00:12:13,000
For now, let's go inside of this one open viewport.

222
00:12:13,000 --> 00:12:14,000
Find content.

223
00:12:14,000 --> 00:12:15,000
Content one.

224
00:12:15,000 --> 00:12:21,000
And I want to change this source image to a square image to represent a platform.

225
00:12:21,000 --> 00:12:23,000
I guess if we delete this one.

226
00:12:24,000 --> 00:12:25,000
Sorry.

227
00:12:25,000 --> 00:12:26,000
Not this one image over here.

228
00:12:26,000 --> 00:12:27,000
Yeah.

229
00:12:27,000 --> 00:12:31,000
And if we delete an image here, it's going to be just a square like that.

230
00:12:31,000 --> 00:12:33,000
And then we can change size to what we need.

231
00:12:35,000 --> 00:12:36,000
To make it a square.

232
00:12:41,000 --> 00:12:43,000
Let's make it 60 by 60.

233
00:12:49,000 --> 00:12:52,000
And it might feel a bit unclear.

234
00:12:52,000 --> 00:12:56,000
What is it we're selling here, but we're going to set not such a big price.

235
00:12:56,000 --> 00:13:02,000
And just after first purchase, it's pretty clear and intuitive what happened just now and how does

236
00:13:02,000 --> 00:13:03,000
this shop work?

237
00:13:03,000 --> 00:13:08,000
So it's going to be very simple to navigate around and understand this shop, I'm telling you.

238
00:13:10,000 --> 00:13:10,000
Now.

239
00:13:10,000 --> 00:13:11,000
Let's close this.

240
00:13:11,000 --> 00:13:12,000
Let's close this.

241
00:13:14,000 --> 00:13:18,000
And this title going to be an info bar.

242
00:13:19,000 --> 00:13:21,000
And this title Game object.

243
00:13:21,000 --> 00:13:26,000
We're going to change the text of it to let a player know if purchase was successful or not.

244
00:13:26,000 --> 00:13:30,000
If you don't have enough money or any other result that happened in the shop.

245
00:13:30,000 --> 00:13:35,000
So anyway, let's rename this from title to just info text.

246
00:13:35,000 --> 00:13:36,000
Yeah.

247
00:13:36,000 --> 00:13:37,000
Okay.

248
00:13:37,000 --> 00:13:38,000
I want to arrange it a bit.

249
00:13:38,000 --> 00:13:41,000
So divider Divider two over here.

250
00:13:42,000 --> 00:13:45,000
Close button in for text after that.

251
00:13:46,000 --> 00:13:47,000
In bar.

252
00:13:48,000 --> 00:13:49,000
Display.

253
00:13:54,000 --> 00:13:57,000
And I think what we can do here is to make.

254
00:13:58,000 --> 00:14:01,000
This one child of the canvass.

255
00:14:01,000 --> 00:14:03,000
So we don't have an extra parent for this one.

256
00:14:04,000 --> 00:14:07,000
Let's rename this to chop UI.

257
00:14:08,000 --> 00:14:09,000
Do I record?

258
00:14:09,000 --> 00:14:10,000
I do record.

259
00:14:10,000 --> 00:14:12,000
Let's make sure size is right.

260
00:14:13,000 --> 00:14:15,000
Let's do alignment in the center.

261
00:14:17,000 --> 00:14:20,000
Don't forget to press out and shoot when you do this.

262
00:14:20,000 --> 00:14:21,000
I'll set in position.

263
00:14:21,000 --> 00:14:23,000
Shift for certain pivot point.

264
00:14:23,000 --> 00:14:23,000
Okay, that's good.

265
00:14:23,000 --> 00:14:25,000
If something comes up, we can fix it later.

266
00:14:25,000 --> 00:14:27,000
Let's go to the next video.