1
00:00:03,170 --> 00:00:05,600
In this lecture, we're going to make our screen even busier.

2
00:00:05,600 --> 00:00:10,430
We're going to add our animator controller in our animated window here and give our play out a little

3
00:00:10,430 --> 00:00:11,720
idle animation.

4
00:00:11,720 --> 00:00:16,460
And to quickly tidy up all the nonsense I've got splashed around in my level here, I'm going to drag

5
00:00:16,460 --> 00:00:22,070
a big old space, click on the eraser tool and then just clear out all of my playing around I was doing

6
00:00:22,070 --> 00:00:23,450
with my rule tiles.

7
00:00:23,510 --> 00:00:25,040
Also, I was being really fast and loose.

8
00:00:25,040 --> 00:00:27,560
And if you note here, my active tile map is the water tile map.

9
00:00:27,560 --> 00:00:29,900
So I was drawing all those platforms on the water tile map.

10
00:00:29,900 --> 00:00:32,240
We should be drawing this on the platform's tile map.

11
00:00:32,240 --> 00:00:36,770
What I'm going to do is click on that and click on my rule tile and then just paint directly over the

12
00:00:36,770 --> 00:00:38,950
top of what I've got here already.

13
00:00:38,960 --> 00:00:45,380
Bit pop up, but I'm putting now I've replaced all of those tiles with my rule tiles so that if I go

14
00:00:45,380 --> 00:00:48,590
and add some new stuff in here, then it knows what's going on.

15
00:00:48,590 --> 00:00:51,620
So I've just updated it there with all tile information.

16
00:00:51,620 --> 00:00:54,350
Now what I'm going to do is create our player idle animation.

17
00:00:54,350 --> 00:01:00,530
We need to first of all start with window and then find animation and find the animator window.

18
00:01:00,560 --> 00:01:06,050
I'll just grab that and pop that down the bottom I think next to my project and console.

19
00:01:06,050 --> 00:01:08,030
And I'm going to be throwing a couple of terminologies here.

20
00:01:08,030 --> 00:01:12,410
If you're not familiar with animation in unity, then it could seem like I'm saying the same thing over

21
00:01:12,410 --> 00:01:12,740
and over.

22
00:01:12,740 --> 00:01:14,120
But let's have a look at the terminology.

23
00:01:14,120 --> 00:01:16,580
First of all, we have the animator component.

24
00:01:16,580 --> 00:01:18,950
This is a component that we put on our game object.

25
00:01:18,950 --> 00:01:24,770
We'll pop this on our player and this is what assigns animations to the game object, which will be

26
00:01:24,770 --> 00:01:27,290
our player through an animator controller.

27
00:01:27,290 --> 00:01:28,400
What's the animated controller?

28
00:01:28,400 --> 00:01:32,450
Well, this is the arrangement of animations or and transitions.

29
00:01:32,450 --> 00:01:38,090
This is the state machine that says go from running to jumping to idle to shot to whatever it might

30
00:01:38,090 --> 00:01:38,480
be.

31
00:01:38,480 --> 00:01:42,530
That's the animator controller that controls the animations.

32
00:01:42,530 --> 00:01:47,090
And the animations are the specific pieces of motion says show this frame, then that frame and that

33
00:01:47,090 --> 00:01:48,980
frame, or move this to this, to that.

34
00:01:48,980 --> 00:01:54,200
And we also need to have a Sprite renderer so we can display the 2D Sprite on the screen, actually

35
00:01:54,200 --> 00:01:55,280
visualize it.

36
00:01:55,280 --> 00:01:59,420
Now, the steps will go through to set up our characters idle and all this lays out as a challenge.

37
00:01:59,420 --> 00:02:03,740
In case you've done this before, we talk about animations in a couple of our unity courses.

38
00:02:03,900 --> 00:02:08,750
Side note, make sure you check out all of the game dev TV unity courses so that you can get the full

39
00:02:08,750 --> 00:02:12,650
experience and you can educate yourself to the absolute max.

40
00:02:12,650 --> 00:02:13,760
But here's the challenge.

41
00:02:13,760 --> 00:02:17,480
If you've already done animations in the past, import the sprite sheet and slice.

