1
00:00:00,000 --> 00:00:00,000
Guys.

2
00:00:00,000 --> 00:00:05,000
And this video, we're going to create a background and look of your game just in unity, as I promised.

3
00:00:05,000 --> 00:00:10,000
But if you have Photoshop and knowledge of the Photoshop, I'm pretty sure you can make it faster and

4
00:00:10,000 --> 00:00:11,000
easier in Photoshop.

5
00:00:11,000 --> 00:00:18,000
Yeah, but again, I'm just worried about those who don't know how to use Photoshop or don't want to

6
00:00:18,000 --> 00:00:20,000
use Photoshop because there are different reasons.

7
00:00:20,000 --> 00:00:25,000
Like for example, I remember myself when I was learning unity, I was learning unity.

8
00:00:25,000 --> 00:00:30,000
And if somebody told me I need to go to this software and do this and this and this, I felt like,

9
00:00:30,000 --> 00:00:33,000
man, I'm just getting deal with unity.

10
00:00:33,000 --> 00:00:36,000
My head is already big enough and filled with this information.

11
00:00:36,000 --> 00:00:40,000
I don't want to go to Photoshop or whatever and learn more information.

12
00:00:40,000 --> 00:00:41,000
I just want to do this.

13
00:00:41,000 --> 00:00:44,000
So that's the main point here, right?

14
00:00:44,000 --> 00:00:50,000
To keep it simple and just in the unity, what we're going to do is we're going to take this city and

15
00:00:50,000 --> 00:00:52,000
take a look how it makes us feel.

16
00:00:52,000 --> 00:00:55,000
So this is how our game going to look now.

17
00:00:55,000 --> 00:00:57,000
And I don't quite like it.

18
00:00:57,000 --> 00:00:59,000
I want to make it a bit further.

19
00:00:59,000 --> 00:01:01,000
So let's do nine, I guess.

20
00:01:01,000 --> 00:01:05,000
Let's make it nine, maybe eight on the.

21
00:01:06,000 --> 00:01:06,000
I don't know.

22
00:01:06,000 --> 00:01:09,000
I really don't know how I feel about this.

23
00:01:09,000 --> 00:01:13,000
Okay, so size of the lens is 8.5.

24
00:01:13,000 --> 00:01:16,000
And now we have a background here.

25
00:01:16,000 --> 00:01:18,000
Now we need to decide how background is going to look.

26
00:01:18,000 --> 00:01:24,000
So it's going to be like that or are we going to make it a bit smaller to make it further like that

27
00:01:24,000 --> 00:01:30,000
or maybe even bigger to fill up screen like that.

28
00:01:30,000 --> 00:01:33,000
So I think we can do something like.

29
00:01:35,000 --> 00:01:37,000
Um, I want to.

30
00:01:37,000 --> 00:01:41,000
I want to make feeling that is far so maybe like this.

31
00:01:42,000 --> 00:01:45,000
Yeah, it takes some consideration, I would say.

32
00:01:46,000 --> 00:01:46,000
Ah, yeah.

33
00:01:46,000 --> 00:01:48,000
Should be something like this, I guess.

34
00:01:49,000 --> 00:01:49,000
Yeah.

35
00:01:49,000 --> 00:01:50,000
So this is the idea.

36
00:01:50,000 --> 00:01:59,000
What we do now, we create an empty object, or let's just create 2D Sprite Square, and it's going

37
00:01:59,000 --> 00:02:05,000
to be named as background and it's going to have multiple layers.

38
00:02:05,000 --> 00:02:14,000
So let's use, let's say, zero one as a first layer, and we're going to change the size of this to

39
00:02:14,000 --> 00:02:15,000
fit camera.

40
00:02:16,000 --> 00:02:17,000
Like this.

41
00:02:18,000 --> 00:02:20,000
So we're fitting the camera, as you can see.

42
00:02:21,000 --> 00:02:25,000
And B, it doesn't matter how high it is, it's important.

43
00:02:25,000 --> 00:02:26,000
How wide it is.

44
00:02:26,000 --> 00:02:28,000
Should be width of the camera.

