Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda