Phaser Animations — Sprite and Tween Animation System

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Phaser Animations. We cover key concepts, practical examples, and best practices to help you master this topic.

Phaser animation system supports both sprite-sheet frame animations and property tweening for smooth character movement and effects.

What You'll Learn

By the end of this guide, you will create sprite animations from spritesheets, control playback with play/stop/pause, use tweens for movement and scaling, build animation state machines for characters, and create timeline sequences.

Sprite Animation

// Create animation in create()
this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 7 }),
    frameRate: 10,
    repeat: -1
});

// Play animation
player.play('walk');

Tween Animation

this.tweens.add({
    targets: sprite,
    x: 500,
    y: 300,
    alpha: 0.5,
    scaleX: 1.5,
    duration: 1000,
    ease: 'Power2',
    yoyo: true,
    repeat: -1
});

Animation State Machine

var states = {
    idle: 'char_idle',
    walk: 'char_walk',
    jump: 'char_jump'
};

function changeState(newState) {
    if (currentState === newState) return;
    currentState = newState;
    player.play(states[newState]);
}

// In update:
if (cursors.left.isDown) {
    changeState('walk');
    player.setFlipX(true);
} else {
    changeState('idle');
}

Animation Events

player.on('animationcomplete', function(animation) {
    if (animation.key === 'jump') {
        this.play('idle');
    }
});

Common Mistakes

1. Animations Not Created Before Play

Animations must be created once (usually in create) before calling play. Calling play with an unregistered key does nothing.

2. Frame Rate Too High

Frame rate above 15 for detailed animations looks choppy or skips frames. Use 8-12 for walk cycles.

3. Missing repeat on Walk

Walk cycles should have repeat: -1 (infinite). Single-shot animations should have repeat: 0.

4. Tween Target Mismatch

Tween targets can be a single object, array, or a string key. Verify the target exists.

5. Not Using setFlipX

Characters facing left need setFlipX(true). Combining flip with animation works seamlessly.

Practice Questions

Q1: How do you create a sprite animation? A: Use this.anims.create with a key, frames from generateFrameNumbers, and frameRate.

Q2: How do you make a walk cycle loop? A: Set repeat: -1 in the animation config.

Q3: How do you create a tween? A: Use this.tweens.add({ targets, props, duration, ease }).

Q4: How do you detect when an animation ends? A: Listen to the 'animationcomplete' event on the sprite.

Q5: How do you flip a sprite horizontally? A: Call sprite.setFlipX(true).

Challenge: Build a character with idle, walk, jump, and attack animations. Use keyboard keys to switch between states. The character should face the direction of movement.

FAQ

Can I create animations at runtime?

Yes. Call this.anims.create any time. Existing animations with the same key are replaced.

How do I slow down an animation?

Reduce the frameRate or add timeScale: 0.5 to the sprite.

Can I chain tweens?

Yes. Use onComplete to start the next tween, or use a timeline.

What easing options are available?

Power2, Power3, Elastic, Bounce, Back, Linear, etc. Set ease: 'Bounce.easeInOut'.

Can I animate a group of objects?

Yes. Pass an array of targets or use a Phaser.Group.

Try It Yourself

Create a bouncing ball with tweens.

<!DOCTYPE html>
<html>
<head>
    <title>Phaser Animations</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Animation Demo</h2>
<script>
var config = {
    type: Phaser.AUTO,
    width: 600,
    height: 400,
    backgroundColor: '#1a1a2e',
    scene: {
        create: function() {
            var ball = this.add.circle(100, 200, 30, 0x4ecdc4);

            this.tweens.add({
                targets: ball,
                x: 500,
                duration: 1500,
                ease: 'Sine.easeInOut',
                yoyo: true,
                repeat: -1,
                hold: 200
            });

            this.tweens.add({
                targets: ball,
                scaleX: 1.3,
                scaleY: 0.7,
                duration: 300,
                ease: 'Sine.easeIn',
                yoyo: true,
                repeat: -1,
                hold: 100
            });

            this.add.text(300, 30, 'Bouncing Ball', {
                fontSize: '24px', fill: '#4ecdc4'
            }).setOrigin(0.5);
        }
    }
};

var game = new Phaser.Game(config);
</script>
</body>
</html>

What's Next

Use groups for object management.

Groups — Display groups and pooling. Cameras — Camera system.

← Previous Phaser Loading Assets — Managing Game Resources Next → Phaser Groups — Managing Multiple Game Objects

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Phaser