Ask coding questions

← Back to all posts
Phaser.js Animation Issues.
AstrumDeorum (142)

Identical code should work.
If one piece of code should work, the other piece should work, because they're the same in function.
'Cept it doesn't always.
I don't even know what the problem actually is.

My sheet has 24 frames. 0-7 is the idle animation, 8-15 is the left animation, and 16-23 is the non-functional right animation.
You're gonna need to run it in a separate tab with the Inspect console open, because Replit just pulls a "Script Error" which doesn't tell you anything.
I only just started using Phaser (I have to use it for a school project), and I have no idea what the problem is.

The interesting thing is that I tried it with a variation with only 3 frames, and I had the same issue, with the right animation.

If you can help that'd be great, I'm racking my head trying to find out this problem and I'm getting nowhere.

Code:

this.anims.create({
    key: 'idle',
    frames: this.anims.generateFrameNumbers('Reimu', { start: 0, end: 7 }),
    frameRate: 17
  });

  this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('Reimu', { start: 8, end: 15 }),
    frameRate: 17,
    repeat: 0
  });

  this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('Reimu', { start: 16, end: 23 }),
    frameRate: 17,
    repeat: 0
  });



if (cursors.left.isDown) {
    player.setVelocityX(-160);
    //console.log(player.anims.getTotalFrames());
    player.anims.play('left', true);
  }
  else if (cursors.right.isDown) {
    player.setVelocityX(160);
    //console.log(player.anims.getTotalFrames());
    player.anims.play('right', true);
  }
  else {
    player.setVelocityX(0);
    //console.log(player.anims.getTotalFrames())
    player.anims.play('idle', true);
  }

Spritesheet: