Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:00,066 --> 00:00:04,040 [MUSIC] 2 2 00:00:04,040 --> 00:00:04,958 Hello, again, 3 3 00:00:04,958 --> 00:00:09,349 in this video we're gonna unravel the mysteries of the Animator Controller and 4 4 00:00:09,349 --> 00:00:13,888 create our GameObject Lizard that is walking using our sprite sheet animations. 5 5 00:00:13,888 --> 00:00:16,245 So let's jump in and get started. 6 6 00:00:16,245 --> 00:00:19,355 I'm gonna start off by tidying up my new sprite, just get rid of that. 7 7 00:00:19,355 --> 00:00:23,711 That was a placeholder, don't need it any more, what we do need to do though is 8 8 00:00:23,711 --> 00:00:26,750 right-click, Create Empty, and call this Lizard. 9 9 00:00:27,880 --> 00:00:29,940 And then just reset the transform. 10 10 00:00:29,940 --> 00:00:33,050 Okay, now I've been calling it Lizard. 11 11 00:00:33,050 --> 00:00:36,737 If you downloaded this or if you're looking to download from the main 12 12 00:00:36,737 --> 00:00:39,228 asset pack, it's called the deimaginator. 13 13 00:00:39,228 --> 00:00:40,842 I've just recalled it Lizard, 14 14 00:00:40,842 --> 00:00:44,489 because deimaginator is a bit tricky to say throughout this course, but 15 15 00:00:44,489 --> 00:00:48,260 that's where it is if you're looking in the official glitch assets. 16 16 00:00:48,260 --> 00:00:52,370 Deimaginator is the Lizard, now to see our Lizard we need to add a component, 17 17 00:00:52,370 --> 00:00:53,920 which is the Sprite Renderer. 18 18 00:00:53,920 --> 00:00:56,780 Sprite Renderer, great, and we've done this before. 19 19 00:00:56,780 --> 00:01:01,476 Let's find one of the frames from the Lizard Walk, just Lizard Walk 7. 20 20 00:01:01,476 --> 00:01:06,508 Drop that into the sprite in here and now it knows what to show. 21 21 00:01:06,508 --> 00:01:10,694 We're gonna change the order in layer to five so it sits on top of my background. 22 22 00:01:10,694 --> 00:01:14,457 And just with my W key, move the Lizard, or deimaginator, 23 23 00:01:14,457 --> 00:01:16,428 into the middle of the screen. 24 24 00:01:16,428 --> 00:01:17,910 There we go, it looks pretty good. 25 25 00:01:17,910 --> 00:01:22,114 So the Sprite Renderer is needed to actually display it on the screen. 26 26 00:01:22,114 --> 00:01:24,380 Now we're gonna be dealing with animation, so 27 27 00:01:24,380 --> 00:01:28,130 first of all make sure you have the animator and animation windows somewhere. 28 28 00:01:28,130 --> 00:01:31,680 You can go up to Window, they've changed this recently in Unity. 29 29 00:01:31,680 --> 00:01:33,400 These windows change around every now and again. 30 30 00:01:33,400 --> 00:01:37,488 If you find the Animation tab, wherever that might be for you, and 31 31 00:01:37,488 --> 00:01:41,361 then make sure you open up the Animation and Animator windows. 32 32 00:01:41,361 --> 00:01:43,129 Okay, I've got mine placed down the bottom here. 33 33 00:01:43,129 --> 00:01:46,329 Now let's talk about a little bit of terminology so we're crystal clear. 34 34 00:01:46,329 --> 00:01:50,950 First of all, the Animator Component assigns animations to GameObjects 35 35 00:01:50,950 --> 00:01:53,118 through an Animator Controller. 36 36 00:01:53,118 --> 00:01:56,457 Okay, so that doesn't necessarily make things clearer, 37 37 00:01:56,457 --> 00:02:00,396 but we'll be adding a component onto our GameObject which allows that 38 38 00:02:00,396 --> 00:02:03,953 GameObject to say, right, you need to have some animations. 39 39 00:02:03,953 --> 00:02:06,816 And they'll be driven through the Animated Controller. 40 40 00:02:06,816 --> 00:02:07,903 What is the Animated Controller? 41 41 00:02:07,903 --> 00:02:12,343 Well, it's the arrangement of animations and transitions, and 42 42 00:02:12,343 --> 00:02:17,191 it's a state machine so it could have a walk state, or a walk animation. 43 43 00:02:17,191 --> 00:02:21,847 And then a transition that says if the player holds down the sprint key, 44 44 00:02:21,847 --> 00:02:25,090 then we transition into the run animation. 45 45 00:02:25,090 --> 00:02:28,067 So that's all handled in the Animator Controller, and 46 46 00:02:28,067 --> 00:02:30,995 then we need our individual animations, obviously. 47 47 00:02:30,995 --> 00:02:36,270 These are specific pieces of motion, the run, the jump, the shoot, the fall over. 48 48 00:02:36,270 --> 00:02:39,110 And then also as we've added already we need the Sprite Renderer, and 49 49 00:02:39,110 --> 00:02:43,030 this is what we need to actually display the sprites onto the screen. 50 50 00:02:43,030 --> 00:02:45,310 So there's some terminology for you, and 51 51 00:02:45,310 --> 00:02:47,070 now what I'm gonna do is something a little bit different. 52 52 00:02:47,070 --> 00:02:50,778 I'm gonna go through the process of creating the Animated Controller and 53 53 00:02:50,778 --> 00:02:52,822 some animations for my character here. 54 54 00:02:52,822 --> 00:02:57,626 What I'd like you to do as a challenge, is to just watch and absorb and then see if 55 55 00:02:57,626 --> 00:03:02,130 you can do all of this yourself when we get to the time of the challenge. 56 56 00:03:02,130 --> 00:03:06,270 So the steps of the challenge will be, when we get to it, will be, well, 57 57 00:03:06,270 --> 00:03:08,860 first of all watch [LAUGH], and then do it on your own later on. 58 58 00:03:08,860 --> 00:03:12,172 It will be to create an Animated Component, 59 59 00:03:12,172 --> 00:03:17,183 to create an Animator Controller, to add the Animator Controller 60 60 00:03:17,183 --> 00:03:22,029 to Lizard Game Object, and to create an animation for the walk. 61 61 00:03:22,029 --> 00:03:24,730 And then obviously we need to do a little bit of tuning to 62 62 00:03:24,730 --> 00:03:27,923 the speed of the animation so that it looks good and makes sense. 63 63 00:03:27,923 --> 00:03:32,457 So that will be the challenge shortly, after I take you through all the steps. 64 64 00:03:32,457 --> 00:03:36,363 I'm going to give you that challenge and if you get stuck on the challenge you can 65 65 00:03:36,363 --> 00:03:38,825 come back and rewatch for any hints that you want. 66 66 00:03:38,825 --> 00:03:41,205 So there's the challenge, you can do it right now, or 67 67 00:03:41,205 --> 00:03:44,510 you can wait until after I've done it, okay. 68 68 00:03:44,510 --> 00:03:46,930 So let's jump in and get started on this. 69 69 00:03:46,930 --> 00:03:49,575 We have our Lizard, we need to add a component, 70 70 00:03:49,575 --> 00:03:52,740 and this will be the Animator Component. 71 71 00:03:52,740 --> 00:03:55,800 Okay, now it's saying, okay, I'm ready to do some animations, but 72 72 00:03:55,800 --> 00:03:58,990 I need to know what is the controller, what is the thing that's gonna 73 73 00:03:58,990 --> 00:04:03,200 be determining when you run and when you jump and what jump is? 74 74 00:04:03,200 --> 00:04:04,950 So we need to create one of those. 75 75 00:04:04,950 --> 00:04:07,256 I've got an animations folder. 76 76 00:04:07,256 --> 00:04:09,622 I was playing around just before a bit naughty off screen. 77 77 00:04:09,622 --> 00:04:13,539 Let me delete that and do it so we can do it together, okay? 78 78 00:04:13,539 --> 00:04:16,704 In my Assets folder, I'm gonna create surprise, 79 79 00:04:16,704 --> 00:04:19,508 surprise, a new folder called Animations. 80 80 00:04:19,508 --> 00:04:25,926 And in our Animations folder, right-click and create Animator Controller. 81 81 00:04:25,926 --> 00:04:31,930 We'll call this Lizard and you can see it's now populated in our animator. 82 82 00:04:31,930 --> 00:04:33,940 We have some stuff in there. 83 83 00:04:33,940 --> 00:04:35,967 You can drag these and move them around. 84 84 00:04:35,967 --> 00:04:39,032 These are the states at the moment, it doesn't quite make sense, 85 85 00:04:39,032 --> 00:04:40,520 there's isn't a lot going on. 86 86 00:04:40,520 --> 00:04:44,110 We just have an entry state, the first thing that happens and the exit. 87 87 00:04:44,110 --> 00:04:47,750 This is when we exit out of this Animated Controller. 88 88 00:04:47,750 --> 00:04:50,634 We need some animations in here. 89 89 00:04:50,634 --> 00:04:53,840 Now I'm gonna show you my preferred way to create animations. 90 90 00:04:53,840 --> 00:04:57,020 There's a lot of different ways to do it, but I'll show you the way that I like to 91 91 00:04:57,020 --> 00:04:59,090 do it which is to find the thing we want to animate. 92 92 00:04:59,090 --> 00:05:04,134 So go to your sprites and find your Lizard Walk or whatever it is 93 93 00:05:04,134 --> 00:05:09,954 that you've created, highlight all of the frames of your animation, 94 94 00:05:09,954 --> 00:05:14,716 and then right-click Create > Find Animation, blink. 95 95 00:05:14,716 --> 00:05:19,000 And now you see down the bottom we can rename our new 96 96 00:05:19,000 --> 00:05:21,554 animation to be Lizard Walk. 97 97 00:05:21,554 --> 00:05:26,045 And we now have a Lizard Walk animation that if we click on our Animation tab 98 98 00:05:26,045 --> 00:05:28,869 here, you can see it has all of these frames and 99 99 00:05:28,869 --> 00:05:31,735 these individual frames are corresponding. 100 100 00:05:31,735 --> 00:05:37,440 All these key frames are corresponding to each of our images from our spreadsheet. 101 101 00:05:37,440 --> 00:05:38,440 Now we can't see it at the moment. 102 102 00:05:38,440 --> 00:05:41,083 If we click on Play there's nothing to preview, 103 103 00:05:41,083 --> 00:05:44,827 cuz it doesn't know what the model is or what the representation is. 104 104 00:05:44,827 --> 00:05:49,623 We've already created ourselves a Lizard GameObject, so we'll grab that, 105 105 00:05:49,623 --> 00:05:51,667 drag it on over into our preview. 106 106 00:05:51,667 --> 00:05:54,941 Now when we click the Preview button, we see it walking. 107 107 00:05:54,941 --> 00:05:58,718 And in the preview, we can slow it down [SOUND] to see how it goes, or 108 108 00:05:58,718 --> 00:06:00,597 speed it up to see how that goes. 109 109 00:06:00,597 --> 00:06:03,185 But that's not changing the speed of the animation in the game. 110 110 00:06:03,185 --> 00:06:05,250 That's just changing the speed of the preview. 111 111 00:06:05,250 --> 00:06:10,203 What we can do to change the speed of the actual animation itself 112 112 00:06:10,203 --> 00:06:12,169 is you see here samples. 113 113 00:06:12,169 --> 00:06:16,740 At the moment what that's saying is 12 samples per second. 114 114 00:06:16,740 --> 00:06:20,416 We know that our Lizard has 16 frames. 115 115 00:06:20,416 --> 00:06:23,603 So it's going to get through those, all of those 16 frames, 116 116 00:06:23,603 --> 00:06:24,935 in a little over a second. 117 117 00:06:24,935 --> 00:06:26,446 So 12 frames per second. 118 118 00:06:26,446 --> 00:06:29,371 This is taking us up to a second, and there's another three or 119 119 00:06:29,371 --> 00:06:30,790 four frames at the end there. 120 120 00:06:30,790 --> 00:06:34,685 I'm gonna change this to say 100, just to be silly. 121 121 00:06:34,685 --> 00:06:38,885 So in this instance, we're getting through our frames really quickly if I click Play. 122 122 00:06:38,885 --> 00:06:43,065 Beep, beep, beep, beep, beep, beep, beep, that's funny, [LAUGH] it's kinda cool, but 123 123 00:06:43,065 --> 00:06:45,649 it's not quite what the artist was going for, I'm sure. 124 124 00:06:45,649 --> 00:06:49,123 I think the happy medium here, just from playing around with it, 125 125 00:06:49,123 --> 00:06:51,597 is 24 frames per second for this character. 126 126 00:06:51,597 --> 00:06:55,179 That's a nice, gentle meander that our Lizard's doing. 127 127 00:06:55,179 --> 00:07:00,007 Okay, so we now have an animation that's comprised 128 128 00:07:00,007 --> 00:07:03,749 of our sprite sheet individual frames. 129 129 00:07:03,749 --> 00:07:07,869 I'm gonna grab this animation and drag it into my Animations folder so it's nice and 130 130 00:07:07,869 --> 00:07:09,386 tidy, I know where to find it. 131 131 00:07:09,386 --> 00:07:14,098 Now we have our Lizard Animator Controller and our Lizard Walk. 132 132 00:07:14,098 --> 00:07:16,529 And if we click on Lizard as a GameObject, 133 133 00:07:16,529 --> 00:07:20,426 now we can say under Controller what's the Animator Controller? 134 134 00:07:20,426 --> 00:07:24,330 Let's click the selector and say it's going to be the Lizard, excellent. 135 135 00:07:24,330 --> 00:07:28,114 It now knows the Lizard Animated Controller is gonna drive me. 136 136 00:07:28,114 --> 00:07:33,140 If we click on the Lizard Animator Controller and then click on the Animator 137 137 00:07:33,140 --> 00:07:37,864 window, we can see that our Lizard Walk animation is not yet in there. 138 138 00:07:37,864 --> 00:07:40,793 So what we're gonna do if I can resize my window a little bit here, 139 139 00:07:40,793 --> 00:07:43,213 it's being a bit problematic, there we go, got it. 140 140 00:07:43,213 --> 00:07:48,261 Is to grab Lizard Walk and drag it into my Animator Controller. 141 141 00:07:48,261 --> 00:07:51,774 It comes in as this orange state called Lizard Walk. 142 142 00:07:51,774 --> 00:07:55,095 And it's got some details in the inspector that we'll play around with a little bit 143 143 00:07:55,095 --> 00:07:55,954 in upcoming videos. 144 144 00:07:55,954 --> 00:07:59,108 And it has this line that is created, which is a transition. 145 145 00:07:59,108 --> 00:08:04,218 What it's saying in this instance is the entry, so the very moment anything says, 146 146 00:08:04,218 --> 00:08:08,452 hey, I need you to pay attention to the Lizard Animator Controller, 147 147 00:08:08,452 --> 00:08:12,330 which is probably when our Lizard is spawned or instantiated. 148 148 00:08:12,330 --> 00:08:13,053 And in this case, 149 149 00:08:13,053 --> 00:08:16,400 it's right from the very start of the game cuz we've dropped it in our hierarchy. 150 150 00:08:16,400 --> 00:08:19,416 It will go from entry [SOUND] straight along the transition, 151 151 00:08:19,416 --> 00:08:21,052 immediately into Lizard Walk. 152 152 00:08:21,052 --> 00:08:22,234 And there's no other transitions. 153 153 00:08:22,234 --> 00:08:24,510 There's not a transition to die or to jump, 154 154 00:08:24,510 --> 00:08:27,338 so it will just stay on Lizard Walk over, and over, and 155 155 00:08:27,338 --> 00:08:31,900 over in this case, cuz there's only one animation that we have in there. 156 156 00:08:31,900 --> 00:08:33,188 So let's see if that works. 157 157 00:08:33,188 --> 00:08:34,740 We've got our Lizard GameObject. 158 158 00:08:34,740 --> 00:08:37,402 It has the Lizard Animator Controller. 159 159 00:08:37,402 --> 00:08:43,580 The Lizard Animator Controller knows about the Lizard Walk animation. 160 160 00:08:43,580 --> 00:08:47,100 So if we click Play in our game now, what do we see? 161 161 00:08:48,360 --> 00:08:51,410 We see that our Lizard does a bit of a walk, but you see it walked and 162 162 00:08:51,410 --> 00:08:52,110 then stopped. 163 163 00:08:52,110 --> 00:08:54,130 That looked like it went through its 16 frames and 164 164 00:08:54,130 --> 00:08:56,980 then stopped, which to me says we're not looping. 165 165 00:08:56,980 --> 00:08:58,840 Let's have a look and see where we need to loop. 166 166 00:08:58,840 --> 00:09:03,480 Well, the simplest way to do this is to click on the Lizard Walk animation 167 167 00:09:03,480 --> 00:09:04,700 we have in our folder here. 168 168 00:09:04,700 --> 00:09:08,056 And you can see in our inspector we have the loop time. 169 169 00:09:08,056 --> 00:09:11,534 If you click Yes on looped time, now when we click Play, 170 170 00:09:11,534 --> 00:09:15,984 that animation should know that by default it just loops over and over. 171 171 00:09:15,984 --> 00:09:19,115 So there we go loopy, loop, loop, loop, I'll go to the same view so we can see. 172 172 00:09:19,115 --> 00:09:24,306 And our guy is walking in our game fully animated, looking amazing. 173 173 00:09:24,306 --> 00:09:28,590 And obviously as time goes on, and we implement more features in our game, 174 174 00:09:28,590 --> 00:09:32,404 we can tell it to move across the screen as the animation's going. 175 175 00:09:32,404 --> 00:09:35,519 Boop, boop, boop, boop, boop, so it looks like it's actually walking. 176 176 00:09:35,519 --> 00:09:37,105 Okay, so that's the full process. 177 177 00:09:37,105 --> 00:09:38,913 Back to the challenge for you. 178 178 00:09:38,913 --> 00:09:42,395 If you haven't been following along, or sorry, if you haven't been creating as 179 179 00:09:42,395 --> 00:09:44,978 you've been going, this is the challenge for you to do now. 180 180 00:09:44,978 --> 00:09:47,621 And if you were following along, you might want to go and 181 181 00:09:47,621 --> 00:09:51,224 create another Animated Controller animation just to practice this to make 182 182 00:09:51,224 --> 00:09:52,645 sure it's really embedded. 183 183 00:09:52,645 --> 00:09:54,390 Some of the terms are a bit confusing. 184 184 00:09:54,390 --> 00:09:57,970 Create an Animator Component, create the Animator Controller, 185 185 00:09:57,970 --> 00:10:00,350 add the Animator Controller to the Lizard Game Object. 186 186 00:10:00,350 --> 00:10:04,069 Create an animation, tune the speed of the animation as we've done. 187 187 00:10:04,069 --> 00:10:08,988 And then once you've done that, once you have your Lizard or whatever you're using 188 188 00:10:08,988 --> 00:10:13,438 in your game walking on the screen for an animation, great work, job done. 189 189 00:10:13,438 --> 00:10:17,443 And you can go along to the next video and we'll continue along with our animation. 190 190 00:10:17,443 --> 00:10:20,010 So great stuff and I'll see you again real soon. 19778