Part 5 Add Fly Animation
Open the main.js file, and let's start coding!
The bird is moving up and down in a quite boring way. Let's improve this by adding some animations, and make it move like in the original game:
The bird is moving up and down in a quite boring way. Let's improve this by adding some animations, and make it move like in the original game:
- Always slowly rotate the bird downward, up to a certain point.
- When the bird jumps, rotate it upward.
For the second one, we could simply add this.bird.angle = -20; in the jump() function. However, changing instantly the angle will look weird. Instead, we are going to make the bird change it's angle over a short period of time. We can do so by creating an animation in the jump() function.
// Create an animation on the bird
var animation = game.add.tween(this.bird); // Set the animation to change the angle of the sprite to -20° in 100 milliseconds animation.to({angle: -20}, 100); // And start the animation animation.start(); |
What we need to do is change the center of rotation of the bird, called "anchor". So we add this line of code in the create() function.
If you test the game now, the animation should look a lot better.