In my phaser.js game, I have a variety of animations set up:
this.anims.create({
key: 'catchingUp',
frames: this.anims.generateFrameNumbers('android', { start: 0, end: 4}),
frameRate: this.frameSpeed * 6,
repeat: 0
});
this.anims.create({
key: 'catchingDown',
frames: this.anims.generateFrameNumbers('android', { start: 5, end: 9}),
frameRate: this.frameSpeed * 6,
repeat: 0
});
this.anims.create({
key: 'topTop',
frames: this.anims.generateFrameNames('androidTopTop', { start: 0, end: 9}),
frameRate: this.frameSpeed * 6,
repeat: 0
});
this.anims.create({
key: 'downUp',
frames: this.anims.generateFrameNumbers('androidUpDown', { start: 0, end: 4}),
frameRate: this.frameSpeed * 6,
repeat: 0
});
Out of all the animations, only the one with the key downUp functions properly on every device. This animation shows the sprite moving its arm without crossing to the other side. However, when it comes to animations with keys catchingUp and catchingDown, instead of displaying the sprite, a black rectangle appears on phones and tablets while working correctly on a laptop.
I initially thought that the issue lied within the animations themselves as the character was skipping frames. To resolve this, I created another animation called topTop but encountered the same problem. Further attempting to combine all the animations into one spritesheet resulted in all animations appearing as black triangles, including the previously functioning 'downUp' animation.
I came across a similar query where someone suggested using this.anims.generateFrameNames instead of this.anims.generateFrameNumbers. Despite implementing this change, the outcome remained consistent - functional on desktop but displayed as black triangles on other devices.
Prior to utilizing animated images, the game functioned seamlessly across all devices.
You can access the current state of the game at , and all the code can be found on https://github.com/chylinski82/androidCoop. The animations are located in Level.js and are triggered by basketUpRight.js, basketUpLeft.js, basketDownRight.js, basketDownLeft.js.