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?
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.idleis aPhaser.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/phaser@3.55.2/dist/phaser.js"></script>