Original subtitles

1 1

[MUSIC] 2

2

In this lecture we're going to be talking about animation transitions, 3

3

to transition from jump to walk. 4

4

So, our lizard jumps onto the screen, and then starts walking. 5

5

Excellent, let's jump in, pardon the pun and get started. 6

6

Okay, first thing I want to show you, a bit of a neat trick. 7

7

If you click on the game object that has the animation on it, 8

8

go to your animation window and then see where we have lizard sprite. 9

9

If you click on the little selector thing next to that, you can see a mini, 10

10

mini preview of what is happening in that frame. 11

11

And that will allow you to scrub through your animations so 12

12

you can see how that looks without having to click the Play button. 13

13

So that's a way to see the animation, if I was to select and highlight a bunch of 14

14

frames in here, I could drag all of those frames down to the right. 15

15

And then what would happen is we'd do an animation, and then he 16

16

would pause on that frame for a long time and then go into the next animation. 17

17

So you can play around with it and do a little bit of finessing of different parts 18

18

of the animation to stretch out some periods of it. 19

19

If you grab the end bar down the end here, 20

20

see how there's a little handle at the right and a little handle at the left when 21

21

you've got these selected, then it will stretch that part of it. 22

22

So we could have it playing, playing, and then a little bit slow, and 23

23

then speed up again. 24

24

So there's plenty of things you can do, manually go and 25

25

mess around with the speed and the timing of the animation. 26

26

Okay, next up what we're gonna do is, import a new Sprite Sheet and 27

27

slice it up, and I'd like for you to do that as a challenge. 28

28

But first of all, let's together go and find all of the assets 29

29

of the Sprite Sheet And while we're at it, we'll do the audio as well. 30

30

From the asset pack that I gave you in the last lecture, the downloadable, so 31

31

go and find this sprite sheet. 32

32

Let's grab all those, so I don't have to tell you each time I'm bringing in a new 33

33

thing hey, I'm going to go and bring in a new thing. 34

34

Let's go bring it all in. 35

35

So I'll highlight all of the sprite sheets. 36

36

I'll drag that into Sprites. 37

37

Boink there they all are in there, taking all of it made it, 38

38

great I was just thinking about it. 39

39

I will find my sounds and then, while I'm here just go and 40

40

drag whatever sounds of music I've got into there. 41

41

Okay, that might take awhile for you as it imports it all, 42

42

but I've gone and imported all of my sounds in the Sprite. 43

43

Let's get a look at the Sprite sheet, 44

44

the one thing that I'm interested in for this video is Lizard Jump. 45

45

I've look at Lizard Jump, there it is, just there. 46

46

Okay, Lizard Jump and it is one, two, three, 47

47

by, one, two, three, four, five, six, seven, eight, nine, 3 by 9. 48

48

Okay, so that's the one I want you to go and find that and import it and 49

49

slice it up. 50

50

Here's your challenge. 51

51

Import a second sprite sheet, well, 52

52

I just imported them all, made it a little bit easier for myself there. 53

53

Slice sprite sheet, so slice the lizard jump sprite sheet, 54

54

that's the one that I just pointed out, lizard jump. 55

55

By using a grid by cell size, so last team we used automatic so 56

56

I want you to find within this bright editor, 57

57

the grid by cell size and make the cells equal size. 58

58

And what I mean by that is find the total width of our sprite sheet and 59

59

divide that by the number of columns that we want. 60

60

So what's the total width of this, and then we have how many columns, 1, 2, 3. 61

61

Okay, so I hinted there might be 3. 62

62

And then to figure out the total height and divide by number of rows. 63

63

And so that will give you the information you need when you're looking at the grid 64

64

by cell size. 65

65

If that doesn't make sense, never fear, we'll do that together, but 66

66

I want you to go ahead and give that your best shot. 67

67

And also, create a new animation from the individual sprites 68

68

that you get when you slice it up, and to make sure you can preview it and see it. 69

69

So there is your mission, if you choose to accept it and 70

70

I will see you back here shortly. 71

71

Okay, so as I said I've already found lizard jump, I'm going to go ahead and 72

72

drag, no I'm going to leave it there, that's a fine place for it. 73

73

This folder might get a little bit busy, so you know what I will do, I will create 74

74

a new folder in here, just right click, create folder, and I'll call this lizard. 75

75

And I will go and create another folder, create folder, and 76

76

I will call this, not in use. 77

77

So, my logic here is any of the stuff that I'm not currently using, 78

78

I'll just drag it in, minus, I'm holding on control or command, the Lizard Jump. 79

79

I'll do the both bits of the Lizard Jump, dragging that into the not in use. 80

80

Okay and that's my little system, I'll drag lizard jump into lizard. 81

81

That's my little system so I know there's something in the game, where is it? 82

82

If it's in one of these folders I'm using it in the game, 83

83

if it's in this one then I'm not using it yet. 84

