Jump animation plays only one frame and it's incorrect

Phaser 3
1

I’m working on a platformer to expand my understanding of Phaser and I’ve run into an animation issue.

I started out using Arcade and importing my player sprites as a spritesheet, but as I progressed in the project, I then decided to switch to Matter (which I have not previously used) and importing my sprites as an atlas, which I created with TexturePacker.

I referenced this tutorial to convert my Arcade physics to Matter, if that’s relevant to the issue at all. I’m running the project locally with Node from the Phaser project template, if it helps.

It all seems to be working so far, except that my jump animation is not playing as expected. I have three anims currently: idle, run, and jump. Idle and run both work as expected, so it’s just the jump animation. It only seems to be playing the first one or two frames. I’ve looked over several tutorials for importing and animating with atlases and as far as I can tell, the anim declaration seems fine. Console logging the anim object shows that it has all the correct frames included, they’re just not playing.

EDIT: upon further inspection, it’s not playing any of the frames from the jump animation. It seems to be playing a different sprite or sprites from the atlas entirely. Console logging the anim create declaration shows the correct frames stored in the anim object, but logging the anims.play statement tells a different story entirely.
The declaration log:

declarationlog
declarationlog460×510 39.4 KB

The play statement log:
playlog
playlog436×572 12.4 KB

What might be causing this issue?

I’m including the most relevant code snippets and attaching the atlas png and json, but I have the complete source code available as a Drive folder here.

hero
hero1140×61 12.4 KB
hero.json (40.2 KB)

Anims declaration:

        this.scene.anims.create({

            key: 'idle',

            frames: this.scene.anims.generateFrameNames('hero', {prefix:'adventurer-idle-', suffix: '-1.3', start: 0, end: 3, zeroPad: 2}),

            frameRate: 3,

            repeat: -1

        });

        this.scene.anims.create({

            key: 'run',

            frames: this.scene.anims.generateFrameNames('hero', {prefix:'adventurer-run-', suffix: '-1.3', start: 0, end: 5, zeroPad: 2}),

            frameRate: 10,

            repeat: -1

        });

        this.jumpAnim = this.scene.anims.create({

            key: 'jump',

            frames: this.scene.anims.generateFrameNames('hero', {prefix:'adventurer-jump-', suffix: '-1.3', start: 0, end: 5, zeroPad: 2}),

            frameRate: 10,

            repeat: 0

        });

Animation in player-class update method:
const sprite = this.sprite;

        const velocity = sprite.body.velocity;

        const isOnGround = this.isTouching.ground;

        const isInAir = !isOnGround;

        const moveForce = 0.01;

        if (velocity.x > 2) sprite.setVelocityX(2);

        else if (velocity.x < -2) sprite.setVelocityX(-2);

        if (cursors.left.isDown && !cursors.right.isDown && isOnGround) {

            sprite.setFlipX(true);

            sprite.applyForce({ x: -moveForce, y: 0 });

            sprite.anims.play('run', true);

        } else if (cursors.right.isDown && !cursors.left.isDown && isOnGround) {

            sprite.setFlipX(false);

            sprite.applyForce({ x: moveForce, y: 0 });

            sprite.anims.play('run', true);

        } else {

            sprite.applyForce({ x: 0, y: 0 });

            sprite.anims.play('idle', true);

        }

//Jumping

        if (cursors.up.isDown && Phaser.Input.Keyboard.JustDown(cursors.up) && isOnGround) {

            sprite.setVelocityY(-11);

        }

        //set jump animation frames: play when sprite is in air

        if(isInAir) {

            sprite.anims.play('jump', true);

        }
2

Have you tried playing the animation separately, just to test?

this.add.sprite(0, 0, 'hero').play('jump');
3

I created a stripped-down scene with just the sprite and the animation, using Arcade, and it wouldn’t work until I set it up like this, and with this code I finally ran the animation properly:
import Phaser from “phaser”;

export default class TestGrounds extends Phaser.Scene {

    constructor(key) {

        super('TestGrounds');

    }

    create() {

        console.log("testGrounds is running");

        this.cursors = this.input.keyboard.createCursorKeys();

        this.hero = this.physics.add.sprite(300, 300, 'hero');

        console.log(this.hero);

        this.jumpAnim = this.anims.create({

            key: 'jump',

            frames: this.anims.generateFrameNames('hero', {prefix:'adventurer-jump-', suffix: '-1.3', start: 0, end: 5, zeroPad: 2}),

            frameRate: 10,

            repeat: -1

        });

        console.log(this.jumpAnim);

        this.addCollisions();

        this.jumpPlay = this.hero.anims.play('jump');

        console.log(this.jumpPlay);

    }

    update() {

        

    }

    addCollisions() {

        this.cameras.main.setBounds(0, 0, window.innerWidth, window.innerHeight);

        this.physics.world.setBounds(0, 0, window.innerWidth, window.innerHeight);

        this.hero.setCollideWorldBounds(true);

    }

}

When I tried to play the animation from update() I had the same issue of it not playing the animation, and when I tried this.add.sprite().play() as per your example, I got an error that said “animation missing”. I’d love to know what was going wrong here, especially since I will need to incorporate the animation back into my source code, would you happen to have any ideas?

EDIT: I tried adding in a simple controller and it works the way I want it to:
update() {

        if(this.cursors.up.isDown && Phaser.Input.Keyboard.JustDown(this.cursors.up)) {

            this.hero.setVelocityY(-300);

            this.anims.play('jump', this.hero);

        }

    }