45
00:02:29,000 --> 00:02:30,000
Or something about that.

46
00:02:31,000 --> 00:02:35,000
Now, let's go to color over here and make it transparent.

47
00:02:36,000 --> 00:02:43,000
Is just needed to have a size of this object later, but we're not going to use color of this is just

48
00:02:43,000 --> 00:02:44,000
again, for this size.

49
00:02:44,000 --> 00:02:46,000
You'll see why in the next video.

50
00:02:46,000 --> 00:02:47,000
No worries about that.

51
00:02:47,000 --> 00:02:55,000
Now, what we're going to do is to create to the square again and we're going to.

52
00:02:56,000 --> 00:02:56,000
Sorry.

53
00:02:56,000 --> 00:02:59,000
And we're going to select it and change size.

54
00:03:00,000 --> 00:03:06,000
According to the building on the front line, to make it as a simple shape.

55
00:03:06,000 --> 00:03:10,000
And I want to make it a bit transparent so we can see what is on the back.

56
00:03:12,000 --> 00:03:13,000
Yeah.

57
00:03:13,000 --> 00:03:16,000
Let's increase the size of this window.

58
00:03:18,000 --> 00:03:26,000
So something like this, I guess this is okay, so let's duplicate it by pressing control D and just

59
00:03:26,000 --> 00:03:26,000
move it.

60
00:03:26,000 --> 00:03:34,000
Change size again to play something like this again, to feed the background that we have to feed the

61
00:03:34,000 --> 00:03:37,000
references and you don't have to follow reference.

62
00:03:37,000 --> 00:03:38,000
Exactly.

63
00:03:38,000 --> 00:03:42,000
For example, we can see there is no building over here, but we can make one.

64
00:03:42,000 --> 00:03:46,000
We can just make it like this simple.

65
00:03:46,000 --> 00:03:48,000
Now we have another building here.

66
00:03:48,000 --> 00:03:49,000
Now let's duplicate it.

67
00:03:49,000 --> 00:03:53,000
Basically, we need to fill up the shapes that we see on the foreground.

68
00:03:53,000 --> 00:03:55,000
Yeah, and just.

69
00:03:57,000 --> 00:03:58,000
Hmm.

70
00:03:58,000 --> 00:04:02,000
Make sure it match that or even change it as you like.

71
00:04:02,000 --> 00:04:04,000
Again, you can make it as you want to.

72
00:04:06,000 --> 00:04:11,000
For example, we can see this is just building, but.

73
00:04:11,000 --> 00:04:13,000
I want to make, let's say.

74
00:04:17,000 --> 00:04:18,000
A bit header.

75
00:04:18,000 --> 00:04:20,000
A small header over here.

76
00:04:20,000 --> 00:04:24,000
Then I can duplicate one more and place it here and duplicate one more.

77
00:04:24,000 --> 00:04:30,000
Change the size with the T again and then we can see there are two sharp points over here.

78
00:04:30,000 --> 00:04:31,000
But it's not.

79
00:04:31,000 --> 00:04:33,000
But it's not necessarily should be the same shape.

80
00:04:33,000 --> 00:04:39,000
We can just duplicate it, make it sorry, make it very small like these.

81
00:04:40,000 --> 00:04:43,000
And duplicate again place here.

82
00:04:45,000 --> 00:04:46,000
Then make.

83
00:04:46,000 --> 00:04:48,000
Then let's make another one.

84
00:04:50,000 --> 00:04:51,000
Mhm.

85
00:04:51,000 --> 00:04:52,000
Yeah.

86
00:04:52,000 --> 00:04:53,000
Should be here.

87
00:04:54,000 --> 00:04:55,000
Let's make one more.

88
00:04:57,000 --> 00:04:58,000
Should be here.

89
00:04:58,000 --> 00:05:01,000
And one more and let's place it here.

90
00:05:01,000 --> 00:05:03,000
Don't worry about the bottom part.

91
00:05:03,000 --> 00:05:05,000
And it's going to be filled with one.

92
00:05:05,000 --> 00:05:08,000
It's going to be filled with one same color.