42
00:02:17,480 --> 00:02:20,780
We've done that already a couple of lectures ago, so we've got a head start already.

43
00:02:20,780 --> 00:02:22,820
Add the Sprite renderer to the player.

44
00:02:22,820 --> 00:02:23,840
We'll do that in a moment.

45
00:02:23,840 --> 00:02:25,880
Create idle animation clip.

46
00:02:25,880 --> 00:02:31,490
So in other words, find the player sprite sheet and find the specific sprites that look like there.

47
00:02:31,490 --> 00:02:36,440
The animation is kind of standing on the spot, popping up and down and then create a character animated

48
00:02:36,440 --> 00:02:40,640
controller, add the idle animation to the animator controller.

49
00:02:40,640 --> 00:02:44,810
So we've got that in there and then add the animation to the player so that the player can stand there

50
00:02:44,810 --> 00:02:45,830
and bounce on the spot.

51
00:02:45,830 --> 00:02:49,430
Finally, assign the character animator controller to the player.

52
00:02:49,430 --> 00:02:50,270
So there are the steps.

53
00:02:50,270 --> 00:02:52,070
Feel free to come back to this in the future.

54
00:02:52,070 --> 00:02:53,960
If you want to take this on as a challenge, do so.

55
00:02:53,960 --> 00:02:59,630
Now, if you look at this and you say, what's going on here, then no worries, we will do this together,

56
00:02:59,630 --> 00:03:02,030
which we'll jump into now as a first step.

57
00:03:02,030 --> 00:03:03,500
Let's make ourselves a player.

58
00:03:03,500 --> 00:03:05,180
Right click in the hierarchy.

59
00:03:05,180 --> 00:03:06,290
Create empty.

60
00:03:06,290 --> 00:03:07,370
I will call this.

61
00:03:07,370 --> 00:03:08,870
Shall I call it something silly?

62
00:03:09,140 --> 00:03:10,520
Yeah, we'll call him Ginger.

63
00:03:10,970 --> 00:03:12,410
And in brackets the player.

64
00:03:12,410 --> 00:03:15,470
Just in case you're more old school and you like to call the player the player.

65
00:03:15,470 --> 00:03:16,310
Rick, what are you doing?

66
00:03:16,310 --> 00:03:18,080
Calling him, giving him a crazy name.

67
00:03:18,080 --> 00:03:20,240
Ginger, I'm going to reset the transform.

68
00:03:20,240 --> 00:03:24,770
That's great to make sure we haven't gone and put it way off in some sort of weird Z position.

69
00:03:24,770 --> 00:03:26,420
It's going to be 000.

70
00:03:26,450 --> 00:03:27,740
And next we'll add a component.

71
00:03:27,740 --> 00:03:30,410
The first component we need here is the animator.

72
00:03:30,410 --> 00:03:32,930
And note here that it's looking for a controller.

73
00:03:32,930 --> 00:03:34,460
What is the animator controller?

74
00:03:34,460 --> 00:03:38,390
In other words, what's the thing that's going to tell me what to do to tell the component, what to

75
00:03:38,390 --> 00:03:38,660
do?

76
00:03:38,660 --> 00:03:41,390
So that is something we set up in our project.

77
00:03:41,390 --> 00:03:43,460
It's going to be an actual asset we have in here.

78
00:03:43,460 --> 00:03:49,130
So I will go into my assets directory, right click, create a new folder which I'll call animations

79
00:03:49,130 --> 00:03:52,610
where we will pop all things animation related.

80
00:03:52,640 --> 00:03:59,060
Open that up, right click in here create, let's find animator controller and we'll rename this to

81
00:03:59,060 --> 00:04:00,440
B player.

82
00:04:00,440 --> 00:04:04,330
If I double click on that, open that up, you'll see that we've got a couple of things in here already.

83
00:04:04,340 --> 00:04:08,450
You can zoom around, you can use the middle mouse button as we've done in other things.

84
00:04:08,450 --> 00:04:09,140
Move this.

85
00:04:09,140 --> 00:04:10,370
This is a state.

