Original subtitles

1 1

[MUSIC] 2

2

Hello, again, 3

3

in this video we're gonna unravel the mysteries of the Animator Controller and 4

4

create our GameObject Lizard that is walking using our sprite sheet animations. 5

5

So let's jump in and get started. 6

6

I'm gonna start off by tidying up my new sprite, just get rid of that. 7

7

That was a placeholder, don't need it any more, what we do need to do though is 8

8

right-click, Create Empty, and call this Lizard. 9

9

And then just reset the transform. 10

10

Okay, now I've been calling it Lizard. 11

11

If you downloaded this or if you're looking to download from the main 12

12

asset pack, it's called the deimaginator. 13

13

I've just recalled it Lizard, 14

14

because deimaginator is a bit tricky to say throughout this course, but 15

15

that's where it is if you're looking in the official glitch assets. 16

16

Deimaginator is the Lizard, now to see our Lizard we need to add a component, 17

17

which is the Sprite Renderer. 18

18

Sprite Renderer, great, and we've done this before. 19

19

Let's find one of the frames from the Lizard Walk, just Lizard Walk 7. 20

20

Drop that into the sprite in here and now it knows what to show. 21

21

We're gonna change the order in layer to five so it sits on top of my background. 22

22

And just with my W key, move the Lizard, or deimaginator, 23

23

into the middle of the screen. 24

24

There we go, it looks pretty good. 25

25

So the Sprite Renderer is needed to actually display it on the screen. 26

26

Now we're gonna be dealing with animation, so 27

27

first of all make sure you have the animator and animation windows somewhere. 28

28

You can go up to Window, they've changed this recently in Unity. 29

29

These windows change around every now and again. 30

30

If you find the Animation tab, wherever that might be for you, and 31

31

then make sure you open up the Animation and Animator windows. 32

32

Okay, I've got mine placed down the bottom here. 33

33

Now let's talk about a little bit of terminology so we're crystal clear. 34

34

First of all, the Animator Component assigns animations to GameObjects 35

35

through an Animator Controller. 36

36

Okay, so that doesn't necessarily make things clearer, 37

37

but we'll be adding a component onto our GameObject which allows that 38

38

GameObject to say, right, you need to have some animations. 39

39

And they'll be driven through the Animated Controller. 40

40

What is the Animated Controller? 41

41

Well, it's the arrangement of animations and transitions, and 42

42

it's a state machine so it could have a walk state, or a walk animation. 43

43

And then a transition that says if the player holds down the sprint key, 44

44

then we transition into the run animation. 45

45

So that's all handled in the Animator Controller, and 46

46

then we need our individual animations, obviously. 47

47

These are specific pieces of motion, the run, the jump, the shoot, the fall over. 48

48

And then also as we've added already we need the Sprite Renderer, and 49

49

this is what we need to actually display the sprites onto the screen. 50

50

So there's some terminology for you, and 51

51

now what I'm gonna do is something a little bit different. 52

52

I'm gonna go through the process of creating the Animated Controller and 53

53

some animations for my character here. 54

54

What I'd like you to do as a challenge, is to just watch and absorb and then see if 55

55

you can do all of this yourself when we get to the time of the challenge. 56

56

So the steps of the challenge will be, when we get to it, will be, well, 57

57

first of all watch [LAUGH], and then do it on your own later on. 58

58

It will be to create an Animated Component, 59

59

to create an Animator Controller, to add the Animator Controller 60

60

to Lizard Game Object, and to create an animation for the walk. 61

61

And then obviously we need to do a little bit of tuning to 62

62

the speed of the animation so that it looks good and makes sense. 63

63

So that will be the challenge shortly, after I take you through all the steps. 64

64

I'm going to give you that challenge and if you get stuck on the challenge you can 65

65

come back and rewatch for any hints that you want. 66

66

So there's the challenge, you can do it right now, or 67

67

you can wait until after I've done it, okay. 68

68

So let's jump in and get started on this. 69

69

We have our Lizard, we need to add a component, 70

70

and this will be the Animator Component. 71

71

Okay, now it's saying, okay, I'm ready to do some animations, but 72

72

I need to know what is the controller, what is the thing that's gonna 73

73

be determining when you run and when you jump and what jump is? 74

74

So we need to create one of those. 75

75

I've got an animations folder. 76

76

I was playing around just before a bit naughty off screen. 77

77

Let me delete that and do it so we can do it together, okay? 78

78

In my Assets folder, I'm gonna create surprise, 79

79

surprise, a new folder called Animations. 80

80

And in our Animations folder, right-click and create Animator Controller. 81

81

We'll call this Lizard and you can see it's now populated in our animator. 82

82

We have some stuff in there. 83

83

You can drag these and move them around. 84

84

These are the states at the moment, it doesn't quite make sense, 85

85

there's isn't a lot going on. 86

86

We just have an entry state, the first thing that happens and the exit. 87

87

This is when we exit out of this Animated Controller. 88

88

We need some animations in here. 89

89

Now I'm gonna show you my preferred way to create animations. 90

90

There's a lot of different ways to do it, but I'll show you the way that I like to 91

91

do it which is to find the thing we want to animate. 92

92

So go to your sprites and find your Lizard Walk or whatever it is 93

93

that you've created, highlight all of the frames of your animation, 94

94

and then right-click Create > Find Animation, blink. 95

95

And now you see down the bottom we can rename our new 96

