Performance Issues in Low end mobile devices

Phaser 3
1
  • Phaser Version: 3.87
  • Operating system: Android
  • Browser: Chrome webview

Description

I’m using Phaser 3 to create a board game that runs on Android’s Chrome Web View. On low-end mobile devices (I’ve been testing on a Samsung Galaxy M04, Samsung Galaxy M04 - Full phone specifications), I’m experiencing a specific performance problem with an animation. At times, the animations feel laggy/jerky. According to my observations, one of the instances is when one of my animations jerks is when several animations are playing simultaneously. Other animations playing simultaneously include change in textures of some images, some graphics running, and a tween chain.

I am using Phaser.Auto (which in turn uses WebGL) as it seemed more smooth to me as compared to CANVAS.

Tried many config changes, optimisations like (autoRound, altialias) but nothing seems to work for me. (there were some improvements with reducing asset sizes and setting fps target to 30 fps but still I can feel jerk in some cases)

The animation which particularly feel jerky is -

scene.tweens.add({
    targets: target,
    props: {
      x: {
        value: positions[positions.length - 1].x,
        duration: animationTime * positions.length,
      },
      y: {
        value: target.y - gridBlockWidth / 8,
        yoyo: true,
        duration: animationTime / 2,
        repeat: positions.length - 1,
        ease: "Cubic.easeInOut",
      },
    },
    onComplete: () => {
      callback();
      animation.stop();
      animation.destroy();
    },
  });

where positions is an array containing x and y position of target.
I also tried using tween chain instead of yoyo for y animation but it feels more laggy than this one.

Any help would be deeply appreciated.

2

:wave:

Playing a lot of tweens simultaneously shouldn’t be a problem even on low-end devices. But maybe there’s another performance drag happening at the same time that’s making the tween look bad — changing textures during an animation?

You could try recording a performance timeline in Chrome or use the Phaser + SpectorJS debug build.