86
00:04:10,370 --> 00:04:15,170
It's the state of exit, which basically means get out of this animation or get out of this entire animated

87
00:04:15,170 --> 00:04:15,710
controller.

88
00:04:15,710 --> 00:04:17,839
The entry point, this is where we're entering into.

89
00:04:17,839 --> 00:04:19,250
And just another thing, any state.

90
00:04:19,250 --> 00:04:23,720
So that could be if you want to have some rules that say whether you're jumping or running or swimming

91
00:04:23,720 --> 00:04:28,850
or snorkeling, whatever it might be, you can do a particular thing from a particular state.

92
00:04:28,850 --> 00:04:30,500
So we'll get into this again in a moment.

93
00:04:30,500 --> 00:04:33,320
Just wanted to give you a quick look, see at it for now.

94
00:04:33,320 --> 00:04:35,540
What we need to do is create an animation.

95
00:04:35,540 --> 00:04:39,590
So back on to project, we'll find ourselves our player sprite sheet.

96
00:04:39,590 --> 00:04:42,770
So for me, it's the SBA player, Ginger.

97
00:04:42,800 --> 00:04:43,730
Why is it called Ginger?

98
00:04:43,730 --> 00:04:47,120
Well, I gave him red hair and I thought Ginger maybe his name should be Red.

99
00:04:47,120 --> 00:04:48,380
Actually, that'd be a smarter name.

100
00:04:48,380 --> 00:04:50,690
But anyway, we live with our choices in life, don't we?

101
00:04:50,690 --> 00:04:51,770
So that's fine.

102
00:04:51,770 --> 00:04:53,990
I'm going to pull up the little preview window thing.

103
00:04:53,990 --> 00:04:56,150
We can sometimes forget about that, but there it is.

104
00:04:56,150 --> 00:04:56,930
There our preview.

105
00:04:56,930 --> 00:04:59,630
Let's see if we can find things that look like Idol.

106
00:04:59,720 --> 00:05:01,460
That looks like a roll, that looks like a Klein.

107
00:05:01,460 --> 00:05:02,480
That looks like a bit of a bounce.

108
00:05:03,100 --> 00:05:04,170
That's a run.

109
00:05:04,180 --> 00:05:07,150
I think it's going to be somewhere around here.

110
00:05:07,420 --> 00:05:09,400
So five, six, seven, eight.

111
00:05:09,400 --> 00:05:14,260
So you can see there's a number of individual sprites, individual images that have been drawn.

112
00:05:14,260 --> 00:05:18,970
And when you play them together, obviously I'm just scrolling backwards and forwards here on my keyboard

113
00:05:18,970 --> 00:05:21,640
to show you these, but it looks like a little a bouncy bounce on the spot.

114
00:05:21,640 --> 00:05:25,570
So it's going to be from five through to eight in this particular tile set.

115
00:05:25,570 --> 00:05:29,140
And I'm going to highlight all those I'm holding down shift and using my keyboard.

116
00:05:29,140 --> 00:05:35,410
Or you can do shift and your mouse and I'm going to while these are selected I will right click create

117
00:05:35,410 --> 00:05:37,060
and look for animation.

118
00:05:37,090 --> 00:05:37,480
Boink.

119
00:05:37,540 --> 00:05:38,080
There we go.

120
00:05:38,080 --> 00:05:39,010
It's called new animation.

121
00:05:39,010 --> 00:05:41,740
We'll call this idle because that's what he's doing is idling.

122
00:05:41,740 --> 00:05:47,740
And this is living at the moment, this dot anim file which is basically saying go through frame five,

123
00:05:47,740 --> 00:05:50,200
then six, then seven and eight, five and six and seven and eight.

124
00:05:50,770 --> 00:05:53,890
Grab that and we're going to put that into our animations folder.

125
00:05:53,890 --> 00:05:58,450
Back to our animations folder, you can see that we've got our idol and we've got our player, animator,

126
00:05:58,450 --> 00:05:59,860
controller, idle animation.

127
00:05:59,860 --> 00:06:03,730
And you know, what I want to do is drag this into my animator, so I'll just grab the animator and