96

animation to be Lizard Walk. 97

97

And we now have a Lizard Walk animation that if we click on our Animation tab 98

98

here, you can see it has all of these frames and 99

99

these individual frames are corresponding. 100

100

All these key frames are corresponding to each of our images from our spreadsheet. 101

101

Now we can't see it at the moment. 102

102

If we click on Play there's nothing to preview, 103

103

cuz it doesn't know what the model is or what the representation is. 104

104

We've already created ourselves a Lizard GameObject, so we'll grab that, 105

105

drag it on over into our preview. 106

106

Now when we click the Preview button, we see it walking. 107

107

And in the preview, we can slow it down [SOUND] to see how it goes, or 108

108

speed it up to see how that goes. 109

109

But that's not changing the speed of the animation in the game. 110

110

That's just changing the speed of the preview. 111

111

What we can do to change the speed of the actual animation itself 112

112

is you see here samples. 113

113

At the moment what that's saying is 12 samples per second. 114

114

We know that our Lizard has 16 frames. 115

115

So it's going to get through those, all of those 16 frames, 116

116

in a little over a second. 117

117

So 12 frames per second. 118

118

This is taking us up to a second, and there's another three or 119

119

four frames at the end there. 120

120

I'm gonna change this to say 100, just to be silly. 121

121

So in this instance, we're getting through our frames really quickly if I click Play. 122

122

Beep, beep, beep, beep, beep, beep, beep, that's funny, [LAUGH] it's kinda cool, but 123

123

it's not quite what the artist was going for, I'm sure. 124

124

I think the happy medium here, just from playing around with it, 125

125

is 24 frames per second for this character. 126

126

That's a nice, gentle meander that our Lizard's doing. 127

127

Okay, so we now have an animation that's comprised 128

128

of our sprite sheet individual frames. 129

129

I'm gonna grab this animation and drag it into my Animations folder so it's nice and 130

130

tidy, I know where to find it. 131

131

Now we have our Lizard Animator Controller and our Lizard Walk. 132

132

And if we click on Lizard as a GameObject, 133

133

now we can say under Controller what's the Animator Controller? 134

134

Let's click the selector and say it's going to be the Lizard, excellent. 135

135

It now knows the Lizard Animated Controller is gonna drive me. 136

136

If we click on the Lizard Animator Controller and then click on the Animator 137

137

window, we can see that our Lizard Walk animation is not yet in there. 138

138

So what we're gonna do if I can resize my window a little bit here, 139

139

it's being a bit problematic, there we go, got it. 140

140

Is to grab Lizard Walk and drag it into my Animator Controller. 141

141

It comes in as this orange state called Lizard Walk. 142

142

And it's got some details in the inspector that we'll play around with a little bit 143

143

in upcoming videos. 144

144

And it has this line that is created, which is a transition. 145

145

What it's saying in this instance is the entry, so the very moment anything says, 146

146

hey, I need you to pay attention to the Lizard Animator Controller, 147

147

which is probably when our Lizard is spawned or instantiated. 148

148

And in this case, 149

149

it's right from the very start of the game cuz we've dropped it in our hierarchy. 150

150

It will go from entry [SOUND] straight along the transition, 151

151

immediately into Lizard Walk. 152

152

And there's no other transitions. 153

153

There's not a transition to die or to jump, 154

154

so it will just stay on Lizard Walk over, and over, and 155

155

over in this case, cuz there's only one animation that we have in there. 156

156

So let's see if that works. 157

157

We've got our Lizard GameObject. 158

158

It has the Lizard Animator Controller. 159

159

The Lizard Animator Controller knows about the Lizard Walk animation. 160

160

So if we click Play in our game now, what do we see? 161

161

We see that our Lizard does a bit of a walk, but you see it walked and 162

162

then stopped. 163

163

That looked like it went through its 16 frames and 164

164

then stopped, which to me says we're not looping. 165

165

Let's have a look and see where we need to loop. 166

166

Well, the simplest way to do this is to click on the Lizard Walk animation 167

167

we have in our folder here. 168

168

And you can see in our inspector we have the loop time. 169

169

If you click Yes on looped time, now when we click Play, 170

170

that animation should know that by default it just loops over and over. 171

171

So there we go loopy, loop, loop, loop, I'll go to the same view so we can see. 172

172

And our guy is walking in our game fully animated, looking amazing. 173

173

And obviously as time goes on, and we implement more features in our game, 174

174

we can tell it to move across the screen as the animation's going. 175

175

Boop, boop, boop, boop, boop, so it looks like it's actually walking. 176

176

Okay, so that's the full process. 177

177

Back to the challenge for you. 178

178

If you haven't been following along, or sorry, if you haven't been creating as 179

179

you've been going, this is the challenge for you to do now. 180

180

And if you were following along, you might want to go and 181

181

create another Animated Controller animation just to practice this to make 182

182

sure it's really embedded. 183

183

Some of the terms are a bit confusing. 184

184

Create an Animator Component, create the Animator Controller, 185

185

add the Animator Controller to the Lizard Game Object. 186

186

Create an animation, tune the speed of the animation as we've done. 187

187

And then once you've done that, once you have your Lizard or whatever you're using 188

188

in your game walking on the screen for an animation, great work, job done. 189

189

And you can go along to the next video and we'll continue along with our animation. 190

190

So great stuff and I'll see you again real soon.