• 2D

  • Low FPS on iOS while running 2D HTML5 game

Hey,

I have a problem with HTML5 2D game because of low FPS on iOS. My problem occurs on newer iPhones (11 Pro), while on a little bit older ones (X, 6s etc.) it mostly works fine. On iPhone 11 Pro I'm getting 14-17 FPS on static pages without any animations and on animated ones, while on iPhone 6s I can get up to 60 FPS which is perfect. Meanwhile iPhone X is running at 60 FPS on iOS 15 beta version, while on 14.7 it is running at around 45-50 FPS which is still ok. I tested on Windows and MacOS also and it works fine at 60 FPS. Window resolution is set to 1232 x 694 and enabled 2d expand stretch mode.

I figured out that with disabling hidpi option I can improve performance on 11 Pro, but then quality of the game is terrible. I also figured that if I enable hidpi and disable strech mode (which I want to have on and set to 2D expand to support multiple resolutions), then it will run the game at 60 FPS also but I lose support for multiple resolutions which is necessary.

EDIT: I forgot to add that I'm exporting this game as GLES2 since GLES3 is not supported for iOS version yet (it will be supported on iOS 15 with support for WebGL 2). Also ... same problem occurs on either Safari or Chrome so it's not related to specific browser issues. I'm using Godot v3.3

Do you have any suggestions?

Sounds like its to-do with pixel throughput stemming from the resolution.

@Megalomaniak said: Sounds like its to-do with pixel throughput stemming from the resolution.

Can you tell me more about it please? I'm not sure I understand it.

Newer phones have bigger resolutions at approximately the same size footprint, this thus giving better pixel density and sharper image. But higher resolution also means there's more pixels to render. That causes a performance drop, sure the newer models also have more powerful GPU's but they still need to be energy/battery saving so the effective performance might not be that much higher.

One thing you could try implementing is rendering your game via a lower resolution viewport in viewport container and apply a checkerboarding shader/effect. Rendering only half the pixels each frame but still getting the same effective output resolution. The technical investment in this solution would be fairly high since you would in effect also need to implement some form of temporal AA to be able to fill the other half of the pixel by sampling from the altering columns of pixels per each row from the last frame.

Or you could just render a lower resolution viewport but with mipmapping off so you do get a lower resolution image but it won't look as blurry. That one is a easy solution.