Animation using discontinuous splittes (Phaser3)

Things I want to do
Example of use
implementation
Result
Websites I used as references

Things I want to do

When animating a character in Phaser3, you create the animation from a sequence of Splits (in the example below, Splits 0-3 of dude) as follows:

    this.anims.create({////左移動時のアニメーション
        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-contiguous splites.

Here, we create an animation using non-contiguous Splites.

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

Example of use

The Phaser3 tutorial mentioned above uses the following Splite model:

The animation for walking to the left is represented by 0-3, so the animation is created by repeatedly displaying the four images on the left side.

The problem here is that the first and third images are the same.

I want to use the following sprite with the duplicate image removed, but when I specify start: 0, end: 2, the image of the right foot appears after the left foot, which makes the animation look strange.

The display should repeat 0, 1, 0, 2 here.

implementation

Change `start: 0, end: 3` to `frames:` as shown below, and set the frame to be used.

In the usage example…[ 0, 1, 0, 2]I will change it to this.

    this.anims.create({////左移動時のアニメーション
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { frames: [ 0, 1, 0, 2] }),
        frameRate: 10,
        repeat: -1
    });

Result

I was able to create an animation using discontinuous sprites.

Websites I used as references

AnimationState

Phaser.Animations.AnimationState