Original subtitles

1 1

[MUSIC] 2

2

So far, we've been pretty basic with our animation. 3

3

A little bit fast and loose, if I might admit, in terms of how we've set it up. 4

4

We've been doing the quick and easy way, but I wanna go deeper in this video, 5

5

and show you more about animation, so that you truly understand what's going on. 6

6

And the first thing for us to look at and remind ourselves of, is the relationship 7

7

between parent and child, and let me just be super duper clear. 8

8

I'm gonna get one of my sprites. 9

9

I'm not using it at the moment. 10

10

You don't have to do this. 11

11

This is all for illustration at the moment. 12

12

We have a star, and you can see the star comes into our hierarchy. 13

13

To make it really clear, I'm gonna rename this, Star = Parent. 14

14

This is at the parent level, and I'm gonna change the color of it to red, 15

15

so we know what's going on there. 16

16

Now, I'm going to drag in another star on top of the parent, 17

17

and that becomes a child. 18

18

We've done this a bunch of times, so 19

19

it should be really clear what's going on here, Star_Child, okay. 20

20

And then, this one, I will move a little bit. 21

21

You can see it starts off over on there. 22

22

If I reset the transform of the child, then, 23

23

it's gonna be sitting right on top of the parent. 24

24

But I move it a little bit to the side, and we'll shrink it down a little bit, 25

25

cuz children are often a little bit smaller than their parents. 26

26

Now, this is the parent, and this is the child. 27

27

Let me show a couple of slides just to make this really, 28

28

really clear what we're talking about here. 29

29

So we have the parent, we have the child. 30

30

The parent, its transform is relative to the world. 31

31

So for example, if it's at 0,0, then it's at the world origin. 32

32

And the child, the transform is relative to the parent. 33

33

So if it's 0-0, it's centered on the parent. 34

34

We know this, we've done this before. 35

35

But just to remind us, this is building to something, I promise you. 36

36

So if I put my transform here at zero and zero, 37

37

you can see it's right down in the origin. 38

38

I'll just change my sprite renderer to seven, so that it appears on top. 39

39

For both of these guys, just to if we're playing around a bit there. 40

40

So it's right at the 0,0, whereas, the child has a position of 0.04. 41

41

So put that at 0,0, okay. 42

42

It's at 0,0, they're both at 0,0. 43

43

If I move the child to the left, then, 44

44

it's going to be at the negative 2 away from the parents. 45

45

So a negative 2 units, to the left on the x-axis, is negative from the parent, okay. 46

46

So that's what we're doing here, 47

47

changes made to the transform, at the parent level will be applied to the child. 48

48

So you saw that I did this with a transform. 49

49

I moved it, so with the position within the transform. 50

50

So I move it, and, as I move the parent, 51

51

the child moves as well, relative to the parent. 52

52

What happens if we change the scale of the parent? 53

53

So while selected on parent, 54

54

if we increase the scale of the parent, the child also increases, and 55

55

you can see the relationship between the distance changes, as well. 56

56

It scales that whole relationship. 57

57

So it is now applying a scaling of two point. 58

58

We'll make it easy. 59

59

We'll say three, three, three, and three, the A Zed doesn't matter, but 60

60

we'll do that nonetheless, all right, messed that up a little bit. 61

61

Okay, three, three, three, now it's gonna be applying a scale of three 62

62

to this positioning of the child, which is a position of minus two. 63

63

Now, changes made to the Child only impact the child, so if I go and 64

64

change the scaling of the child, it doesn't do anything to the parent. 65

65

I move it around independently. 66

66

Okay, we're building to something here, I promise you. 67

67

How does it impact animation? 68

68

That's what we're building towards. 69

69

The animator placed at the parent level can animate the renderers of Parent and 70

70

Children, whereas, the Animator placed on the Child can only drive me 71

71

animations of the Child and its Children, so I'd show you this here. 72

72

If I place an animator at the Parent level, so Add Component animate tool. 73

73

This is what drives animations. 74

74

Then, it can see the child, and the way that we're gonna do that, is, 75

75

we haven't done a lot of this, but we'll do this in a little bit more detail her. 76

76

So if I click on the parent, add an animate tool, 77

77

and now, I need, what, an animated controller, so 78

78

we'll set ourselves up, just for now, a little test folder in here. 79

79

I'll create a Create Folder Test, and 80

80

a little note to myself to delete, cuz this is only for illustrative purposes. 81

81

And within here, we'll right click Create Animator Controller, 82

82

and this will be ParentTest. 83

83

Okay, now, while clicking on the parent, I drag over the ParentTest. 84

84

So it has an animator. 85

