Phaser animation doesn't work on touch screen devices. (works fine on desktop)-CodePudding

I have these animations in my phaser.js game:

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
    });

Only the animation with key downUp works fine across all devices, it's the only one where the sprite just moves it's arm and doesn't go from one side to the other. Animations with keys catchingUp and catchingDown cause a black rectangle appear on the screen instead of my sprite; on phones and tablets, despite working fine on laptop. I thought the problem was animations themselves, because character skips several frames, so I've made another animation topTop, same problem. Then i thought to put all the animations in one spritesheet , but that only caused all of them to be a black triangle, including 'downUp' animation which on it's own worked fine.

I've seen someone else asking similar question here and they were advised to use this.anims.generateFrameNames instead of this.anims.generateFrameNumbers, so i did that. Same, worked fine on desktop, black triangle everywhere else.

Before, when I used non animated images, instead of animations, it worked fine across all devices.

The game in it's current state can be found at https://chylinski82.github.io/androidCoop/ and all the code on https://github.com/chylinski82/androidCoop, the animations are in Level.js and they're called from basketUpRight.js, basketUpLeft.js, basketDownRight.js, basketDownLeft.js.

CodePudding user response：

The problem seems to be the width of your sprite. If you split your sprite into multiple line lets say 4 line, the dimensions would be 2400 x 1000 instead of 9000 x 250 and this works on android(btw width of 4500, also doesn't work).
(I could not test it on iphoneOs, but I asume this is the same issue)

I couldn't findout (yet), what the exact width limit is, but I know that there is a some problems width sprites, that have a large width.

Update: I just tested it on Android 12, width and height it is both limited for sprite animations at 4096px, just tested it.