Phaser: Improve mobile performance

[Sam]

Mobile devices are limited in comparison to desktop browsers or native apps in resources.
I've noticed quiet a lot of times that if your games get's a little bit more complicated in update-processes, physics etc that the performance is lacking on mobile devices. Even as a result there are as more errors in the physics etc as your game-performance is limited.

So maybe it is useful to compare how to improve performance.

1. Update function
In my code I strongly try write as less code into the update function as possible.
Because of redrawing sprite etc you do not need to - or even you don't need to check for some attributes only on specifically events.

2. file sizes
My files are always the size which they are needed and pixel-perfect exported.
(That's even a "must be" for design).

So I think you guys know a lot more how to improve the game perforce of Phaser on mobile Platforms.

I run my Games to Cooconjs. Experiences in PhoneGap offered me much less performance.

cheers,

[haden]

I run my Games to Cooconjs. Experiences in PhoneGap offered me much less performance.

 

are you asking about improving performance for mobile browser games, or for games that were packaged using CocoonJS ?

[Sam]

Its more about Games wrapped into cocoonJS. But it would be interesting for mobile Browsers too.
 

[Sam]

So here is an example. On iPad mini (first gen.) - We using this as the low end performance device - Phaser gets laggy on rendering more than 10 images. In the update function is only one collision detection. Images are .pngs -> and there are only 2 different, fileSize: 28 KB and 80 KB. That's all. 

More Info:
Device: Ipad mini 1.gen
Wrapper: CocoonJS
Mode: Webview
Active Update-Process: 1


**Update
FPS are under 18 <-
iPad Air gets 28 FPS.

Edited September 11, 2014 by Sam

[valueerror]

i made the experience that physics does not matter that much compared to rendering..  i could do a hundred calculations less and it would bring me the same performance boost as if i were removing one tilemap layer from the scene..

also using canvas over webgl is ironically a faster solution

[Sam]

Still the performance is too slow,- this makes the framework un-applicable for professional mobile games.
I have to reduce the used sprites to about under 10 and it is still lagging on ipad Mini.

[Arcanorum]

So don't use iPad Mini.

You need to decide if your target platform has what you require for your game.

If it doesn't then you are going to have to up your minimum specs to achieve your goals. No point sitting around on ancient tech while everyone else is chasing the future. Time waits for no one.

[Sam]

in fact you are right.
But it is lagging on iPad Air too, as said above. 
The performance is not as low as on the mini but still not fast enough - and our test are covering only a few sprites and physics nothing big yet.

 

EDIT**

Still I do not know if it is cocoonJS which slows down the performance. But otherwise we are often using CocoonJS and it's damn fast compared to PhoneGap.

Edited September 11, 2014 by Sam

[valueerror]

ah.. @ filesizes i have to add that i found a really great tool for reducing the size of png's to a third of it's original size without noticable quality loss:

 

http://pngquant.org/

 

this of course is not boosting performance but downloadspeed

 

i use the linux commandline tool since its in the repos :  "pngquant myimag.png"   aaaand done.

 

@cocoonjs performance..   if my game has 50 fps in chrome on my nexus7 tablet it will have 60 fps with cocoonjs ..  i'm very happy with that but i had to do a lot of hacking to get my game to almost 60fps (in browser) so i'm confident it will be perfectly playable with cocoonjs

[Sam]

We have a Nexus7 Device in charge so we will test it - I think tomorrow.
My focus is more set to iOS Device because I'm developing only for iOS (but still have some android devices to test several things).
The performance on iOS is so slow.. the iPad Air is in comparison to the mini a jet against a fly.. so I think that there must be a workaround to get the performance up to 40-50 fps.
~Think this needs more testing.

[Sam]

Finally we managed to reach between 50-60 fps on iPad mini(!) and more actual models.

Thanks to @valueerror
- We could reduce the filesize for about 75%

Using WebGL
- We replaced xml with json (bitmap font) for an extra boost of 8-10 fps!

But the big deal was:

var starBitMap = game.add.bitmapData(4,4);

        starBitMap.context.fillStyle = "#ffffff";

        starBitMap.context.fillRect(0,0,4,4);

        starBitMap.checkWorldBounds = true;

        starBitMap.outOfBoundsKill = true;

deleted this part - we got 26 more fps!
(BitMaps are gaining much more performance than we had thought of)

also we cleared some unnecessary part out of the update function

now we have 60 fps on all ipads from late 2012 till now. There are a few bugs within iOS8 / there is another post on it:
http://www.html5gamedevs.com/topic/9098-strange-webgl-results-on-ios8/

 

Edited October 7, 2014 by Sam

[dec0y]

We have been developing with Phaser and CocoonJS for some time now. It is very viable for professional looking 2d games with this method. 

[valueerror]

- We replaced xml with json (bitmap font) for an extra boost of 8-10 fps!

 

 

8 fps just for switching from xml to json?   how did you switch..  i didn't find a way to use json data for bitmap fonts ?  (except a custom parser like this one http://www.html5gamedevs.com/topic/2312-ludei-cocoonjs-xml-bitmap-font-workaround/page-2#entry37140  which works but i do not understand why this should boost the fps)

[Sam]

xml Bitmap font was causing it.
See this post on an attempt. Same way we also do use

http://www.html5gamedevs.com/topic/2312-ludei-cocoonjs-xml-bitmap-font-workaround/

 

 

Most performance increase was by deleting particle effects and not using bitmaps. The Game went from under 20 up to constantly 58-60 fps.