85

And remember, animator, sorry, an animator controller. 86

86

Animator controller is what drives all the various animations. 87

87

Now, what can we do in here? 88

88

You can see while clicked on our parent, which is accessing our 89

89

parent test animator controller, we have to begin animating the star parent. 90

90

Create an animation clip. 91

91

So this is another way for us to create animations. 92

92

We haven't done it this way before. 93

93

We've done it a more drag and drop way, but let's do it this slower way, so 94

94

we really clear and deliver it. 95

95

We'll click Create, it's gonna ask us where we want to create our new animation. 96

96

So we'll call this just Animation 1, we'll call it Test Animation 1, 97

97

just to be super clear that we're getting rid of all this stuff. 98

98

And now you can see we have our animation ready and raring. 99

99

And something that we haven't played round with it yet here, is Add Property. 100

100

Now, when I click on Add Property, 101

101

it will show me all of the things that I can Animate. 102

102

I have the transform, which is referring to the parent's transform. 103

103

You see, if I open that up, position scale rotation. 104

104

Let's just do something on there. 105

105

Click the plus button. 106

106

Now, if you're not finding the plus button, 107

107

let me just open up one of these to see if I can simulate this, okay. 108

108

If you're not finding the plus button like I had the other day, 109

109

you might need to move this little slidey bar. 110

110

At the moment, it all fits on my screen, but depending upon your resolution, 111

111

sometimes, that plus button disappears, which is a real pain. 112

112

But anyway, click on the plus. 113

113

Now, it lets us animate. 114

114

So it's gonna take the sprite. 115

115

From the sprite renderer, whatever was our sprite that we had in there, 116

116

we're just going to place it at the start and place it at the end. 117

117

That is the sprite. 118

118

We can go in there and do what we did before. 119

119

So we can click on record, we can move it midway, 120

120

we can move it down a little bit, and then click off record. 121

121

So that's our animation, up and down. 122

122

Okay, very cool, up and down. 123

123

We can also add properties for the child. 124

124

So see here, how we've got the star child? 125

125

If we open that up, now, we can see that we have a transform, and 126

126

we also have a sprite renderer. 127

127

The sprite renderer is particularly important if we have 128

128

a sprite sheet with a whole bunch of animations on it. 129

129

Would go into the sprite renderer, scroll down. 130

130

This is the thing I was doing that before. 131

131

I need to, [SOUND], see that? 132

132

Man, I lost a lot of time trying to find that. 133

133

Figure out why it wasn't working when I double-clicked on it the other day. 134

134

But it's cuz the plus is there. 135

135

And then, we'll click on plus. 136

136

We'll get to that approach in a moment. 137

137

But for now, we'll just play around with the transform. 138

138

So child transform. 139

139

Click on, we'll use position as well for now. 140

140

Click on plus for that. 141

141

Now, we can independently animate the parent and the child. 142

142

So if I open up child, I can see my x, y's, add code. 143

143

So I can click Curves to get these things curves. 144

144

But we'll just say as it's going up and 145

145

down, we will be clicked on child a record. 146

146

I'll move the child a little bit to the left, and then, unrecord, 147

147

and so, as it's moving, you can see the child is going in and out to the left. 148

148

But the parent's going up and down. 149

149

But the child keeps the parent's animation, 150

150

cuz the parent is moving up and down. 151

151

Therefore, everything below it is going to be moving up and down. 152

152

Okay, let us do a, just very quickly, do a slightly different approach, 153

153

I'm gonna duplicate my parent and child. 154

154

And I will remove the animator from the parent, remove component. 155

155

I will add the animator to the child, so here we have an animator on the child. 156

156

And now, I need to create myself another Animated controller. 157

157

We'll call this child test. 158

158

I think you already know what's gonna go on here, but I wanna be really clear. 159

159

If we drag the child test animator controller into the animator, okay. 160

160

Now, that's great. 161

161

And while clicking on the child, 162

162

if we create an animation, this will be test animation two. 163

163

Okay, test animation two, on the chart, if we go to add property, 164

164

you can see we have a transform, and we have a sprite renderer. 165

165

We don't have an option for parent and chart. 166

166

All we are seeing is the child, so just super quickly to illustrate that, 167

167

you know what I'll move these guys a little bit out of the way. 168

168

They're currently sitting right on the top of the things I duplicated it from. 169

169

So we will move these up to the top. 170

170

Just to be very clear, this is our second pair we're working with here, 171

171

up to the top. 172

172

If I click on child, 173

173

add property, transform, there is no other options deeper below. 174

174

Click on the plus, move it to there, and do what we will, and just scale it. 175

175

Just to do something different, scale and record. 176

176

Now, as I drag along, you can see it gets bigger and stays big, as well. 177

177

And it's only animating the chart. 178

178

And then, the final thing I wanna show you in here, is at the moment we have, 179

179

we'll take our first pair. 180

180

We have parent and child. 181

181

If I was to get rid of this particular child, and 182

182

I will create a new empty game object, I'll call this new child. 183

183

Congratulations, you have a baby. 184

184

So we have a new child and parent. 185

185

If I click on parent, and I have my animator, when I go 186

186

to look within here, see first of all the fact that I've deleted the previous child, 187

187

now, it's saying start child the one that I had before that I've deleted. 188

188

Position missing, it doesn't know what is going on. 189

189

So we have to right click and remove properties, it's gone, cuz we deleted it. 190

190

Now, if I click on the Parent, and go to Poperty, you can see that at 191

191

the parent level, we have Transform, and we have the Sprite Renderer. 192

192

And in the Sprite Renderer, we can do a bunch of things, we can change the color, 193

193

if we have multiple sprites from a sprite sheet, we can add all of those. 194

194

When I look at the child, I only see the transform. 195

195

That's because the child doesn't yet have a, what? 196

196

It doesn't have a sprite renderer. 197

197

This is really important when it comes to animating sprite sheets. 198

198

We need to have a sprite renderer, so that when I drill into the, 199

199

sorry, when I add property and drill into this. 200

200

So here is my new child. 201

201

Now, I can see a sprite rendere, and I can do a whole bunch of stuff to that. 202

202

We can have the parents' animator, render, something of the child, but 203

203

in this case, where we have the animator on the animator on the child, we can 204

204

animate the render of the child, but we can't animate the renderer of the parent. 205

205

It doesn't look upwards like that. 206

206

Okay, and one more thing I wanna talk about is, and this is the main 207

207

reason that we're having this conversation now, is we're gonna add a couple of 208

208

animation events, and we need to make sure everything is lined up perfectly, 209

209

is that the animator can see methods at the same level, not above, and not below. 210

210

So an animator placed here, at the parent level, cannot use 211

211

an animation event to call a method on a script here on the child level. 212

212

So for example, if we have, where are we? 213

213

We're gonna have to make some changes. 214

214

We'll have a look at our cactus. 215

215

The moment the cactus, we have the defenders script on the upper 216

216

level of the cactus, and on the body, we have the animator and 217

217

the sprite renderer, and the shooter and a couple of other things. 218

218

So the animator can see our shooter script, that's why we'll able to add or 219

219

we can't add animation events in there, but we cannot 220

220

access anything that's on the defender's script, for example, from our animator. 221

221

So the golden rule here, is I've led you down a little bit of a slight side 222

222

alley that we're gonna fix up operationally, is put all of your scripts 223

223

at the parent level, and your animator at the parent level. 224

224

The most important thing is to have the animator at the parent level, 225

225

cuz then you can drill down and animate anything below. 226

226

But also, therefore, we need to have our scripts at the parent level as well, 227

227

so that it can talk to the animator. 228

228

But if I was to go and move that script, now, 229

229

from the body, so if I was to remove that script from here, 230

230

remove component, add it to the parent level shooter. 231

231

Now, when we go back to the animator, 232

232

don't worry about the fact that those haven't been filled in yet. 233

233

We go back to the animator on the body level. 234

234

We click on the animation, which is on the animator. 235

235

Looking, it doesn't find fire, it doesn't know where it is. 236

236

So therefore, we're up to a challenge to recreate a couple of characters, 237

237

we created not quite perfectly. 238

238

For the lizard and the cactus, set them up with a proper parent child relationship. 239

239

And at the moment, we have the Lizard. 240

240

It doesn't have a body on it, so we're gonna create a body. 241

241

Put the sprite renderer of the Lizard onto the body. 242

242

And then, we'll need to recreate those animations. 243

243

And then, make sure the parent has all the scripts, as well as the animator. 244

244

Make sure the child, or we'll call it the body, has a renderer on it. 245

245

And then, to animate your characters. 246

246

So for 247

247

those couple of characters that we've created back to front, trophy is okay. 248

248

We created the trophy, [SOUND] right here. 249

249

We made sure we're careful about that. 250

250

It has parent level with the animator and the scripts we're putting there. 251

251

And then, it has children underneath that we can animate, no problem. 252

252

So jump in, take on that challenge to recreate your Lizard and your Cactus. 253

253

And I will go through my solution in the next video. 254

254

So when you're done, jump onto the next video, and I'll see you there soon.