Phaser: Game runs at very low FPS on iPhone

[sachinhosmani]

Version

• Phaser Version:3.14
• Operating system:iOS 11.4.1 on an iPhone 6
• Browser:Safari and Chrome

Description

The game opens, appearing to have been stuck unwavering at 60 FPS, but then after a few seconds suddenly drops to under 20FPS even with no interaction from the user.

Example Test Code

Note that I log the FPS on the screen itself.

```

<script>
var screenWidth = 900;
var screenHeight = 1600;
var fps;
var config = {
    type: Phaser.AUTO,
    width: screenWidth,
    height: screenHeight,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { x: 0, y: 0 }
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    backgroundColor: 0xF4F1EC
};

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
screenWidth = config.width = windowWidth;
screenHeight = config.height = windowHeight;
game = new Phaser.Game(config);

function preload()
{
    var assets = ['default_profile_pic', 'leaderboard_play'];
    var fonts = ['helvetica_48', 'big_john'];
    for (var asset of assets) {
        this.load.image(asset, 'Assets/Sprites/'  + asset + '.png');
    }
    for (var font of fonts) {
        this.load.bitmapFont(font, 'Assets/Fonts/'  + font + '.png', 'Assets/Fonts/' + font);
    }
}

function create()
{
    fps = this.add.text(screenWidth * 0.83, screenHeight * 0.01, 'FPS', {'fontSize': 25 * screenWidth / 450}).setTint(0x483632);
    fps.delta = 8;

    var leaderboardCenter = {
        x: screenWidth / 2, y: screenHeight * 0.56
    };
    var topY = screenHeight / 2;
    var offset = 2 * Math.abs(topY) / (5);


    for (var i = 1; i <= 5; i++) {
        var content = {};
        // create template elements
        content.photo = this.add.image(-screenWidth * 0.3 + leaderboardCenter.x, -topY + i * offset + leaderboardCenter.y, 'default_profile_pic');
        content.photo.depth = 18;
        content.photo.setScale(screenWidth / content.photo.width * 0.085, screenWidth / content.photo.width * 0.085);

        content.play = this.add.image(screenWidth * 0.3 + leaderboardCenter.x, -topY + i * offset + leaderboardCenter.y, 'leaderboard_play').setInteractive();
        content.play.depth = 18;
        content.play.setScale(screenWidth / content.play.width * 0.14, screenWidth / content.play.width * 0.14);

        content.name = this.add.bitmapText(-screenWidth * 0.1 + leaderboardCenter.x, -topY + i * offset + leaderboardCenter.y, 'helvetica_48', 'JOHN DOE', 24 * screenWidth / 450).setTint(0x483632).setOrigin(0.5, 0.4);
        content.name.depth = 18;

        content.score = this.add.bitmapText(screenWidth * 0.15 + leaderboardCenter.x, -topY + i * offset + leaderboardCenter.y, 'helvetica_48', '25', 24 * screenWidth / 450).setTint(0x483632).setOrigin(0.5, 0.4);
        content.score.depth = 18;
    }

}

function update(time, delta) {
    fps.setText(1 / delta * 1000);
}

</script>

```

Additional Information

This issue wasn't present in 3.12 but I started noticing this in 3.13 and 3.14.

Here is a drive folder containing the few assets to run this example: https://drive.google.com/drive/folders/13aYgLmjjlTlvuYgdiPJUMlzPyebk858F?usp=sharing

Here is a video of the issue: https://drive.google.com/open?id=111jFpuB-CdeKD4672Qzf-eFOb2MKxthH

[photonstorm]

Could you quickly try commenting out your update function and see if it still happens, please.

[sachinhosmani]

I could, how would I then know what the FPS is? The update() function is what updates the FPS text element on the UI.

[photonstorm]

Scale a sprite instead, so 60fps = scale 1 and less = smaller. Or write it to a dom element. Basically anything that doesn't use a Text object.

[sachinhosmani]

I tried that. The problem still persists. The sprite is scaled normally initially, but after a few seconds it dramatically shrinks and stays small. I wonder if it's a memory leak somewhere.

Next I removed all the text elements (not just the FPS one which is updated every frame) and tried it again and this time, the FPS seems more natural and closer to 60. It seems to have something to do with text.

I have attached all the assets in my issue opening post if it is of value.

Thanks

[moritz-wundke]

I experienced this even on phaser 3.11.0, it was _measureText_ that drained the frames. Still not sure if it's exactly the same issue though.

[photonstorm]

That’s a Text object function though and the code above is BitmapText which doesn’t use it.

[moritz-wundke]

So these are two separate issues then

[photonstorm]

There's no open issue about MeasureText, and this isn't the place for it, so if it can be replicated in 3.14 it needs its own issue.

[moritz-wundke]

I have it on my backlog, once I get some time I'll set up a test case for it.

[photonstorm]

I ran the example above, including the assets and with no changes to the code, against 3.14 and 3.15 on an iPhone SE with iOS12 and the FPS fluctuates but didn't drop below 50.

Swapping to canvas renderer the fps was a solid 60 with virtually no fluctuation.

The iPhone SE is hardly a cutting-edge device (which is why I use it for testing). I'll try it on an iPad tomorrow. Maybe the increased screen res will cause greater fluctuations.

[sachinhosmani]

I ran it on an iPhone 6 which is an older device than iPhone SE. Shouldn't be too much of a difference though. What intrigues me the most is that the FPS is high for the first 5-10 seconds and then dramatically drops to below 20 or even 10 FPS (there is a video in the opening post).

If I get hold of a newer iPhone I will test it on it as well.

[photonstorm]

I left it running for 5 mins while I went to make coffee (the phone doesn't auto-sleep) and it was no different when I got back. This needs testing on more devices, it's not just an 'iOS thing'.

[alexeymolchan]

i had the same thing on iphone 6, in kinda simple setup fps started from 60 and drops to 20 in 5-7 sec.
This behaviour began to appear since 3.12 WEBGL, Canvas - solid 60 fps. 3.11 WEBGL - 60 fps too.
So the basic scene had 1 tilesprite, 3 containers that consist of 2 pictures and text each, i tried to remove these game objects one by one and fps went up only when i removed container for around 10-12 fps for each container.

i created a little more complex example https://alexeymolchan.github.io/phaser-font-bug/, fps meter shows that fps is solid 60 even on iphone 6, but the scroll performance in scroll list is ultra low - version 3.14. Interesting thing that under 3.11 scrolling is smooth even on iphone 6.

[sachinhosmani]

Hi @alexeymolchan your example stays at a solid 60fps on my iPhone 6. Can you try and run my example to see if its reproducible?

[alexeymolchan]

@sachinhosmani did you try to scroll the list ?

[sachinhosmani]

@alexeymolchan the list does not scroll for me. It just doesn't respond. On desktop it does, but on my iPhone it just doesn't budge.

[alexeymolchan]

@sachinhosmani yeah but in 3.11.0 the same code works different, you can try to scroll list here https://alexeymolchan.github.io/phaser-scroll/

About your example on my iphone 6 - fps drops to 35 - 44

[sachinhosmani]

@alexeymolchan yeah it works fine there.

I still have no idea what the underlying problem behind this ticket could be, though.

[photonstorm]

I'll look into this (and the identical #4110) next week as a priority. Still struggling to replicate, but hopefully the given code in 4110 will allow that to happen.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[sachinhosmani]

The game runs fine on iPhone now. Thanks a lot @photonstorm

[photonstorm]

Awesome, thanks for the clarification :)