1
00:00:00,000 --> 00:00:01,000
Allergies.

2
00:00:01,000 --> 00:00:02,000
Welcome back.

3
00:00:02,000 --> 00:00:05,000
And in this video, we're going to define look of the game.

4
00:00:05,000 --> 00:00:05,000
All right.

5
00:00:05,000 --> 00:00:10,000
You probably have seen how game looks on the trailer, but still, I want to show you how I came up

6
00:00:10,000 --> 00:00:14,000
with that idea and why do we have that look of the game now?

7
00:00:14,000 --> 00:00:15,000
Exactly.

8
00:00:15,000 --> 00:00:19,000
I want to show you a bit of behind the scene, how you can find reference for your game.

9
00:00:19,000 --> 00:00:23,000
And basically we'll not do any coding in this video.

10
00:00:23,000 --> 00:00:26,000
I'll just will show you stuff like what steps to follow when you do that.

11
00:00:26,000 --> 00:00:29,000
And they're actually they're pretty obvious to do so.

12
00:00:29,000 --> 00:00:35,000
But I think it won't hurt to know how I came to this idea and maybe you can use that information and

13
00:00:35,000 --> 00:00:38,000
apply it to your project and come up with your ideas.

14
00:00:38,000 --> 00:00:38,000
All right.

15
00:00:38,000 --> 00:00:40,000
I hope that makes sense to you.

16
00:00:40,000 --> 00:00:45,000
So actually, the idea for this game came up to me after watching this video that you see on your screen.

17
00:00:45,000 --> 00:00:50,000
It is from Channel that called me Z, Z Z if I am right, me Z, Z, Z, Z.

18
00:00:51,000 --> 00:00:57,000
It is about how to make game look good If you are not a good artist and I am just a horrible artist,

19
00:00:57,000 --> 00:01:00,000
I don't know how to draw at all.

20
00:01:00,000 --> 00:01:02,000
So let's watch this video together.

21
00:01:02,000 --> 00:01:07,000
Then we'll take this idea and extend it a bit more to define look of our game.

22
00:01:07,000 --> 00:01:08,000
Let's go.

23
00:01:08,000 --> 00:01:09,000
Keep it simple.

24
00:01:09,000 --> 00:01:11,000
Use basic shapes like rectangles.

25
00:01:11,000 --> 00:01:16,000
Triangles and circles have a dark background with a light foreground or vice versa, so that it's easy

26
00:01:16,000 --> 00:01:17,000
to see what can be interacted with.

27
00:01:17,000 --> 00:01:21,000
To distinguish between foreground objects use different shapes.

28
00:01:21,000 --> 00:01:26,000
Usually rectangles are used for walls, triangles for enemies and circles through the player or friendly

29
00:01:26,000 --> 00:01:26,000
characters.

30
00:01:26,000 --> 00:01:29,000
But feel free to experiment and try out your own thing.

31
00:01:29,000 --> 00:01:30,000
Remember to keep it simple.

32
00:01:30,000 --> 00:01:33,000
Don't overuse shapes if you don't know what you're doing for color.

33
00:01:33,000 --> 00:01:39,000
Use sites like color, mine or color hunt Echo to get a nice color scheme and then apply that to your

34
00:01:39,000 --> 00:01:39,000
scene.

35
00:01:39,000 --> 00:01:44,000
Remember to keep light colors in the background and dark colors in the foreground or vice versa and

36
00:01:44,000 --> 00:01:45,000
keep it simple.

37
00:01:45,000 --> 00:01:48,000
Only use the five or so colors you got from the color scheme.

38
00:01:48,000 --> 00:01:50,000
Don't add new shades if you don't know what you're doing.

39
00:01:50,000 --> 00:01:55,000
Finally, animation, adding in a couple of particle effects and some simple animations can really live

40
00:01:55,000 --> 00:01:55,000
in a scene up.

41
00:01:55,000 --> 00:01:57,000
But remember to keep it simple.

42
00:01:57,000 --> 00:02:01,000
A bounce is going to look a lot better than a whole walk cycle if you don't know what you're doing.

43
00:02:01,000 --> 00:02:04,000
Here's a couple of scenes I've made is examples of using these principles.

44
00:02:21,000 --> 00:02:22,000
All right.

45
00:02:22,000 --> 00:02:28,000
So as you see, the main point is to keep it simple as it can be and it will look good because simplicity

46
00:02:28,000 --> 00:02:29,000
sometimes makes perfect.

47
00:02:29,000 --> 00:02:36,000
And I will show you a few examples of game I found on each dot IO that are made within one week I guess.

48
00:02:36,000 --> 00:02:40,000
And they are pretty simple, but they look just amazing.

49
00:02:40,000 --> 00:02:40,000
Now.

50
00:02:40,000 --> 00:02:41,000
What is each dot io?

