I have a card game that animates the elements on the card after the flipping animation is done. It took me two weeks to figure out that I can’t simply do this:
var card = //a loaded sprite
var card1frames = game.anims.generateFrameNames(//etc...
var cardAnimationFrames = game.anims.generateFrameNames(//etc...
function dealCards(randomCard) {
game.anims.create({ key: 'cardflip', frames: card1frames, frameRate: 12, repeat: 0 })
game.anims.create({ key: 'cardanimation', frames: cardAnimationFrames, frameRate: 12, repeat: -1 })
card.anims.play('cardflip')
card.once('animationcomplete', () => {
card.anims.play('cardanimation')
game.anims.remove('cardflip')
}
}
If I do this, the card flips, and then plays the animation once, but if I call dealCards() again, even though it receives a new card, it will always play the card animation for the last card. It will never change. I have to do this:
function dealCards(randomCard) {
card.anims.remove('cardflip') //Note the use of the sprite name card instead of game.
game.anims.create({ key: 'cardflip', frames: card1frames, frameRate: 12, repeat: 0 })
game.anims.create({ key: 'cardanimation', frames: cardAnimationFrames, frameRate: 12, repeat: -1 })
card.anims.play('cardflip')
card.once('animationcomplete', () => {
card.anims.play('cardanimation')
game.anims.remove('cardflip') //Note the use of game instead of the sprite name.
}
}
If I remove the cardflip animation with the sprite name card, then weird errors occur. What I want to know is why does removing by the canvas name of the last animation played not actually remove the sprite? Why does it get stuck? If I don’t add a second animation (to animate the card elements), then nothing bad ever happens. The correct card always flips up.
And why does calling remove on the sprite itself work? Why do I have to call it on the sprite?
I can clarify if this is unclear.
).