128
00:06:03,730 --> 00:06:09,340
dock it over to the right here so we can see our files and we can see the animator at the same time.

129
00:06:09,340 --> 00:06:14,020
So you can see what I'm doing, which is grabbing the idle animation, dragging that idle animation,

130
00:06:14,020 --> 00:06:19,660
which consists of our four frames of idle, and just dropping it into our animated controller that is

131
00:06:19,660 --> 00:06:21,790
now added as the state of idle.

132
00:06:21,790 --> 00:06:26,650
And you can see this little line here is saying a transition basically as soon as anything says, hey,

133
00:06:26,680 --> 00:06:33,250
use the animator controller, which will happen when Ginger, our player starts is instantiated in the

134
00:06:33,250 --> 00:06:38,380
world and say, right, do the animation straight from the entry point, go immediately into idle.

135
00:06:38,380 --> 00:06:40,300
Now if we click on Idle, we can see a couple of things here.

136
00:06:40,300 --> 00:06:41,170
You can change the speed.

137
00:06:41,170 --> 00:06:45,400
If you think he's bobbing up and down too quick, you can make it slower or faster by changing the speed

138
00:06:45,400 --> 00:06:45,760
here.

139
00:06:45,760 --> 00:06:50,740
Actually, what I will show you for completeness is let's go to window, find animation and then find

140
00:06:50,750 --> 00:06:51,760
animation.

141
00:06:51,760 --> 00:06:55,270
So with the animation window, if you haven't done much animation, then you might be wondering how

142
00:06:55,270 --> 00:06:56,500
do we what is the animation?

143
00:06:56,500 --> 00:06:57,190
What does that all mean?

144
00:06:57,190 --> 00:07:02,590
Well, if we click on idle animation, then our animation window will show what's going on here.

145
00:07:02,590 --> 00:07:04,510
You see, there's four frames in here.

146
00:07:04,510 --> 00:07:05,440
One, two, three, four.

147
00:07:05,440 --> 00:07:10,510
And if we open up the information on Sprite, you can see that the Sprite that we've put in here, it'll

148
00:07:10,510 --> 00:07:11,590
show us that first one.

149
00:07:11,590 --> 00:07:15,610
So the Sprite five, Sprite six, Sprite seven is Sprite eight and it's added those in here.

150
00:07:15,610 --> 00:07:19,030
And when we push play, it's going to blink, blink, blink and then loop back to the start blank,

151
00:07:19,030 --> 00:07:20,380
blank, blank, loop back to the start.

152
00:07:20,380 --> 00:07:22,660
So that's how our animation is going.

153
00:07:22,660 --> 00:07:28,360
So when we created our animation by highlighting those four sprites and said, turn it into an animation,

154
00:07:28,360 --> 00:07:29,440
this is what it just did.

155
00:07:29,440 --> 00:07:34,030
It said on the first frame, put the first thing on the second frame, put the second thing and so on.

156
00:07:34,030 --> 00:07:35,320
So back to the animator window.

157
00:07:35,320 --> 00:07:36,820
We've got our idol in there.

158
00:07:36,820 --> 00:07:40,000
Next up, what we need to do is to tell our player.

159
00:07:40,000 --> 00:07:45,340
So click on player to tell it, to use the animated controller that we've just set up the rules for

160
00:07:45,340 --> 00:07:46,330
the animation, if you will.

161
00:07:46,330 --> 00:07:47,710
So click on the little selector.

162
00:07:47,740 --> 00:07:50,650
There's only one in our scene player double click on that.

163
00:07:50,650 --> 00:07:52,870
That will assign the player animated controller.

164
00:07:52,870 --> 00:07:56,770
Now to be able to see our character on the screen, we need to do what?

165
00:07:56,770 --> 00:07:59,800
We need to add a Sprite renderer.

166
00:07:59,800 --> 00:08:04,840
So click on add component search for Sprite and then add in the Sprite renderer.

167
00:08:04,840 --> 00:08:06,880
Now we need something to see on our screen.

168
00:08:06,880 --> 00:08:10,600
So at the moment where we have Sprite as none, we need to put a particular Sprite in there that we

169
00:08:10,600 --> 00:08:10,990
can see.