51
00:02:41,000 --> 00:02:44,000
This is the place you can find assets for different games.

52
00:02:44,000 --> 00:02:46,000
There are two places you can find them.

53
00:02:46,000 --> 00:02:51,000
We'll meet each dot io first, so I'll just go each dot.

54
00:02:52,000 --> 00:02:55,000
Each each dot IO Yeah.

55
00:02:55,000 --> 00:02:58,000
So this is the website for indie game developers.

56
00:02:58,000 --> 00:03:00,000
So you can see different games here that were made.

57
00:03:00,000 --> 00:03:02,000
There are game gems hosted here.

58
00:03:02,000 --> 00:03:09,000
You can find lots of stuff here, but why we are here is to go to browse assets.

59
00:03:09,000 --> 00:03:12,000
So here you can find different assets for your games.

60
00:03:12,000 --> 00:03:19,000
For example, I used this one to make platformer game and platformer course.

61
00:03:19,000 --> 00:03:26,000
And actually if you go to this page and go down below here, you can see a link to my course that was

62
00:03:26,000 --> 00:03:28,000
put here by Creator.

63
00:03:28,000 --> 00:03:33,000
Yeah, if you want to, if you want to get that course, just text me on Udemy and I'll give you a link

64
00:03:33,000 --> 00:03:35,000
with a coupon and you can get it with a discount.

65
00:03:35,000 --> 00:03:35,000
Right.

66
00:03:36,000 --> 00:03:41,000
So there are different assets and I found our character here as well.

67
00:03:41,000 --> 00:03:46,000
At the moment it cost $5 I guess, but when I got it, it was free.

68
00:03:46,000 --> 00:03:51,000
And I actually know the owner and creator of these assets and he allowed me to use it.

69
00:03:51,000 --> 00:03:52,000
So it's fine.

70
00:03:52,000 --> 00:03:55,000
So basically I found the asset I like with this character.

71
00:03:55,000 --> 00:04:01,000
And then I thought, okay, so I have simply drawn character what I can do to make him do cool stuff,

72
00:04:01,000 --> 00:04:03,000
what environment it can be.

73
00:04:03,000 --> 00:04:08,000
I always wanted to make parkour game and I thought, okay, he has great moves for that.

74
00:04:08,000 --> 00:04:16,000
He has like a jump with a roll and he has ledge climb and so much of cool stuff that we can use for

75
00:04:16,000 --> 00:04:17,000
parkour game.

76
00:04:17,000 --> 00:04:22,000
Then I thought, okay, parkour is when you run in and jump in somewhere on the rooftops.

77
00:04:22,000 --> 00:04:29,000
So we need a rooftop and we could go over here and choose backgrounds and search for some city style

78
00:04:29,000 --> 00:04:30,000
background.

79
00:04:30,000 --> 00:04:31,000
Like this one, I guess.

80
00:04:32,000 --> 00:04:32,000
Yeah.

81
00:04:33,000 --> 00:04:38,000
Or go further and look for something else that match the idea.

82
00:04:38,000 --> 00:04:42,000
But I didn't find quite what I like here.

83
00:04:42,000 --> 00:04:43,000
Although, by the way, this looks cool.

84
00:04:43,000 --> 00:04:45,000
Or we could use this one, you know.

85
00:04:46,000 --> 00:04:47,000
And this looks good.

86
00:04:49,000 --> 00:04:50,000
But I wanted to keep it simple.

87
00:04:50,000 --> 00:04:53,000
So what I did next is I went to Google.

88
00:04:54,000 --> 00:04:55,000
Very powerful tool.

89
00:04:55,000 --> 00:05:04,000
You might know that Google and I just start to search for minimalistic style landscape.

90
00:05:04,000 --> 00:05:07,000
You just use different keywords and spend some time to find it.

91
00:05:07,000 --> 00:05:17,000
So just like landscape city and let's go to images, right?

92
00:05:17,000 --> 00:05:18,000
I did misspelled it.

93
00:05:18,000 --> 00:05:19,000
I know.

94
00:05:19,000 --> 00:05:19,000
It's okay.

95
00:05:21,000 --> 00:05:22,000
You just got images.

96
00:05:22,000 --> 00:05:26,000
So this is quite what I need, but not exactly.

97
00:05:26,000 --> 00:05:27,000
I need some minimalistic style.

98
00:05:27,000 --> 00:05:29,000
Although this looks okay.

99
00:05:29,000 --> 00:05:30,000
Yeah, this looks good.

100
00:05:31,000 --> 00:05:34,000
So I did minimalist.

101
00:05:36,000 --> 00:05:38,000
And this is more like what I need.

102
00:05:38,000 --> 00:05:43,000
So the idea is to keep it simple and use simple shapes so I can make this background with the use of