93
00:05:08,000 --> 00:05:10,000
So it's not important at all.

94
00:05:11,000 --> 00:05:14,000
Let's duplicate it like this.

95
00:05:15,000 --> 00:05:23,000
Then one more lays it over here and then duplicate again and change size by bit.

96
00:05:23,000 --> 00:05:24,000
And place it here.

97
00:05:24,000 --> 00:05:25,000
And then again.

98
00:05:25,000 --> 00:05:26,000
One more.

99
00:05:26,000 --> 00:05:28,000
Just here.

100
00:05:28,000 --> 00:05:29,000
Then we need one more.

101
00:05:29,000 --> 00:05:31,000
And we need to make it horizontal.

102
00:05:31,000 --> 00:05:33,000
Something like this.

103
00:05:33,000 --> 00:05:37,000
And maybe all the way down to here.

104
00:05:37,000 --> 00:05:39,000
If you want to add some details, you can do that.

105
00:05:39,000 --> 00:05:44,000
You can just make another one and let's say place it here.

106
00:05:44,000 --> 00:05:44,000
Yeah.

107
00:05:46,000 --> 00:05:47,000
But I don't want to do that.

108
00:05:47,000 --> 00:05:53,000
Now we have all of these squares and they make the first layer of the background for us.

109
00:05:53,000 --> 00:06:00,000
Now, what we can do, we're going to select this color picker and choose color of the first layer like

110
00:06:00,000 --> 00:06:03,000
that and make sure it's not transparent at all.

111
00:06:04,000 --> 00:06:13,000
Now, if I close this and if I disable my city, I can see I have first layer of the seed here.

112
00:06:13,000 --> 00:06:16,000
And if I need to do some changes, I can just fix it easily.

113
00:06:18,000 --> 00:06:19,000
Maybe like that.

114
00:06:20,000 --> 00:06:21,000
I like that.

115
00:06:24,000 --> 00:06:27,000
And basically this one, we need to do four other layers.

116
00:06:27,000 --> 00:06:31,000
Now let's go to the next layer and then I'm going to do everything in a time lapse because it might

117
00:06:31,000 --> 00:06:33,000
be not very entertaining to watch.

118
00:06:33,000 --> 00:06:35,000
Let's disable background one.

119
00:06:36,000 --> 00:06:42,000
And this front layer is kind of getting in our way, but it's okay.

120
00:06:42,000 --> 00:06:45,000
We still can use the reference here.

121
00:06:45,000 --> 00:06:47,000
I should tell you I'm colorblind.

122
00:06:47,000 --> 00:06:53,000
It's really difficult for me to see difference between this color and this color, but I'll try my best

123
00:06:53,000 --> 00:06:54,000
to do that.

124
00:06:54,000 --> 00:06:59,000
So let's we can duplicate this one, actually delete what is inside.

125
00:07:00,000 --> 00:07:02,000
And rename this to two.

126
00:07:02,000 --> 00:07:05,000
Because we need size, we need horizontal size.

127
00:07:05,000 --> 00:07:07,000
It's very important for the future.

128
00:07:07,000 --> 00:07:08,000
For the later.

129
00:07:09,000 --> 00:07:12,000
Let's create two D square under it.

130
00:07:12,000 --> 00:07:13,000
Oh, sorry.

131
00:07:15,000 --> 00:07:16,000
Square to the.

132
00:07:18,000 --> 00:07:19,000
Square.

133
00:07:19,000 --> 00:07:21,000
We're going to make it transparent again.

134
00:07:21,000 --> 00:07:24,000
So it's easy for me to see what's behind.

135
00:07:26,000 --> 00:07:30,000
Let's change the size and now we need to copy the back layer.

136
00:07:30,000 --> 00:07:33,000
So I believe it is something like that over here.

137
00:07:35,000 --> 00:07:42,000
And that's duplicate lays another one over here and duplicate again, change the size to make that small

138
00:07:42,000 --> 00:07:43,000
tower.

139
00:07:43,000 --> 00:07:50,000
And if you really want to make this sharp shape, you can you can just create two D triangle.

140
00:07:52,000 --> 00:07:54,000
Just the size a bit and place it here.

