Performance Issue on low end mobile devices

[rahul-shrimali]

• 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, https://www.gsmarena.com/samsung_galaxy_m04-12022.php), 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.

[photonstorm]

Doubt it's anything to do with the animations or tweens. Far more likely a hardware constraint. What resolution is your game running in? What resolution are the textures being animated? That is where you should look first with all performance issues.

[rahul-shrimali]

It is currently running on 720 resolution, I also tried to run in 480 resolution but it didn't help

[photonstorm]

Let me try again - what's the exact size you have configured the canvas to be in your game config? It makes a massive difference.

[rahul-shrimali]

width of game is 720, and the height is 1240.16. Moreover this is the config of the game -
const config: Types.Core.GameConfig = { type: Phaser.AUTO, parent: "game-container", width: GameWidth, height: getGameHeight(), scene: [GameScene], antialias: true, antialiasGL: true, roundPixels: true, scale: { mode: Phaser.Scale.ScaleModes.WIDTH_CONTROLS_HEIGHT, autoCenter: Phaser.Scale.CENTER_BOTH, }, fps: { target: 30, }, };
In this gamewidth is a constant which is 720, and height is calculated using some game logic it comes 1240.16 for this particular mobile device.