The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Sprite Animation Basics

Next ►
►

Sprite animation is a fundamental technique in 2D game development, allowing you to bring characters and objects to life by displaying a sequence of images (frames) in rapid succession. In Phaser, sprite animation is straightforward and powerful, making it easy to create smooth, engaging visuals for your games.

  1. What is Sprite Animation?

Sprite animation involves:

  • Using a series of images (frames) that represent different states or poses of a character or object.
  • Displaying these frames in order to create the illusion of movement.

Key Concepts:

  • Sprite Sheet: A single image file containing multiple frames of animation.
  • Frame: An individual image within a sprite sheet.
  • Animation: A sequence of frames played in order.

  1. Loading Sprite Sheets in Phaser

Before you can animate a sprite, you need to load its sprite sheet.

Example: Loading a Sprite Sheet

// In your scene's preload() method
this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 32,
    frameHeight: 48
});

Explanation:

  • 'player': The key to reference this sprite sheet later.
  • 'assets/player.png': Path to the sprite sheet image.
  • frameWidth and frameHeight: The size of each frame in the sprite sheet.

  1. Creating Animations

After loading the sprite sheet, define animations using this.anims.create().

Example: Creating a Walk Animation

// In your scene's create() method
this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

Explanation:

  • key: Name of the animation ('walk').
  • frames: Frames to use (from frame 0 to 3).
  • frameRate: How many frames per second (10 FPS).
  • repeat: -1 means the animation will loop forever.

  1. Playing Animations on Sprites

To play an animation, call the anims.play() method on a sprite.

Example: Adding a Sprite and Playing an Animation

// Add the sprite to the scene
const player = this.add.sprite(100, 100, 'player');

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

Explanation:

  • The sprite is placed at position (100, 100).
  • The 'walk' animation starts playing on the sprite.

  1. Controlling Animations

You can control animations with various methods:

Method Description
anims.play(key) Starts playing the specified animation
anims.stop() Stops the current animation
anims.pause() Pauses the animation
anims.resume() Resumes a paused animation
anims.isPlaying Boolean: Is an animation currently playing?

Example: Stopping an Animation

player.anims.stop();

  1. Practical Example: Walking Character

Let's put it all together in a simple scene.

class MyGameScene extends Phaser.Scene {
    preload() {
        this.load.spritesheet('player', 'assets/player.png', {
            frameWidth: 32,
            frameHeight: 48
        });
    }

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

        this.player = this.add.sprite(100, 100, 'player');
        this.player.anims.play('walk');
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: MyGameScene
};

const game = new Phaser.Game(config);

Explanation:

  • Loads a sprite sheet.
  • Creates a looping 'walk' animation.
  • Adds a sprite and plays the animation.

  1. Exercise: Create a Jump Animation

Task:
Suppose your sprite sheet has frames 4 to 7 representing a jump.

  • Create a 'jump' animation.
  • Play the 'jump' animation when the spacebar is pressed.

Starter Code:

// In create()
this.anims.create({
    key: 'jump',
    frames: this.anims.generateFrameNumbers('player', { start: 4, end: 7 }),
    frameRate: 10,
    repeat: 0
});

this.input.keyboard.on('keydown-SPACE', () => {
    this.player.anims.play('jump');
});

Solution Explanation:

  • The 'jump' animation uses frames 4 to 7 and does not loop (repeat: 0).
  • When the spacebar is pressed, the 'jump' animation plays.

Common Mistake:
Forgetting to set repeat: 0 will cause the jump animation to loop, which is usually not desired for a jump.

  1. Summary

  • Sprite animation in Phaser uses sprite sheets and frame sequences.
  • Load sprite sheets in preload(), create animations in create(), and play them on sprites.
  • Animations can be controlled (play, stop, pause, resume) programmatically.
  • Practice by creating and triggering different animations for your game characters.

Next Steps:
In the next section, you'll learn how to manage multiple sprites efficiently using sprite groups and advanced management techniques.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved