Phaser game runs very slowly on iOS

[Dolan]

I finished making my game with Phaser, and it works very well on Google Chrome, and Safari, and Firefox on Desktop. But it shocked me on how slow it runs on Safari on iOS!

Why is this? My game is an incredibly simple game, it does not make sense to me.

Game:

https://dolanmiu.github.io/flappy-bird-client/

Source code:

https://github.com/dolanmiu/flappy-bird-client

 

Thanks!

[tidelake]

Have you looked into cocoon.io's Canvas+ ?

[Dolan]

1 minute ago, tidelake said:

Have you looked into cocoon.io's Canvas+ ?

No, I just want it to run on the iOS browser

On coccons website, it says:

Quote

Cocoon provides all the tools and services to build awesome native HTML5 apps

I'm not looking to create a dedicated app at this time! (But will do maybe)

[mattstyles]

You might be blown away by the specs on modern phones but don't underestimate how under-powered they are, we often grow accustomed to the unbridled power we are used to in modern desktops/laptops which allows us to happily phone really inefficient code and JS is inherently inefficient.

If this was a Phaser specific issue then we wouldn't be seeing loads of Phaser games working great on iOS, so, ask yourself, what else is different in your project? TS is a smell straight away, do you know what all the transpiled code looks like? What happens with privacy? Does the runtime ignore this or does the transpile privatise these into closures? If so, that can be particularly inefficient and there can be a difference between how V8 and Nitro handles different code. Having said that I did have a quick peek through your code and didn't see anything untoward, although I hardly looked, maybe you know some areas where you might have slipped into some loops that could be candidates for refactoring or something else, to be honest, get profiling on the device and looking where your bottle necks are.

Also, I'm not sure how the whole multiplayer stuff happens and whether there could be something slowing you up there moving from desktop to mobile. Sounds like a long shot to me but maybe worth having a look at.

But yeah, get profiling and finding those bottle necks. There are many browser based flappy web clones that work fine on iOS, pretty sure I saw a Phaser one posted somewhere round here a while back, so the slowness is presumably not inherent in Phaser and there's probably just a function or two that is being flattered by the power of modern desk/laptops or by Chrome.

[Dolan]

Thank you for your detailed response!

I will use profilers to see anything suspicious 

[Dolan]

Nothing suspicious about the heap, CPU right? Nodes stay constant at 296

[Tom Atom]

Hi, your game is using TileSprite - it is very slow on iOS. Try to run game without it and see if performance improved.

Edit: hmmm, I also see, you are not using sprite atlases. iOS devices are pretty powerfull (compared to some low level Adrdoid devices), but using atlases is "industry standard". It is to minimize draw calls. But still, TileSprite is main troublemaker from my point of view.

[Dolan]

8 hours ago, Tom Atom said:

Hi, your game is using TileSprite - it is very slow on iOS. Try to run game without it and see if performance improved.

What should I use instead of TileSprite? I need TileSprite to repeat the floor and the background!

Quote

Edit: hmmm, I also see, you are not using sprite atlases. iOS devices are pretty powerfull (compared to some low level Adrdoid devices), but using atlases is "industry standard". It is to minimize draw calls. But still, TileSprite is main troublemaker from my point of view.

Good shout on using Texture Atlases. I will look into it later, would require a lot of modifying of the project though as everything right now is non-atlas

[Tom Atom]

3 hours ago, Dolan said:

What should I use instead of TileSprite? I need TileSprite to repeat the floor and the background!

First try if this is your problem. I experienced performance problems on iOS when using it.

Then, find your way how to replace it. In my games, I have background picture as wide as screen. To make it scroll I draw two regular sprites and update their positions and crops. This class is not nice or almighty, but worked for me in several games - it creates one background layer as Phaser.Group. scrollCoef parameter says how fast, relative to camera, background should scroll (0.5 = half of camera speed). Pass camera.x into updatePosition() method. If your bg picture was smaller than screen width you would need more sprites and you would need to adjust this class. This is main idea:

namespace Ninja {

    export class BgLayer extends Phaser.Group {

        private _sprite1: Phaser.Sprite;
        private _sprite1Crop: Phaser.Rectangle;
        private _sprite2: Phaser.Sprite;
        private _sprite2Crop: Phaser.Rectangle;

        private _scrollCoef: number;

        private _frame: Phaser.Frame;

        // -------------------------------------------------------------------------
        public constructor(game: Phaser.Game, parent: PIXI.DisplayObjectContainer, key: string, frame: string | number, anchorY: number, scrollCoef: number) {
            super(game, parent);

            this._scrollCoef = scrollCoef;

            let fr: Phaser.Frame;

            if (typeof frame === "number") {
                fr = game.cache.getFrameByIndex(key, frame);
            } else {
                fr = game.cache.getFrameByName(key, frame);
            }
             
            this._frame = fr;

            let spr = game.add.sprite(0, 0, key, frame, this);
            spr.anchor.y = anchorY;
            spr.fixedToCamera = true;
            this._sprite1Crop = new Phaser.Rectangle(0, 0, 0, fr.height);
            spr.crop(this._sprite1Crop, false);
            this._sprite1 = spr;

            spr = game.add.sprite(0, 0, key, frame, this);
            spr.fixedToCamera = true;
            spr.anchor.y = anchorY;
            this._sprite2Crop = new Phaser.Rectangle(0, 0, 0, fr.height);
            spr.crop(this._sprite2Crop, false);
            this._sprite2 = spr;
        }

        // -------------------------------------------------------------------------
        public updatePosition(x: number): void {
            x *= this._scrollCoef;

            if (x < 0) {
                x += 640;
            }

            let frameWidth = this._frame.width;
            let offset = Math.floor(x) % frameWidth;

            //console.log("offset = " + offset);

            this._sprite1Crop.x = offset;
            this._sprite1Crop.width = Math.min(frameWidth - offset, this.game.width);
            this._sprite1.updateCrop();

            this._sprite2Crop.width = this.game.width - this._sprite1Crop.width;
            this._sprite2.cameraOffset.x = this._sprite1Crop.width;
            this._sprite2.updateCrop();
        }
    }
}

 

[fitness23]

It's usually framerate that's the problem. If you have any animations try to stick to 15 frames per second if you can. This is what I had experienced at least.