103
00:05:43,000 --> 00:05:45,000
simple shapes and unity.

104
00:05:45,000 --> 00:05:47,000
Because I don't know how to draw, right?

105
00:05:47,000 --> 00:05:54,000
I don't know how to draw so bad that I will not be able even to change the sprites that will be given

106
00:05:54,000 --> 00:05:54,000
to me.

107
00:05:54,000 --> 00:05:56,000
So I need stuff to be ready to use.

108
00:05:57,000 --> 00:06:00,000
So this looks okay, but it's kind of short and.

109
00:06:01,000 --> 00:06:02,000
Wow.

110
00:06:02,000 --> 00:06:04,000
And this is so amazing.

111
00:06:06,000 --> 00:06:11,000
But still, I didn't find anything that match my idea here, so I kept looking.

112
00:06:11,000 --> 00:06:15,000
What I can do, I can just type minimalist city.

113
00:06:19,000 --> 00:06:20,000
This is better.

114
00:06:20,000 --> 00:06:22,000
There are some good stuff.

115
00:06:22,000 --> 00:06:24,000
This one has an.

116
00:06:25,000 --> 00:06:26,000
Mirror image.

117
00:06:26,000 --> 00:06:30,000
Yeah, but again, you cannot draw trees like that in unity.

118
00:06:30,000 --> 00:06:31,000
You just cannot do that.

119
00:06:31,000 --> 00:06:32,000
You need.

120
00:06:35,000 --> 00:06:36,000
Some simple shapes.

121
00:06:36,000 --> 00:06:43,000
If you know how to use Photoshop, for example, you can take this picture and just divide it to layers.

122
00:06:43,000 --> 00:06:44,000
And why we need to divide it to layers.

123
00:06:44,000 --> 00:06:45,000
You'll know soon.

124
00:06:45,000 --> 00:06:49,000
And then you could use this background and really want to use it.

125
00:06:49,000 --> 00:06:50,000
I wish I knew how to draw this.

126
00:06:53,000 --> 00:06:56,000
So this is something like this.

127
00:06:56,000 --> 00:06:58,000
We need something very simple.

128
00:06:58,000 --> 00:07:03,000
So I kept searching and it took me a while until I found something.

129
00:07:05,000 --> 00:07:05,000
What I did.

130
00:07:05,000 --> 00:07:09,000
I typed relax background.

131
00:07:10,000 --> 00:07:12,000
City because I want to make parallax effect.

132
00:07:12,000 --> 00:07:21,000
And I found this one, which for me I guess makes the perfect background with the ideas I have to keep

133
00:07:21,000 --> 00:07:22,000
game.

134
00:07:22,000 --> 00:07:23,000
Very, very simple.

135
00:07:24,000 --> 00:07:24,000
Yeah.

136
00:07:26,000 --> 00:07:28,000
So what I do next?

137
00:07:30,000 --> 00:07:31,000
So I can keep searching.

138
00:07:31,000 --> 00:07:34,000
I can try to find different stuff like this could work.

139
00:07:34,000 --> 00:07:35,000
This is okay.

140
00:07:35,000 --> 00:07:36,000
This could work.

141
00:07:36,000 --> 00:07:38,000
This looks not bad at all.

142
00:07:38,000 --> 00:07:41,000
Or let's see.

143
00:07:42,000 --> 00:07:48,000
This looks good as well, but I decided to use the first one I found because I'm kind of lazy as well.

144
00:07:48,000 --> 00:07:53,000
So my next step would be to open this to get as big picture as I can.

145
00:07:53,000 --> 00:07:57,000
And then I need to do a screenshot of this.

146
00:07:57,000 --> 00:07:58,000
So I'm.

147
00:08:00,000 --> 00:08:01,000
Wait a second.

148
00:08:07,000 --> 00:08:09,000
I'm seeing this website for the first time.

149
00:08:09,000 --> 00:08:12,000
I'm just getting picture from here.

150
00:08:17,000 --> 00:08:23,000
So I'm just taking screenshot and saving it with any software you have for screenshots just on my messy

151
00:08:23,000 --> 00:08:24,000
desktop.

152
00:08:26,000 --> 00:08:27,000
That's it.

153
00:08:27,000 --> 00:08:30,000
We have a background reference now and.

154
00:08:31,000 --> 00:08:33,000
Also, sometimes you need different colors.

155
00:08:33,000 --> 00:08:39,000
So as you see in on the video, he said, keep it simple, make colors that make colors, this and so

156
00:08:39,000 --> 00:08:39,000
on.

157
00:08:40,000 --> 00:08:42,000
So we need some websites for colors.

158
00:08:42,000 --> 00:08:53,000
What you can use is just Google again and search for any like color palette website and find some stuff.

159
00:08:54,000 --> 00:08:56,000
And they're usually pretty good.

