How do Phaser animations work in a class?

[zync09]

Hi all,

I'm really stuck trying to make heads or tails out of Phaser animations. So here is my play class.

I've created an animation called shiproll and there are 3 frames in it. I'm just trying to play the animation but it's just not working. Also I'm not sure if this is the best way to do it too as my code seems a little verbose. Can anyone help please?

 

import Phaser, { Input, Scene, Math } from 'phaser'

export default class PlayerShip extends Phaser.Physics.Arcade.Sprite {

    playerSpeed : number = 3;
    scene : Scene;

    constructor(scene : Scene, x : number, y : number) {
        super(scene, x, y, 'shooter_graphics', 'PlayerRed_Frame_01')

        scene.add.existing(this)
        scene.physics.add.existing(this)
        this.setScale(.5)
        
        scene.anims.create({
            key: 'shiproll',
            frames: scene.anims.generateFrameNames('shooter_graphics', {
                start: 1,
                end: 3,
                prefix: 'PlayerRed_Frame_0'
            }),
        })
    }

    preUpdate() {
        this.playerControl()
    }

    private playerControl() {

        if (Input.Keyboard.JustDown(this.scene.input.keyboard.addKey('SPACE'))) {
            this.scene.events.emit("PLAYER_SHOOT")
        }

        if (Input.Keyboard.JustDown(this.scene.input.keyboard.addKey('A'))) {
            this.flipX = false;
            this.anims.play('shiproll')            
        }
        if (Input.Keyboard.JustUp(this.scene.input.keyboard.addKey('A'))) {
            this.flipX = false;
            this.anims.playReverse('shiproll')
        }

        if (Input.Keyboard.JustDown(this.scene.input.keyboard.addKey('D'))) {
            this.flipX = true;
            this.anims.play('shiproll')
        }
        if (Input.Keyboard.JustUp(this.scene.input.keyboard.addKey('D'))) {
            this.flipX = true;
            this.anims.playReverse('shiproll')
        }

        if (this.scene.input.keyboard.addKey('A').isDown) {
            this.x -= this.playerSpeed
        }
        if (this.scene.input.keyboard.addKey('D').isDown) {
            this.x += this.playerSpeed
        }

        this.x = Math.Clamp(this.x, this.width / 2, 800 - this.width / 2)
    }
}