In this blog, I will discuss how to create animations and use Unity's built in Mecanim system to drive the animations that we want. As mentioned from the previous blogs, we now have a Sprite sheet with sprites that are split up so that it can be used individually.
To add a flapping effect, I manually created animation using the sprites from the sprite sheet via the Animation window ( Window -> Animation ).
On the top left of this window with the player selected, you can click on it and choose Create New Clip to make a new animation file. Once created, you'll be able to look up the animation any time by clicking on the same top left area. To create the animation, I located the three relevant sprites of the bird in the sprite sheets and I simply dragged them onto the timeline area.
To create a looping animation, I had to make sure the first and the last frame is the same so that when the animation reaches the end and jumps back to frame 1, the exact same sprite is shown. The time in which the sprites are placed are determined by simply playing the animation and watching if the animation looks smooth or not. More formal planning can be used such as making sure animations run on 25FPS which means within the one second time line, you would equally space 25 sprite frames. Once this animation is completed, I create 3 more animations.
- Idle - An animation with just 2 frames
- Flap up - Similar to flap but with the addition that the sprite is animated upwards
- Flap down - Similar to flap but with the addition that the sprite is animated downwards
For the Flap up and Flap down animations, by clicking on the Add Curve button, I added a curve for Transform -> Rotation. Then for each sprite frame, I just made sure the rotation of the selected game object is rotated to reflect "up"(45 degrees Z axis) vs "down" (-45 degrees Z axis). The reason why I added two more animations is so that we can blend them to get a nice smooth transition of the bird looking up and it jumps and the bird looking down when it starts to fall.
Now in the Assets folder, I create an Animator Controller that will house and drive the animations that I've created. I opened up the Animator screen by double clicking on the Animator Controller. The Animator Controller allow us to easily transition between animation through code and also allow us to create animation trees more easily. I first drag the idle animation into the controller window. This creates an Idle animation state that the player sprite can go to as a default animation. The default animation state is always colored orange. The starting default state can be easily changed just by right clicking on the state that you want to be the default and selecting the "Set as default" option.
The next step is to create a blend tree. First, I want the speed of the bird to determine whether the bird will look up or down. Therefore, I create a parameter called speedY of type float that will dictate how the blend tree will blend.
Now, I create a new blend tree by right clicking on any place in the Animator window and selecting Create State -> From New Blend Tree. Double clicking it will make the Animator window go one layer in
On the right hand side you'll notice that the we can pick the parameter the blend tree uses as well as a list of animations to blend from (An empty blend tree will have an empty list). First, pick the speedY as the parameter, then click on the little plus sign right below the Motion category to add new motion fields.
Then drag the 3 flapping animations into each list making sure that order matters.
To link the idle animation to the blend tree, I create a transition simply by right clicking on the idle state and selecting "Make Transition". This creates a line that I can connect to the blend tree. I create a reverse one so that I can go back to the idle state. I created another parameter of type bool that is used as the transition parameter between the idle and the blend tree state.
With this, the animation is complete and we can use our game logic to drive the bird animations.
Next time, I will talk about the code involved to drive the animations.
No comments:
Post a Comment