141
00:07:56,000 --> 00:07:56,000
Color.

142
00:07:56,000 --> 00:07:57,000
We can copy the color.

143
00:07:58,000 --> 00:08:00,000
This homework's pretty simple, right?

144
00:08:00,000 --> 00:08:03,000
And as you've seen, the result looks good enough.

145
00:08:04,000 --> 00:08:05,000
Let's make it like that.

146
00:08:05,000 --> 00:08:08,000
And again.

147
00:08:08,000 --> 00:08:10,000
Oh, wait, I'm copying the previous tower.

148
00:08:10,000 --> 00:08:11,000
I don't know why I'm doing that.

149
00:08:12,000 --> 00:08:14,000
I need to copy what's behind.

150
00:08:15,000 --> 00:08:16,000
Just got confused a bit.

151
00:08:17,000 --> 00:08:18,000
And.

152
00:08:18,000 --> 00:08:19,000
This one.

153
00:08:22,000 --> 00:08:26,000
I guess it's really hard for me to see the difference between these two colors.

154
00:08:29,000 --> 00:08:35,000
Another reason I'm using prepared assets and not my own because I didn't see the colors properly.

155
00:08:36,000 --> 00:08:38,000
I think that and another one here.

156
00:08:38,000 --> 00:08:40,000
And another one.

157
00:08:42,000 --> 00:08:43,000
Like this.

158
00:08:43,000 --> 00:08:44,000
Let's make one more.

159
00:08:45,000 --> 00:08:46,000
Place it here.

160
00:08:48,000 --> 00:08:54,000
Another one over here and another one, I guess this is the Washington building.

161
00:08:54,000 --> 00:08:56,000
Washington, D.C. looks like it.

162
00:08:57,000 --> 00:08:58,000
Let's see if we can copy it.

163
00:08:58,000 --> 00:08:59,000
I guess we can.

164
00:09:00,000 --> 00:09:02,000
Let's make it like that.

165
00:09:04,000 --> 00:09:06,000
And we need another shape of.

166
00:09:08,000 --> 00:09:15,000
Find a tower, and now we can just use this one and two de sprite circle.

167
00:09:16,000 --> 00:09:17,000
First circle.

168
00:09:19,000 --> 00:09:20,000
I don't see it.

169
00:09:20,000 --> 00:09:22,000
It's very small, I guess.

170
00:09:37,000 --> 00:09:37,000
Good.

171
00:09:37,000 --> 00:09:39,000
So now we have one more layer.

172
00:09:39,000 --> 00:09:42,000
Let's add one bottom part for this one.

173
00:09:45,000 --> 00:09:46,000
I guess I messed up.

174
00:09:46,000 --> 00:09:49,000
This should not be the border.

175
00:09:49,000 --> 00:09:50,000
This is the border of the camera.

176
00:09:50,000 --> 00:09:51,000
I just didn't see it.

177
00:09:53,000 --> 00:09:55,000
So look at that.

178
00:09:56,000 --> 00:09:56,000
Like that.

179
00:09:57,000 --> 00:10:01,000
And I'll just increase size of this up to here.

180
00:10:03,000 --> 00:10:03,000
Yeah.

181
00:10:04,000 --> 00:10:06,000
And size of this.

182
00:10:07,000 --> 00:10:07,000
To hear.

183
00:10:09,000 --> 00:10:11,000
Now let's take these.

184
00:10:11,000 --> 00:10:12,000
All of them.

185
00:10:12,000 --> 00:10:13,000
Let's take them.

186
00:10:14,000 --> 00:10:16,000
Copy color that we need and.

187
00:10:17,000 --> 00:10:19,000
I cannot really see it.

188
00:10:19,000 --> 00:10:19,000
Right.

189
00:10:26,000 --> 00:10:27,000
And he's here.

190
00:10:27,000 --> 00:10:29,000
So let's copy this color.

191
00:10:31,000 --> 00:10:32,000
And make it not transparent.

192
00:10:33,000 --> 00:10:35,000
And now if we.

193
00:10:36,000 --> 00:10:38,000
Switch off this CD.