84

You can lay out however you want but that's how it works for me. 85

85

So we have lizard jump and you know what, we also need, where's my other one, 86

86

where's my other lizard in here? 87

87

My Lizard Walk that we've already sliced up, so drag that into lizard. 88

88

Okay, there's walk and lizard jump, let's click on lizard jump, 89

89

and drag back down my preview, find our sprite mode, change that to multiple. 90

90

Click Apply, jump over into sprite editor by clicking on the Sprite Editor button 91

91

up to slice and we want to slice grid by cell size, okay? 92

92

I'm sure you found this in the challenge but we're looking for 93

93

the pixel size x by x, so when we slice it up we want to slice up every, 94

94

in this instance it would be every 64. 95

95

So I'll just click slice, see what happens here, there's no harm in doing that. 96

96

Every 64 pixels it puts in a slice, 64 puts in a slice and same with the, 97

97

from top to bottom, and bring my thing back up, on the Y axis we slice, 98

98

slice, slice every 64. 99

99

Okay so you can see that's slicing right in the middle of our character, 100

100

that's no good, how do we figure this out? 101

101

Well we go and find our sprite sheet that we clicked on here, the lizard jump 102

102

sprite sheet, and you can see down on the bottom it says it's 753 by 1674. 103

103

So we fire up the calculator. 104

104

Calculator and 753, 753 divided by, 105

105

well how many columns do we have? 106

106

We have three, and that equals 251, so each of these needs to be 251. 107

107

Assuming that our artist, whoever created this, and 108

108

we don't know who made it, laid them out in equal position. 109

109

If this is just a big hodge-podge of things just everywhere, 110

110

then it won't work so well, but we can see it's been laid out nice and neatly. 111

111

You can see the little, the portal thing the lizard's jumping out 112

112

of is in the same spot in each of these columns. 113

113

Okay, so 251, we'll write that down, and then height, here is 1674. 114

114

You can see down in the bottom right, so 115

115

1674, divided by, and we have nine, 116

116

I counted those up before, equals 186, so write that down as well. 117

117

Excellent, op and up in my slice up here, we want to have 251 by 186, 118

118

I'm gonna click on the Slice. 119

119

Now when I click on any of these you can see it looks pretty darn good. 120

120

Okay so let's click on Apply, close that down, jump back over into here. 121

121

We've got our jump highlight all of the jump frames, right-click, 122

122

create animation. 123

123

Boink, 1 to 4, I'll call this animation Lizard Jump. 124

124

Drag Lizard Jump animation into my animations folder. 125

125

Now we have Lizard Jump and Lizard Walk, excellent. 126

126

Now, if I click on Lizard Jump, you can see the little, 127

127

little preview that I showed you before, it's looking nice and tidy. 128

128

And then, how do we preview this, well, we grab our lizard game object, 129

129

drag it over into our preview window, 130

130

and then when we click on play, whoops, zoom out a little bit. 131

131

The lizard jumps and then lands, excellent. 132

132

It's all nicely positioned, I think it looks good. 133

133

Okay, next that we want to add, so 134

134

that was the challenge, next that we wanna add this to our animator controller. 135

135

So our lizard has an animator controller, we view that within the animator window 136

136

here, and you can see at the moment we just have our lizard walk. 137

137

I'll give myself a little bit of space, excellent, now we wanna put in the jump. 138

138

So what we wanna do is the lizard jumps from probably off screen here, or not off 139

139

screen but from the right, and jumps into this frame and then starts walking. 140

140

So we need to have a transition, we need to say, start with the jump animation and 141

141

then transition into the walk animation. 142

142

This line here is a transition from entries going straight into walk. 143

143

So basically it's starting in walk the first thing that happens, and 144

144

we wanna change that, we wanna go straight into jump. 145

145

I'm gonna click on lizard walk, delete that and start this afresh. 146

146

Drag in lizard jump, and now automatically it says going from entry, 147

147

the very first thing I do is the lizard jump, which is good. 148

148

Let's just click play to see if that's working. 149

149

Was it does, it jump, boink, and there it is, perfect, excellent. 150

150

Now we want to go to lizard jump to lizard walk. 151

151

Mini challenge for you if you can figure this out how to do that. 152

152

Okay, that was me pausing if you wanted to take this on as a challenge. 153

153

What I'll do is drag in lizard walk, you can put it anywhere in here, 154

154

it doesn't matter. 155

155

I can move things out of the way, it's all about the connected line relationship as 156

156

opposed to where they're positioned. 157

157

If you're wondering what any state means, that's if you want to have an animation 158

158

where you say for example from any state at all, if the character gets shot. 159

159

We want that character to change animation to do like a recoil or like a death or 160

160

something, then you can have the any state transition into these other states. 161

161

So that's why any state is there, just as a handy way to say, 162

162

anything can go into state or any state can go into anything else. 163

163