170
00:08:10,990 --> 00:08:14,800
Let's click on that and select just any of our sprites here.

171
00:08:14,800 --> 00:08:16,330
This is not going to be what the player sees.

172
00:08:16,330 --> 00:08:17,680
This is just a representation.

173
00:08:17,680 --> 00:08:20,770
So I'll choose what I think is the first idle animation.

174
00:08:20,770 --> 00:08:22,060
Seems okay now.

175
00:08:22,060 --> 00:08:23,410
That should be somewhere in our world.

176
00:08:23,410 --> 00:08:24,520
But where is it?

177
00:08:24,520 --> 00:08:29,230
If we click on Player, it's missing a little bit of a micro challenge for you here.

178
00:08:29,230 --> 00:08:31,870
See if we can figure out what's going on and fix that.

179
00:08:33,150 --> 00:08:38,159
Well, if you guess that it's hiding somewhere underneath all of these layers, you got it right.

180
00:08:38,159 --> 00:08:43,080
And because we've set up our sorting layers, let's go and add a sorting layer for the player.

181
00:08:43,080 --> 00:08:48,680
So I'm going to jump all the way up to the default layer where it says layer, default, add, layer.

182
00:08:48,690 --> 00:08:55,290
We will add in a new sorting layer which will be clicking on plus we'll call this player hit enter.

183
00:08:55,290 --> 00:08:59,760
Now back to clicking on the player and scrolling down to where we see salt layer.

184
00:08:59,760 --> 00:09:02,070
And I'll change this from default to player.

185
00:09:02,070 --> 00:09:04,530
Actually, you know what I need to do is make sure it's in the right spot.

186
00:09:04,530 --> 00:09:09,870
So back to add layer in here, go to sorting layers and let's see, the player needs to be probably

187
00:09:09,870 --> 00:09:11,100
on top of everything.

188
00:09:11,100 --> 00:09:14,460
To be honest, there might be a little bit of being underneath the platforms.

189
00:09:14,460 --> 00:09:19,200
Yeah, I think if the player is the very last layer here, then it should be over the top of everything.

190
00:09:19,200 --> 00:09:20,130
So let's have a look at that.

191
00:09:20,130 --> 00:09:22,320
Click on the player, drag the player on over.

192
00:09:22,320 --> 00:09:22,500
Yeah.

193
00:09:22,530 --> 00:09:24,900
Now the player is going to bounce around over the platforms.

194
00:09:24,900 --> 00:09:25,290
Okay.

195
00:09:25,290 --> 00:09:30,810
So the moment of truth, if we click on play, find our game window in here is our camera set up.

196
00:09:30,810 --> 00:09:32,220
It should be looking at the character.

197
00:09:32,220 --> 00:09:33,360
Nothing happens.

198
00:09:33,360 --> 00:09:37,080
Well, if we look down at our animator, you can see this blue line is just stopped.

199
00:09:37,140 --> 00:09:42,030
So basically I think what's happened is it's gone through all four of those sprites bump very quickly

200
00:09:42,030 --> 00:09:42,840
and then it stopped.

201
00:09:42,840 --> 00:09:45,900
So now what we need to do is find out idle animation.

202
00:09:45,900 --> 00:09:51,540
Click on that look over in the inspector you can see loop time, click on loop time that will just say

203
00:09:51,540 --> 00:09:54,990
loop our animation or loop our frames over and over and over.

204
00:09:54,990 --> 00:09:58,080
Now when we click on play, he should be doing a little bounce.

205
00:09:58,110 --> 00:10:00,540
There he is doing his idle excellent.

206
00:10:00,540 --> 00:10:01,050
So there we go.

207
00:10:01,050 --> 00:10:05,640
We've set ourselves up the starting point of our player, just a little idle animation.

208
00:10:05,640 --> 00:10:10,470
And because we've created our animated controller, we can now add other states in here such as running

209
00:10:10,470 --> 00:10:12,270
and jumping and climbing ladder.

210
00:10:12,270 --> 00:10:13,860
So a good start on animations.

211
00:10:13,860 --> 00:10:15,000
I'll see you in the next lecture.