Terrible performances on my android phone

[jeancode]

Hello everyone,

 

Right now I'm testing my game on an "old" smartphone, to check how smooth the game would work.

Well it's terrible, unplayable, I've like 10-13 fps.

I didn't know where to start so I did this little test : creating a phaser game with nothing in it and run it, so yeah basically a black screen. (but I kept loading my assets, which is pretty fast)

The result was kind of scary : I've got approximatively 15fps.

 

I use crosswalk-cordova to build the apk (so it does use the crosswalk webview)

The smartphone is kind of bad, but that's the point : I don't think everyone has that high end device. It's a sony xperia E, built with a 1Ghz single core processor, 512MB of RAM, the whole running on Android 4.1.

The game uses a resolution of 960 * 640.

 

I wanted my game to be compatible with Android 4.0 and with most devices, is it actually possible to achieve this with Phaser ?

I've read a lot of things to optimize mobile performances (avoid using text, tweens, too many update functions...) but I'm not even at this point yet, because with everything out it's still bad.

Any help / advice would be hugely appreciated !

[Deathspike]

Old smartphone limitations often come from the terrible web view. Using the stock browser makes things run at a snails pace. Cordova uses the stock browser. The Chrome browser is quite a bit better (but yeah, no Cordova), but the preferred solution is probably deploying (and testing) through something like CocoonJS. Since that solution essentially packs its own optimized WebKit engine, the performance is going to be tons better using it.

 

Also note that doing debugging calls (like displaying the FPS) is going to have a bad influence on actual game performance.

[icp]

Test this resolution : 240 * 135.

 

Scale the game via :

this.game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;

You won't see much difference between 240 * 135 and 960 * 640, but your game will run better.

 

For audio:

 

OGG/MP3 at 96kbps bit rate.

 

For images:

 

Save data with https://tinypng.com/ .

After that, use a spritesheet https://www.codeandweb.com/texturepacker .

[jeancode]

Thank you guys for your answers !

 

@Deathspike : I'm not using the default / stock browser webview, I'm using crosswalk webview, which is supposedly pretty good (and quite recommanded here alongside with cocoonjs). I would like to avoid cocoonJS because last time I've checked, there was an intrusive "cocoonjs" splashscreen you couldn't remove.

 

@icp : I need the 960*640 resolution because my game is based on a tilemap (30x20 tiles of 32px), but for the sake of testing I tried the 240*135 without anything except Phaser (the black screen test I call it ) and I get around 20-22 fps, which is a huge let down let's be honest aha. Thanks for your other advices, I already use a sprite atlas so it should be okay on this side, but anyway these are not even involved right now.

 

Well, I'm still looking for possible tests / solutions.

[qdrj]

Did you set renderer to AUTO or WEBGL? It can boost performance by 2-3 times compared to canvas renderer.

 

I was able to get ~50fps on Galaxy S3 wrapping this html5 game (resolution 640x800) - Jimbo Jump

[jeancode]

The renderer is set to AUTO, so when webGL is available, it does use it. The thing is there are a lot of gpu blacklisted because webGL is not stable on them, so it still uses canvas renderer. For the sake of testing I tried forcing webGL and I didn't notice any improvement on my old device.

 

The more researches / tests I do, the more I think it has nothing to do with Phaser. I've come across this thread https://www.scirra.com/forum/crosswalk-performance-mega-thread_t125842?start=180 which basically says crosswalk performances are terrible since crosswalk 7. Well I've tried it and indeed crosswalk 7 has much better performances, I don't know exactly the fps I had because I removed the counter (as deathspike said it's quite demanding for a low end device), but it was way smoother, not quite playable but definitely smoother. Yet I don't think that's a good solution (crosswalk is at version 12/13/14 now...), so I'm quite disappointed at the moment, and I don't really know what do to.

 

The last test I could do is trying cocoonjs, as much as I wanted to avoid it because of several things, like the "intrusive" splashscreen, or all the little quirks you have to do because everything is not compatible with it. But everyone seems to agree performances are good.

 

Obviously I'm still listening for any advices.

 

Making JS games for mobile can be quite exhausting.

[jeancode]

I'm bringing more news about this : 

 

@qdrj I was able to test my game on a samsung Galaxy Core, which has, I think, fairly close specs to the Galaxy S3 (correct me if I'm wrong), in both canvas and webGL mode. The results were pretty satisfying, I got ~50fps in both mode, it was easily playable

 

But the question stays open, I mean I don't think everyone has a Galaxy S3+ (I don't know if it's possible to get those stats from Google, it would be really helpful to actually know your targets), but yeah I'm still wondering why it's so bad on the xperia E (which is bad, but not that bad it can't run anything).

 

Did anyone actually manage to create an HTML5 game which works on a wide range of devices ? What are your minimum requirements when developing a game ? Mines might be way off I don't know, but I don't think so, especially for a "simple" game. Again the game itself is not even the problem given that I struggle reaching 20fps with a blank canvas of 960x640 created by Phaser, otherwise I could actually optimize things in my game.