Skip to Content
Learn
Learn Phaser: Animations and Tweens
Introduction to Animations and Tweens in Phaser

A static image can only convey so much information. Imagine using a static image for a Sprite and moving it around the game. Will players really get a sense of when it’s walking? or running? Does it stay the same when it’s jumping? Maybe just standing idly by waiting for the player to take control? Instead, we can opt to use animations to distinguish between the many actions our Sprites can do.

In this lesson, we’ll learn how to take a sprite sheet (a single image file that has a Sprite in different poses) and animate it using Phaser. We’ll also introduce another visual tool, tweens, into our games. We’ll take this newfound knowledge and add another dimension to how sprites look, move, and interact inside our Phaser games.

The game we’re developing here is a simple platformer that will help us visualize animations and tweens. As the game develops, you’ll notice we provide for you additional code that builds out the game. When you see our provided code, take some time to read through the comments and refresh yourself on what the code is doing — after all, it’s all concepts we’ve gone over before!

Now, let’s breathe some life into our sprites!

Instructions

Use your left and right arrow keys to control Codey and observe how animations correspond to a sprite sheet!

Here’s the link if you want to see the actual sprite sheet.

Folder Icon

Take this course for free

Already have an account?