194
00:10:38,000 --> 00:10:44,000
We can see another layer is ready, but if we switch on both of them going to look like this, we just

195
00:10:44,000 --> 00:10:47,000
need to make sure that layer sorted properly.

196
00:10:47,000 --> 00:10:49,000
If you remember, we learned about certain layers before.

197
00:10:49,000 --> 00:10:57,000
What we can do now is to choose background for both of them and now this should be the first one, so

198
00:10:57,000 --> 00:10:59,000
it has higher priority.

199
00:10:59,000 --> 00:11:02,000
So we need to choose certain layers for them.

200
00:11:02,000 --> 00:11:10,000
If we select these and they should have higher priority, we can make it like this is the second layer,

201
00:11:10,000 --> 00:11:10,000
right?

202
00:11:11,000 --> 00:11:13,000
They shouldn't have lower priority.

203
00:11:13,000 --> 00:11:15,000
So let's do this.

204
00:11:15,000 --> 00:11:16,000
Minus one.

205
00:11:19,000 --> 00:11:24,000
And if we if we would decide to make it below, it would be, what, minus two?

206
00:11:24,000 --> 00:11:25,000
Yes, but we need minus.

207
00:11:25,000 --> 00:11:28,000
But we need zero zero for this.

208
00:11:29,000 --> 00:11:30,000
Now let's create one more.

209
00:11:30,000 --> 00:11:32,000
We're going to duplicate this name.

210
00:11:32,000 --> 00:11:36,000
It is three and we're going to delete these.

211
00:11:36,000 --> 00:11:37,000
All of them.

212
00:11:38,000 --> 00:11:41,000
And then just create 2D Sprite Square.

213
00:11:42,000 --> 00:11:43,000
And.

214
00:11:45,000 --> 00:11:46,000
Repeat the shape again.

215
00:11:47,000 --> 00:11:48,000
I cannot see it.

216
00:11:48,000 --> 00:11:49,000
Why?

217
00:11:49,000 --> 00:11:51,000
I cannot see it Because it's switched off.

218
00:11:52,000 --> 00:11:53,000
Let's switch it on.

219
00:12:05,000 --> 00:12:06,000
Just like that.

220
00:12:26,000 --> 00:12:27,000
Let's select the color for them.

221
00:12:28,000 --> 00:12:29,000
Can I choose?

222
00:12:29,000 --> 00:12:30,000
Colour picker.

223
00:12:31,000 --> 00:12:34,000
And I need to find that colour somewhere in the scene.

224
00:12:34,000 --> 00:12:35,000
I really cannot see it.

225
00:12:36,000 --> 00:12:37,000
Okay, let's switch off.

226
00:12:38,000 --> 00:12:41,000
And select this color, then we can switch on.

227
00:12:41,000 --> 00:12:42,000
It's the needed color.

228
00:12:45,000 --> 00:12:48,000
All of them have order and they're minus two.

229
00:12:48,000 --> 00:12:52,000
Now, if I switch off the city and switch on these three.

230
00:12:54,000 --> 00:12:55,000
Look.

231
00:12:56,000 --> 00:12:58,000
That's the city, right?

232
00:12:58,000 --> 00:13:00,000
Now this building looks ugly.

233
00:13:01,000 --> 00:13:02,000
And then like it.

234
00:13:04,000 --> 00:13:04,000
I'll just delete it.

235
00:13:04,000 --> 00:13:05,000
I don't like it.

236
00:13:24,000 --> 00:13:24,000
Okay.

237
00:13:25,000 --> 00:13:26,000
Now, let's, um.

238
00:13:27,000 --> 00:13:28,000
Get the color.

239
00:13:30,000 --> 00:13:31,000
This is the one.

240
00:13:31,000 --> 00:13:32,000
This is the one, right?

241
00:13:32,000 --> 00:13:33,000
This is the color.

242
00:13:34,000 --> 00:13:35,000
Copy it.

243
00:13:39,000 --> 00:13:41,000
Make it transparent.

244
00:13:42,000 --> 00:13:46,000
And this should be minus three over here.

