I am trying to reset my animation back to frame 0 after finishing. For this I am using following code:

gameState.idle.play('wag', true).on('animationcomplete', () => {gameState.idle.pause(gameState.idle.currentAnim.frames[0])});

However when I try this I get the error

Uncaught TypeError: gameState.idle.frames is undefined

How can I fix this?

CodePudding user response：

If you just want to know, how to get the first frame of the current animation, you can (if the posted code is correct, and I interpreted it correctly):

gameState.idle.play('wag', true).on('animationcomplete', (currentAnim) => {
    gameState.idle.pause(currentAnim.frames[0])
});

this should work. here the link to the documentation, the explains the parameters of the event ANIMATION_COMPLETE. (https://photonstorm.github.io/phaser3-docs/Phaser.Animations.Events.html#event:ANIMATION_COMPLETE)

If you don't want to use the parameter passed to the events, you could use this code:

gameState.idle.play('wag', true).on('animationcomplete', () => {
    gameState.idle.pause(gameState.idle.anims.currentAnim.frames[0])
});

It also works, but not so easy to read.

under the asumption that gameState.idle is a Phaser.GameObjects.Sprite

Update(with code from jsfiddle from the comments):

the pause function is not a function of the Sprite object, it is a function of the Phaser.Animations.AnimationState properties of the Sprite:

const gameState = {
    gameWidth: 400,
    gameHeight: 200,
    menu: {},
    textStyle: { 
        fontFamily: "'Comic Sans MS'", fill: "#fff", 
        align: "center",
        boundsAlignH: "left", 
        boundsAlignV: "top", 
        wordWrap: true, wordWrapWidth: 300 }
};

function preload()
{
    //this.load.baseURL = 'assets/';
    //this.load.atlas('idle', 'idle.png', 'idle.json');
  // added Image from an official phaser example, for a working example
    this.load.spritesheet('idle', 'https://labs.phaser.io/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 });
        
}

function create()
{
    
    this.anims.create({
        key: "wag",
        frameRate: 8,
        frames: this.anims.generateFrameNumbers("idle", {
            start: 0, 
            end: 5}),
        repeat: 0,
    });
    gameState.idle = this.add.sprite(200, 100, "idle");
    gameState.idle.setInteractive({cursor: 'url("assets/pet.cur"), pointer'});
}

function update()
{
    let test = Math.floor(Math.random() * (50)   1);
    if (test == 50)
        gameState.idle.play('wag', true).on('animationcomplete', (currentAnim, frame, gameObject) =>{
    gameObject.anims.pause(currentAnim.frames[0]);
   });
}

var config = {
    backgroundColor: "0xf0f0f0",
    scale: {
        width: gameState.gameWidth,
        height: gameState.gameHeight,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: {
        preload, create, update
    }
};
var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>