What's up Game Developers? CouchFerret here, and today we'll continue our archery game with top down character movement. We'll update our sprite sheet with 6 directional running animation, we'll create animation transitions with a blend tree, and also continue our movement script. If it sounds fun, then stay with me, and consider subscribing so you won't miss any future videos of this game. Cool, let's begin! Let's start with a brief explanation of input and movement handling in Unity. A 2-dimensional coordinate system is the easiest way to demonstrate our movement direction. The horizontal or X axis represents our horizontal movement when we press left or right, the vertical or Y axis represents our vertical movement when we press up or down. The red dot shows our current movement direction. If no arrow keys are pressed, then the red dot stays in the middle or origin (0,0) of the coordinate system. It's a special case because it has no direction but also no magnitude meaning there is no movement. When we press the Right arrow key, then the red dot moves to the right (1,0) showing we are moving to Right. If we also press Up while pressing Right, then our red dot moves to the top-right corner (1,1) of the system, representing our movement direction. If we take this (1,1) movement vector and add it to Keith's position vector, then he will move slightly up and right just as the red dot did when we started pressing buttons. We will create this movement vector by accessing both Input.GetAxis("Horizontal") and Input.GetAxis("Vertical"). When the opposite keys are pressed, down and left, then (-1,-1) will be this vector. But first, let's prepare the new Animations. From the last video, we had a simple sprite with the Left and Right directions in it. The easiest thing to do is to overwrite the existing sprite with an extended sprite which contains the new directions. I'm using Aseprite, a fully featured pixel art editor, so I'm going to open it up. I need to export out a sprite sheet from the animation and overwrite the old one. We have to slice it again, to use the new frames in it. Let's select the Sprite Sheet in the Project window, and go to the Inspector window then click on Sprite Editor. Slicing the sprite sheet again will delete previous slices. Let's click on Slice, then slice it by cell size with 30x30. Hitting apply will cause new slices to appear. Now, we can create the new animations. Let's select Keith and open up the Animation window. We can create an animation by clicking Create new clip, and let's name it RunLeftDown. We need to change the sample rate to 12, and drag and drop the slices from 12 to 17. By repeating the same things for RunRightDown, RunLeftUp and RunRightUp we'll get all the animations. Let's prepare for our new Animator Controller by removing the existing transitions and run states. Instead of making the states and transitions ourselves, we'll use a blend tree to transition one running animation to another. Let's see what Unity's documentation says about Blend Trees! Blend Trees are used for allowing multiple animations to be blended smoothly by incorporating parts of them all to varying degrees. The amount that each of the motions contributes to the final effect is controlled by a blending parameter, which is just one of the numeric animation parameters associated with the Animator Controller. In order for the blended motion to make sense, the motions that are blended must be of similar nature and timing. Blend Trees are a special type of state in an Animation State Machine. The documentation refers to cases where bone based animations are used. In our project we're using sprite based animations, so there are no bones, but a Blend Tree still could save a lot of time for us. When using sprite animations, the animation which contributes the most to the final effect will be played, and replaced if another animation reaches a higher value. To grasp the idea I'll show you how it works on a 1-dimensional blend tree. Let's right click on the Animator window, and hit Create State/From New Blend Tree. Let's rename it to Run and double click it. Okay, we're one level deeper now, and we can see our Blend Tree. We need to click it and set its Blend Type to 1D. First, we will only add RunLeft and RunRight as Motion Fields by clicking the plus icon, Add Motion Field and selecting the right animation. After we have done that, a diagram will show up in the Inspector window. It shows the influence of each of the motions as the parameter with the red dot varies between its minimum and maximum values. Whichever motion has the higher influence will be played. If we press the Play icon in the Preview at the bottom of the Inspector and start dragging the red bar in the diagram left and right, we can see how the value of the parameter is switching between different motions. The switch happens right in the middle. The 2 dimensional version is not much more difficult, basically a 2D coordinate system with points in it. Before changing anything we have to add a second Animation Parameter named Vertical. Now we can move forward with the Blend Tree. Let's remove the two fields, set its type to "2D Simple Directional" and add all the animations we have in a counter clockwise order from RunRight. Now there are a bunch of blue points and one red dot. Each blue point represents a motion and a motion becomes dominant when the red dot is in a similar direction measured from the middle. We need to set the second parameter to Vertical, and by roughly moving the blue points to their position we can try it out with the Play button. Moving around the red dot, which represents both Horizontal and Vertical values, we can see that the Blend Tree is playing the desired animation. To be precise, we have to change the rough values to 0 and 1 or 0.5 and 0.866 with the corresponding signs. This gives us a nice hexagon. Cool, we're almost done! To save a few transition conditions, let's create a Magnitude animation parameter. It'll be the absolute volume or speed of the current movement, specifically the length of the movement vector. We can use this to transition to the Run state if it's greater than 0, and transition back if it's 0. Isn't it easy? Let's do it! We have to go back to the Base Layer and create a transition from Idle to Run, and uncheck Has Exit Time and Fixed duration, and also set Transition Duration to 0. We need to set one condition with Magnitude greater than 0. To transition back to the Idle state, we have to make a transition with Magnitude less than 0.001. I said equal to 0 previously, but there is no equality operator with float animation parameters. And don't forget to uncheck Has Exit Time and Fixed duration, and also set Transition Duration to 0. Now, It's time to do some coding. Let's open up our previous movement script, rename horizontalAxis variable to movement, and move it up a bit. We need to change the second zero to Input.GetAxis("Vertical"). Then, let's set our animation parameters but this time with the movement variable's components. Horizontal is movement.x, Vertical is movement.y and Magnitude is movement.magnitude. We have to save it and it's ready to test. Looks good! Nice! Just a little note: We could have done this without blend trees, but it would be more complex with a lot of transitions, and most importantly the transitions wouldn't be in sync. Synced in a way that if a transition occurs then the next animation will continue with the following frame where the previous animation left off and not at the first frame. That's it for today folks! Next Saturday, we will continue with pixel art running animation in Aseprite. I'll show you how to draw and animate the archer. So be sure to subscribe and leave a thumbs up! If you have any questions from today, feel free to ask and I'll try to answer all of them. See you next time!
