Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

275
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!