Animation with discontinuous sprites(Phaser3)

Table of contents

The purpose
Example
Implementation
Result
Reference

The purpose

When animating a character in Phaser3, you create the animation from consecutive sprites (in the example below, dude 0-3).

    this.anims.create({////animation for move to left
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });

However, there are times when you want to use non-consecutive splits.

Here, we’ll create an animation using non-consecutive splits.

For details on the tutorial above, please refer to the article below.

Example

The Phaser 3 tutorial mentioned above uses the following sprites:

The walk-left animation uses sprites 0-3, cycling through these four images on the left to create the animation.

The problem is that the first and third images are identical.

I want to use the sprites below, with the duplicate image removed, but specifying start: 0, end: 2 results in the animation displaying the right leg forward after the left leg forward, which looks unnatural.

Here, it should repeatedly display 0, 1, 0, 2.

Implementation

Change start: 0, end: 3 to frames: as shown below to specify the frames to use.

The example usage will be changed to [0, 1, 0, 2].

    this.anims.create({////animation for move to left
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { frames: [ 0, 1, 0, 2] }),
        frameRate: 10,
        repeat: -1
    });

Result

We are able to create an animation with discontinuous splits.

Reference

generateFrameNumbers - Phaser 3 API Documentation