So we're not gonna use that at the moment so just ignore that for now. 164

164

What we'll do is right click on lizard jump, make transition, 165

165

drag it to lizard walk as simple as that, do that one more time. 166

166

So right click and the animation you want to go from, 167

167

click on Make Transition and them move your arrow around. 168

168

So I'm not holding my mouse button down just yet, 169

169

I'm now hovering around over to go. 170

170

It will snap and then I click my mouse button, 171

171

and now it's making a transition from Lizard Jump into Lizard Walk. 172

172

Lizard Jump, let's just have a look at that animation. 173

173

Okay, it's not looping, that's important, we're gonna say, 174

174

whenever you finish lizard jump, then just go straight to lizard walk. 175

175

We'll get more complicated with our transitions in the future, 176

176

where we have a condition in the game that will change the animation, but for 177

177

now we're just saying finish the jump, go into walk. 178

178

Okay, back to clicking on this transition here. 179

179

Okay, when you click on the transition, you get a whole bunch of information, 180

180

a whole bunch of stuff going on. 181

181

We can see up here, the lizard jump to lizard walk is the transition. 182

182

We can turn it off, we can delete it, we can do a few other cool things up here. 183

183

And then we have this little settings selector that allows you to open it up. 184

184

And then this window is showing us where our transition is going to take place. 185

185

This is a little bit more relevant when you've got 3D animation, and 186

186

you can blend from one state to the other. 187

187

So if an arm is up in the air and then an arm is down by the side, and 188

188

then you want to blend the two together, and it will blend it more neatly. 189

189

But with our 2D sprites, it's a little bit more that it just pops from one to 190

190

another, so don't worry about having this blended overlap here. 191

191

So the transition duration, I am going to turn that to 0 and 192

192

the exit time I'll put to 1 saying after you get the whole 193

193

way through doing a lizard jump then go in and do lizard walk. 194

194

So let's see if this works now just as is, click on play. 195

195

Jump and then, walk, walk, walk, okay, so 196

196

one problem it snaps up to the top, can you figure out why that is? 197

197

Here's another challenge for you, figure out why our lizard has 198

198

snapped to a slightly different position and then is playing its animation. 199

199

So if you've been through animation before you might already have a thought on this, 200

200

so pause the video, see if you can figure that out. 201

201

Okay, hopefully you gave that a shot, and let's have a look at it together. 202

202

So if I have a look at my lizard walk animation, specifically if I go and 203

203

look at my sprite sheet. 204

204

Go to Lizard and then look for Lizard Walk, click on my sprite editor. 205

205

If you remember, we did a slice automatically. 206

206

And, the reason we did automatic is well, we only had this animation and 207

207

we wanted to have it nice and tightly framed around it. 208

208

So this method worked when it was just this lizard and 209

209

we didn't have to go from animation A, the jump, to animation B, the walk. 210

210

So in this case we can't just do automatic where we're tightly cropped 211

211

around the lizard. 212

212

That would be fine normally, but 213

213

we need to have it consistent with what the lizard jump is doing. 214

214

So then we go back up to Slice, Automatic, Grid by Cell Size. 215

215

So let's just quickly click on our lizard walk sprite sheet, open that up, 216

216

see what the dimension there are. 217

217

753, that was the same as before, so 218

218

753 divided to by 3 going to be 251 as we had last time. 219

219

So slice 251, and then let's just check up and 220

220

down, it's 1116, where is my calculator? 221

221

Get my calculator back. 222

222

1116 divided by, and we've got one, two, three, four, five, 223

223

six underneath that, six, 186, okay, it's exactly the same as it was before. 224

224

That is perfect, I like to see that. 225

225

By 186, click on slice, now you can see it's a much bigger footprint but 226

226

the lizard is in consistent position each time. 227

227

And not surprisingly if it was to jump out of a hole here, 228

228

[SOUND] it lands just there. 229

229

Okay, click Apply, close that window, I clicked Apply, but 230

230

click Apply again a couple of times, here we go. 231

231

Okay, so we don't need to do anything else, just slicing it up differently, 232

232

the animation system knows that, it's all cool. 233

233

If we click on Play, now it should jump, I only play that once and 234

234

then [SOUND] click in to looping on the walk. 235

235

Excellent, the only last thing here, it looks like the jump is coming 236

236

up pretty slowly so let's find the animation for jump. 237

237

And you can see, we can see when clicking on lizard, 238

238

we've got the jump just here, yep, that's the jump animation. 239

239

I might make this 24 samples as well, 240

240

I think we're just gonna do everything 24 cuz it looks like that's how the artist 241

241

created all this animation with the expectation of 24 per frame. 242

242

Okay, cool so we've got our jump transitioning into our walk, which means 243

243

that we've got some great stuff for our lizard emerging onto the screen. 244

244

Excellent, well done, that's introduction to transitions and 245

245

I'll see you in the next video.