1 00:00:04,300 --> 00:00:05,380 ‫Hello and welcome. 2 00:00:05,380 --> 00:00:05,770 ‫This lecture. 3 00:00:05,770 --> 00:00:10,780 ‫We're going to be looking at how we can use the anim graph of an animation blueprint. 4 00:00:10,780 --> 00:00:17,830 ‫This whole new concept, whole to new concepts to blend animations together using a series of variables. 5 00:00:17,830 --> 00:00:19,270 ‫As you can see, I'm changing the variables. 6 00:00:19,270 --> 00:00:21,700 ‫It's changing the blend of animation. 7 00:00:21,700 --> 00:00:24,220 ‫Let's dive in and see how this works. 8 00:00:25,380 --> 00:00:27,690 ‫So we've got some semblance of animation here. 9 00:00:27,690 --> 00:00:30,030 ‫But obviously it's not dynamic. 10 00:00:30,030 --> 00:00:32,130 ‫It's not particularly interesting. 11 00:00:32,130 --> 00:00:38,670 ‫We need to be able to do animations that are far more complicated than this, and Unreal has many great 12 00:00:38,670 --> 00:00:45,750 ‫built in systems to do this, the main one being the animation blueprint, which is a blueprint, obviously. 13 00:00:45,750 --> 00:00:51,420 ‫So we're not going to be doing this in C++ because animations just make sense to be done in Blueprint. 14 00:00:51,660 --> 00:01:00,480 ‫And the main point of the animation blueprint is to bring together all that animation logic and allow 15 00:01:00,480 --> 00:01:08,640 ‫us to kind of blend and merge and switch between animations such that our game logic can then drive 16 00:01:08,640 --> 00:01:10,470 ‫that animation blueprint. 17 00:01:10,620 --> 00:01:15,150 ‫So without further ado, let's try and create an animation blueprint. 18 00:01:15,150 --> 00:01:20,520 ‫So in the content browser, either add new or right click, and we're going to go to animation and select 19 00:01:20,520 --> 00:01:27,780 ‫animation blueprint here and you'll see right off the bat is asking us to maybe have a parent class. 20 00:01:27,780 --> 00:01:28,830 ‫We don't need a parent class. 21 00:01:28,830 --> 00:01:30,060 ‫We can just use the default. 22 00:01:30,060 --> 00:01:38,640 ‫But it does need a skeleton because like the animations, like the skeletal meshes, they both rely 23 00:01:38,640 --> 00:01:39,600 ‫on the skeleton. 24 00:01:39,600 --> 00:01:44,880 ‫So does the animation blueprint, which means that then it can use all the animations of that skeleton 25 00:01:44,880 --> 00:01:48,390 ‫and it can be used on any of the meshes that relate to that skeleton. 26 00:01:48,930 --> 00:01:55,740 ‫Now, obviously, we want the Wraith skeleton here, so let's go ahead and select that and click, okay? 27 00:01:55,740 --> 00:02:00,720 ‫And that's going to go ahead and create an animation blueprint based off of the Wraith skeleton. 28 00:02:00,720 --> 00:02:09,150 ‫And then for naming convention, we start with a BP underscore and I'm going to call this the just shooter 29 00:02:09,150 --> 00:02:12,060 ‫character, basically, because we've got that different prefix. 30 00:02:12,060 --> 00:02:16,200 ‫I think it's clear enough it's the animation blueprint for the shoot of character. 31 00:02:16,200 --> 00:02:23,760 ‫So if we go ahead and open up that animation blueprint and dock it to our main window, then we're going 32 00:02:23,760 --> 00:02:29,880 ‫to see an animation blueprint editor, which in many ways looks similar to your usual blueprint editor. 33 00:02:29,880 --> 00:02:35,250 ‫It's got this main graph area in the middle, but in some ways it's different. 34 00:02:35,250 --> 00:02:37,680 ‫So we've got the graph area that's similar. 35 00:02:37,680 --> 00:02:39,870 ‫This is a slightly different graph to what we used to. 36 00:02:39,870 --> 00:02:41,010 ‫It's called the anim graph. 37 00:02:41,010 --> 00:02:44,610 ‫You can see there's also an event graph just like your regular blueprint. 38 00:02:44,610 --> 00:02:47,430 ‫They have an event graph, but there's also something called an anim graph. 39 00:02:47,430 --> 00:02:48,720 ‫We'll get to that in a second. 40 00:02:48,960 --> 00:02:53,670 ‫There's a details pane which gives you details about the animation blueprint. 41 00:02:53,670 --> 00:02:56,010 ‫So the class itself, you've got the details on that. 42 00:02:56,580 --> 00:02:59,490 ‫Notice, we don't have any components against an animation blueprint. 43 00:02:59,490 --> 00:03:01,890 ‫That's one difference to note already. 44 00:03:01,890 --> 00:03:08,430 ‫We've got this animate preview editor, which allows us to do some stuff with this preview window over 45 00:03:08,430 --> 00:03:08,670 ‫here. 46 00:03:08,670 --> 00:03:10,560 ‫Why they're not closer to each other by default. 47 00:03:10,560 --> 00:03:11,310 ‫I don't know. 48 00:03:11,940 --> 00:03:17,940 ‫Asset browser, just like on the animations allows us to look through animations easily bring them in 49 00:03:17,940 --> 00:03:26,190 ‫to our editor and here at the top right again, same as animations and meshes, we have this view that 50 00:03:26,190 --> 00:03:33,540 ‫allows us to quickly switch between the skeleton, the mesh and the animations and the blueprints that 51 00:03:33,540 --> 00:03:35,850 ‫all rely upon that same skeleton. 52 00:03:36,490 --> 00:03:42,010 ‫Then over in the bottom left, we've got that my blueprint pane, which is very much the same as my 53 00:03:42,010 --> 00:03:42,550 ‫blueprints. 54 00:03:42,550 --> 00:03:47,560 ‫On your standard blueprint, you've got your functions, your variables, macros, that sort of stuff 55 00:03:47,560 --> 00:03:48,300 ‫is the same. 56 00:03:48,310 --> 00:03:49,240 ‫What's different? 57 00:03:49,240 --> 00:03:50,470 ‫Oh yeah, we've got the graphs as well. 58 00:03:50,470 --> 00:03:51,250 ‫That's also the same. 59 00:03:51,250 --> 00:03:54,970 ‫But what's different is this animation graphs and animation layers. 60 00:03:54,970 --> 00:03:57,190 ‫Now we're not really going to touch upon animation layers. 61 00:03:57,190 --> 00:03:59,230 ‫That's a bit more of an advanced feature that we don't need. 62 00:03:59,230 --> 00:04:06,100 ‫But the graph, that is what is very important indeed, because the graph is kind of like blueprints, 63 00:04:06,130 --> 00:04:12,670 ‫except we have no execution node or we've got is the data that flows through the graph and what does 64 00:04:12,670 --> 00:04:13,570 ‫flow through the graph? 65 00:04:13,570 --> 00:04:19,180 ‫Well, basically, we're trying to get to this output pose this output animation pose that we should 66 00:04:19,180 --> 00:04:21,040 ‫model our character into. 67 00:04:21,370 --> 00:04:25,900 ‫And we do that by connecting up lots of different nodes to this result node. 68 00:04:25,900 --> 00:04:31,330 ‫And flowing through that, we end up getting the data that is our output. 69 00:04:31,720 --> 00:04:38,230 ‫One simple output that we can go with is, for example, just dragging in an animation into this anim 70 00:04:38,230 --> 00:04:44,350 ‫graph and you can see that it creates a node and it has an output pin, which is an animation pose. 71 00:04:44,350 --> 00:04:51,670 ‫And if we drag that pose onto the output pose and hit compile, you can see that it's just going to 72 00:04:51,670 --> 00:04:54,310 ‫show in our preview what this animation blueprint does. 73 00:04:54,310 --> 00:05:01,570 ‫It essentially just plays this ability animation, and that's pretty much what we're doing at the moment, 74 00:05:01,570 --> 00:05:05,800 ‫except now we've put an extra layer in between we're putting a blueprint in instead of just playing 75 00:05:05,800 --> 00:05:06,880 ‫the animation directly. 76 00:05:06,880 --> 00:05:13,810 ‫That's not particularly useful in and of itself, but the different kinds of operations we can do on 77 00:05:13,810 --> 00:05:14,560 ‫these poses. 78 00:05:14,560 --> 00:05:16,000 ‫Now that is useful. 79 00:05:16,000 --> 00:05:19,570 ‫If we right click in the anim graph, you can see there's a lot of stuff going on here. 80 00:05:19,750 --> 00:05:26,440 ‫I want to search for something called a blend and there's a few different things in here. 81 00:05:26,440 --> 00:05:30,580 ‫Let's see if I can find the most useful one we want at the top. 82 00:05:30,610 --> 00:05:36,430 ‫There is a few here, I think blend blend boned by channel, blend multi. 83 00:05:36,430 --> 00:05:38,800 ‫We want just the standard blend node. 84 00:05:38,800 --> 00:05:39,760 ‫Let's bring that in. 85 00:05:40,090 --> 00:05:45,580 ‫And you can see here we've got a value, we've got two input poses and one output pose. 86 00:05:45,580 --> 00:05:49,450 ‫So what we can do is we can drag in two different animations. 87 00:05:50,100 --> 00:05:52,040 ‫And we can stick that. 88 00:05:52,050 --> 00:05:53,490 ‫This one's an additive animation. 89 00:05:53,490 --> 00:05:54,540 ‫I don't want to bring that in. 90 00:05:54,540 --> 00:05:55,880 ‫That's going to confuse us. 91 00:05:55,890 --> 00:05:58,560 ‫Let's use some animations that we might actually use. 92 00:05:58,560 --> 00:06:01,920 ‫So we were looking at the forward movement. 93 00:06:01,920 --> 00:06:02,760 ‫We've got jog. 94 00:06:02,760 --> 00:06:06,030 ‫A jog might be more what we want rather than walking. 95 00:06:06,030 --> 00:06:09,360 ‫So let's have a little look at our jog forward. 96 00:06:09,360 --> 00:06:15,900 ‫That might be one thing that we can blend and then the other thing we could blend is a jog back. 97 00:06:15,900 --> 00:06:23,040 ‫So let's just look for jog and we've got jog, jog b, which I think is stands for Backwards, Forward, 98 00:06:23,040 --> 00:06:23,700 ‫Backwards. 99 00:06:23,970 --> 00:06:28,470 ‫Let's bring those into our blend node and then output them and see what the results are going to be. 100 00:06:28,470 --> 00:06:35,880 ‫When I hit compile, you can see I'm jogging forward if I stick my alpha over to one and then recompile. 101 00:06:35,880 --> 00:06:42,750 ‫You can see that now I'm jogging backwards and you can see also as the preview runs, you can see which 102 00:06:42,990 --> 00:06:48,480 ‫nodes which where the data is flowing basically from the jog backwards through the blend node and there's 103 00:06:48,480 --> 00:06:50,310 ‫nothing coming through that pin. 104 00:06:50,340 --> 00:06:53,430 ‫A because alpha blends between the two. 105 00:06:54,030 --> 00:07:00,720 ‫Now I can do a 0.5 on the alpha or anywhere in between, and that's going to try and play both of the 106 00:07:00,720 --> 00:07:03,840 ‫animations and layer them on top of each other, half of both them. 107 00:07:03,840 --> 00:07:09,330 ‫And obviously when you're dealing with jogging forward and backwards at the same time, that starts 108 00:07:09,330 --> 00:07:10,740 ‫to look a little bit funny, doesn't it? 109 00:07:10,740 --> 00:07:17,190 ‫So what I'm going to do here is I'm going to remove the jog backwards and put in an idle animation instead. 110 00:07:17,460 --> 00:07:19,530 ‫So where do we have idle? 111 00:07:21,620 --> 00:07:24,890 ‫I'm going to select this idle non-combat and bring that in here. 112 00:07:25,520 --> 00:07:31,200 ‫So that now what should happen is if we're at 50%, it's kind of doing this idle non-combat. 113 00:07:31,220 --> 00:07:34,880 ‫Half of that or half and then half of the jog. 114 00:07:34,880 --> 00:07:38,870 ‫Whereas if I put it at one, it's going to do 100%. 115 00:07:39,540 --> 00:07:40,200 ‫Idle. 116 00:07:41,250 --> 00:07:41,910 ‫Zero. 117 00:07:41,940 --> 00:07:44,040 ‫It's going to do 100% jog. 118 00:07:44,520 --> 00:07:47,280 ‫Now, this is not ideal. 119 00:07:47,280 --> 00:07:49,950 ‫The fact that I keep changing this alpha, having to hit recompile. 120 00:07:49,950 --> 00:07:53,490 ‫So what we can do is we can add in a variable to our blueprint. 121 00:07:53,490 --> 00:08:00,780 ‫It needs to be a float so we can go ahead and change the variable type in the details pane to float. 122 00:08:01,050 --> 00:08:05,730 ‫And I'm going to change this to blend amount. 123 00:08:06,870 --> 00:08:14,970 ‫So and then we can drag that in so we can drag in any variables from our blueprint into the anim graph 124 00:08:14,970 --> 00:08:18,630 ‫and hook it up to some of the pins hit compile. 125 00:08:18,630 --> 00:08:21,360 ‫And now we go back to our anim preview editor. 126 00:08:21,360 --> 00:08:23,100 ‫You can see that it's showing up. 127 00:08:23,100 --> 00:08:26,370 ‫These variables like that we've created over here the blend amount. 128 00:08:26,520 --> 00:08:35,160 ‫And that means that now if I can just shift that at runtime, I can see and preview what would be happening. 129 00:08:35,160 --> 00:08:40,470 ‫And then basically what's going to happen is our game is going to drive these variables in the animation 130 00:08:40,470 --> 00:08:46,830 ‫blueprint to get the right sort of animation at any particular point during playing. 131 00:08:46,860 --> 00:08:50,580 ‫That's what we're going to deal with a little bit later on in this section. 132 00:08:50,580 --> 00:08:56,070 ‫But for now, we're going to try and get this animation looking right when we have the right sort of 133 00:08:56,070 --> 00:08:57,480 ‫variables in here. 134 00:08:58,790 --> 00:09:00,610 ‫So it's time for a bit of a challenge. 135 00:09:00,620 --> 00:09:06,730 ‫See if you can get set up with an animation blueprint and play around with the anim graph. 136 00:09:06,740 --> 00:09:09,050 ‫So I'd like you to add another blend. 137 00:09:09,050 --> 00:09:11,000 ‫We're going to add them up in sequence. 138 00:09:11,000 --> 00:09:12,800 ‫So first you're going to do one blend. 139 00:09:12,800 --> 00:09:18,020 ‫It's output is going to go into the input of the next blend, then select an animation that makes sense, 140 00:09:18,020 --> 00:09:25,580 ‫such maybe as moving right or left and add some variables that also make sense so that you can tweak 141 00:09:25,580 --> 00:09:31,430 ‫them and look at the preview and you can blend between all of the animations, the idle, the moving 142 00:09:31,430 --> 00:09:36,140 ‫forward and your animation of choice, whether it's moving left or right, something like that. 143 00:09:36,320 --> 00:09:37,940 ‫Pause the video and have a go. 144 00:09:37,940 --> 00:09:41,690 ‫Just play with these blends, see if you can make sense of the anim graph. 145 00:09:43,170 --> 00:09:43,980 ‫Hey, welcome back. 146 00:09:44,010 --> 00:09:46,160 ‫So hopefully you've had a little go. 147 00:09:46,170 --> 00:09:48,960 ‫We're going to go and add in another blend node. 148 00:09:48,960 --> 00:09:51,630 ‫So search for blend and then scroll up. 149 00:09:51,630 --> 00:09:54,470 ‫For some reason this might be to do with my screen scaling. 150 00:09:54,480 --> 00:09:58,260 ‫Let's go to the blend and bring across that. 151 00:09:58,290 --> 00:10:00,270 ‫See these idle animations? 152 00:10:00,270 --> 00:10:01,140 ‫What do I want to do? 153 00:10:01,170 --> 00:10:05,460 ‫I think I want to have it move a left. 154 00:10:05,460 --> 00:10:14,160 ‫So I'm going to look in my asset browser for jogging and we're going to look for a jogging left animation. 155 00:10:14,310 --> 00:10:18,180 ‫Now, by the way, I do know that blends are not the ideal way to do this. 156 00:10:18,180 --> 00:10:23,820 ‫In the next lecture, we're going to look at a better way of doing this, which is going to be to use 157 00:10:23,820 --> 00:10:29,010 ‫something called a blend space, which automatically allows us to blend movement animations in a very 158 00:10:29,010 --> 00:10:29,730 ‫nice way. 159 00:10:29,730 --> 00:10:34,470 ‫But we're doing this just to get the idea of the anim graph before we dive into more complicated things. 160 00:10:34,740 --> 00:10:41,280 ‫So we're going to blend between, let's see, left and forward, I think. 161 00:10:42,170 --> 00:10:50,240 ‫So left here and we're going to copy, cut or move the forward over to be here. 162 00:10:50,870 --> 00:10:58,370 ‫And then we're going to patch that in the output of the blend into the input to the next blend, the 163 00:10:58,370 --> 00:10:59,930 ‫one that does idle or not. 164 00:11:00,260 --> 00:11:01,280 ‫Does this actually make sense? 165 00:11:01,280 --> 00:11:02,570 ‫Let's think about the variables. 166 00:11:02,570 --> 00:11:04,220 ‫What should the variables be called? 167 00:11:04,220 --> 00:11:09,560 ‫I'm going to have one which is called forward. 168 00:11:10,750 --> 00:11:18,100 ‫Just forward, that's quite simple and one which is called right or left because we're choosing a left 169 00:11:18,100 --> 00:11:18,910 ‫animation. 170 00:11:18,940 --> 00:11:20,170 ‫It's also going to be a float. 171 00:11:20,380 --> 00:11:26,440 ‫So one of the blends needs to choose between forward and not moving. 172 00:11:26,440 --> 00:11:32,110 ‫So that's going to be let's try and make that our first blend. 173 00:11:33,120 --> 00:11:42,000 ‫We will hook in the idol combat to a so that at zero alpha it is going to be not moving at one where 174 00:11:42,000 --> 00:11:42,990 ‫forward is one. 175 00:11:43,140 --> 00:11:45,990 ‫Let's hook up that forward variable to the alpha at one. 176 00:11:45,990 --> 00:11:52,620 ‫It's going to move forward and then we're going to bring that in to zero of moving left. 177 00:11:53,920 --> 00:12:01,690 ‫Hook that left variable up zero of moving left and at one of moving left were going to hook up at B 178 00:12:01,690 --> 00:12:03,760 ‫basically we're going to hook up the jog left. 179 00:12:04,060 --> 00:12:07,150 ‫So if we compile that, that's a little bit scatterbrained. 180 00:12:07,150 --> 00:12:08,530 ‫But hopefully you get the idea. 181 00:12:08,530 --> 00:12:15,400 ‫If we go over to the anim preview editor and we move forward, you can see that we start jogging, reset 182 00:12:15,400 --> 00:12:19,840 ‫that and if we move left, you can see that we start moving left. 183 00:12:20,080 --> 00:12:25,180 ‫And crucially, if we do both move left and start jogging. 184 00:12:26,180 --> 00:12:28,970 ‫We should see a blend, a little bit of both here. 185 00:12:28,970 --> 00:12:30,770 ‫We got that forward being blended. 186 00:12:30,770 --> 00:12:36,320 ‫If I need to have a little bit less of the left, 50% of the left, you can see I'm kind of moving. 187 00:12:36,320 --> 00:12:37,460 ‫It's a weird looking animation. 188 00:12:37,460 --> 00:12:44,270 ‫It's not blending it particularly well, but you can see that it's playing both the jog left and the 189 00:12:44,270 --> 00:12:45,530 ‫jog forward. 190 00:12:45,530 --> 00:12:50,660 ‫Now, as I said, we're going to leave these variables more or less intact, but we're going to change 191 00:12:50,660 --> 00:12:56,570 ‫the mechanism by which we actually do the blending to make more sense and use more of those animations 192 00:12:56,570 --> 00:13:01,700 ‫that we're seeing in the asset browser for jogging forward, jogging backwards, jogging left, etc.. 193 00:13:01,700 --> 00:13:03,650 ‫But that's all the subject of the next lecture. 194 00:13:03,650 --> 00:13:09,770 ‫This one we have covered more or less the animation blueprints and how the anim graph works and why 195 00:13:09,770 --> 00:13:11,450 ‫we have it there in the first place. 196 00:13:11,450 --> 00:13:14,540 ‫So I'll see you in the next lecture for more animations.