245
00:13:46,000 --> 00:13:48,000
Now, let's switch off the seat.

246
00:13:48,000 --> 00:13:51,000
Switch on our layers.

247
00:13:52,000 --> 00:13:53,000
And this is much better.

248
00:13:53,000 --> 00:13:55,000
I regarding background.

249
00:13:55,000 --> 00:13:56,000
Don't worry about that.

250
00:13:56,000 --> 00:13:57,000
We're going to fix that later.

251
00:13:57,000 --> 00:13:59,000
But if you want to.

252
00:13:59,000 --> 00:14:01,000
I mean, the sky, right?

253
00:14:02,000 --> 00:14:07,000
This sky if you want to, we can just change color in the main camera.

254
00:14:08,000 --> 00:14:10,000
To make it something like this.

255
00:14:10,000 --> 00:14:11,000
It's going to be yellow.

256
00:14:13,000 --> 00:14:15,000
Purple, whatever it is, but I will keep it.

257
00:14:17,000 --> 00:14:18,000
Something dark.

258
00:14:18,000 --> 00:14:19,000
It's too dark.

259
00:14:21,000 --> 00:14:22,000
What color we had.

260
00:14:22,000 --> 00:14:22,000
I forgot.

261
00:14:25,000 --> 00:14:27,000
I just can do control Z.

262
00:14:43,000 --> 00:14:44,000
Now we have it ready.

263
00:14:44,000 --> 00:14:48,000
If you want to add the mountains, you can do that.

264
00:14:48,000 --> 00:14:50,000
Just make another layer.

265
00:14:50,000 --> 00:14:52,000
Basically, now you know how it's working.

266
00:14:52,000 --> 00:15:01,000
You can add the different shape here, like to Sprite triangle and just.

267
00:15:02,000 --> 00:15:03,000
Make a trip of a mountain.

268
00:15:05,000 --> 00:15:07,000
Another shape of the mountain.

269
00:15:08,000 --> 00:15:09,000
Make them.

270
00:15:09,000 --> 00:15:11,000
Minus four.

271
00:15:13,000 --> 00:15:15,000
And here you have it.

272
00:15:20,000 --> 00:15:21,000
Mountains.

273
00:15:21,000 --> 00:15:24,000
I actually like it, so I'll keep it.

274
00:15:24,000 --> 00:15:25,000
Why not?

275
00:15:27,000 --> 00:15:29,000
Let's see if we can make it work with the Parallax script.

276
00:15:33,000 --> 00:15:33,000
Okay.

277
00:15:34,000 --> 00:15:37,000
Now, look, we have this order in layer minus four.

278
00:15:38,000 --> 00:15:39,000
These minus three.

279
00:15:41,000 --> 00:15:42,000
Here.

280
00:15:42,000 --> 00:15:43,000
Minus two.

281
00:15:43,000 --> 00:15:45,000
Here, minus one and here.

282
00:15:45,000 --> 00:15:46,000
Zero.

283
00:15:46,000 --> 00:15:46,000
Yeah.

284
00:15:47,000 --> 00:15:50,000
And we have five layers of the background.

285
00:15:50,000 --> 00:15:55,000
What we should do now is to make them work as a parallax background.

286
00:15:55,000 --> 00:16:00,000
What is parallax is basically when different layers of the background moving with the different speed

287
00:16:00,000 --> 00:16:05,000
and you have a feeling that background is moving, but background cannot move.

288
00:16:05,000 --> 00:16:07,000
So you have a feeling that you are moving, right?

289
00:16:07,000 --> 00:16:10,000
And then we're going to make it work in the next video.

290
00:16:10,000 --> 00:16:11,000
For now, let's just.

291
00:16:13,000 --> 00:16:20,000
Take this and click, create button, create empty parent and name it as a back ground.

292
00:16:22,000 --> 00:16:23,000
We done here.

293
00:16:23,000 --> 00:16:29,000
We can keep city for the time being just in case we need the reference, but I guess we will not use

294
00:16:29,000 --> 00:16:29,000
it anymore.

295
00:16:30,000 --> 00:16:31,000
And let's go to next video.