160
00:08:58,000 --> 00:08:59,000
This one.

161
00:08:59,000 --> 00:09:01,000
Just start the generator.

162
00:09:02,000 --> 00:09:05,000
And you can choose a color scheme you like.

163
00:09:06,000 --> 00:09:07,000
You can find it here.

164
00:09:07,000 --> 00:09:11,000
And there is also one more, I guess, color mind dot io.

165
00:09:11,000 --> 00:09:12,000
Oh, sorry.

166
00:09:15,000 --> 00:09:16,000
Yeah, another one.

167
00:09:16,000 --> 00:09:22,000
Also, you can use it to generate different colors and you can see what's trending here, what is used

168
00:09:22,000 --> 00:09:23,000
more, what is less.

169
00:09:23,000 --> 00:09:28,000
But I'm going to use the original color scheme from the picture.

170
00:09:28,000 --> 00:09:30,000
Oh, you didn't see that.

171
00:09:30,000 --> 00:09:36,000
So I'll take my picture that I found and I'll pass it.

172
00:09:38,000 --> 00:09:43,000
City seat and drag it to the unity like that.

173
00:09:43,000 --> 00:09:44,000
No worries.

174
00:09:44,000 --> 00:09:45,000
I will attach the picture.

175
00:09:45,000 --> 00:09:46,000
Of course you'll have it.

176
00:09:47,000 --> 00:09:50,000
Now we need to just take this and make it single.

177
00:09:51,000 --> 00:09:53,000
Well, let's just drag it here.

178
00:09:53,000 --> 00:09:54,000
And this is kind of small.

179
00:09:54,000 --> 00:09:55,000
We need to make it bigger.

180
00:09:55,000 --> 00:09:58,000
We could use scale to do that.

181
00:09:58,000 --> 00:10:01,000
Or we can use pixels per unit to do that.

182
00:10:02,000 --> 00:10:03,000
This is big, right?

183
00:10:06,000 --> 00:10:11,000
So let's make pixels per unit 64, then take the city and drag it.

184
00:10:12,000 --> 00:10:13,000
Something like.

185
00:10:14,000 --> 00:10:15,000
This, I guess.

186
00:10:15,000 --> 00:10:16,000
Yeah, this will do.

187
00:10:17,000 --> 00:10:19,000
All right, so now we have a reference for the city.

188
00:10:19,000 --> 00:10:21,000
What could we do next?

189
00:10:21,000 --> 00:10:24,000
Of course we will create a background, but we'll do it in the next video.

190
00:10:24,000 --> 00:10:25,000
Let's just stay here for a bit.

191
00:10:26,000 --> 00:10:31,000
Now we have a city on the background animal, and we want to see if it's matching the idea.

192
00:10:31,000 --> 00:10:38,000
For me, I guess it is a perfect match because we have dark colors on the background and bright colors

193
00:10:38,000 --> 00:10:42,000
on the foreground as our player is white completely.

194
00:10:42,000 --> 00:10:45,000
And also we have platforms, right?

195
00:10:45,000 --> 00:10:46,000
So let's drag one here.

196
00:10:47,000 --> 00:10:54,000
Platforms are here and they are dark, but we can change color of the platform at any time.

197
00:10:54,000 --> 00:10:59,000
And as you might know, we're going to do color change in mechanics in this course.

198
00:10:59,000 --> 00:11:02,000
So when you step on the platform, it's going to change its color to a different one.

199
00:11:02,000 --> 00:11:07,000
So for example, when you step on the platform, it will become bright like so.

200
00:11:09,000 --> 00:11:09,000
All right.

201
00:11:09,000 --> 00:11:10,000
So whatever.

202
00:11:10,000 --> 00:11:13,000
We can choose many different colors.

203
00:11:13,000 --> 00:11:18,000
So but my idea is to keep platforms at the front.

204
00:11:18,000 --> 00:11:20,000
But my idea is to keep platforms dark.

205
00:11:20,000 --> 00:11:24,000
And then when you jump on them, they become brighter.

206
00:11:24,000 --> 00:11:30,000
So it's like you coloring the world and making it better, you know, varies entails.

207
00:11:30,000 --> 00:11:32,000
So you have to decide if it looks good for you.

208
00:11:32,000 --> 00:11:34,000
I think that's okay.

209
00:11:34,000 --> 00:11:35,000
Then we can use it.

210
00:11:35,000 --> 00:11:36,000
That's it then.

211
00:11:36,000 --> 00:11:38,000
Now you know how I came up with my idea?

212
00:11:38,000 --> 00:11:41,000
Basically just Google search and use of free stuff?

213
00:11:41,000 --> 00:11:43,000
Now I need to make it work.

214
00:11:43,000 --> 00:11:45,000
Let's go to next video and create background.