Phaser's performance on Android

[markus.n]

I'm surprised I can't find threads about Phaser development for Android and it's horrible performance. Generally the result of my googling is that making HTML5 games for Android is way worse than making Internet Explorer 6 hacks for websites was before. It looks like Phaser and probably most other frameworks are more or less unusable with it, so this is a huge issue.

I'm early in development of a game, and after my tests I've noticed it's lagging on Android even with the simplest possible tween for one sprite across the screen (code attached). This applies both to the native Android browser and using CocoonJS with Canvas+, my test device is Galaxy Tab 3. CocoonJS claims the fps to be over 60, but in reality there's the occasional chop in movement every few seconds. On Android's Chrome browser it's ok, but obviously that's not enough. If I use the moveToXY function instead of tweens, it's closer to acceptable, but still far from perfect.

Any of the tips provided in the long and pinned CocoonJS thread don't seem to apply to this case, since I suppose it's more about Android than anything else. I'm very interested in hearing people's thoughts about this, have you made not-laggy games for Android with Phaser, and if, how on earth did you succeed?

window.onload = function() {  var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'gameContainer', { preload: preload, create: create });  function preload() {      game.load.image('robo', 'img/robo_small.png');  }  function create() {    var robo = game.add.sprite(0, 0, 'robo');    var tween = game.add.tween(robo);    tween.to({x: 1200, y: 600}, 20000, Phaser.Easing.Linear.None);    tween.start();  }};

[Str1ngS]

I haven't really had any issues with our games on Android. For both PIXI, CreateJS, Phaser and Phaser+Cocoon. What I can tell you however, is that the overall Canvas/WebGL performance of the Tab 3 is rather shit (Especially if you look at the hardware on paper).

 

I don't know if you have any other devices laying around but then you can test it with PIXI's bunnymark (http://www.goodboydigital.com/pixijs/bunnymark/). I don't have any actuall numbers right now (because im not at my work, where we have a multitude of devices) but it really feels like Android Chrome doesn't work very nice on the Tab 3. I've seen the Tab 2 and iPad perform way better in Bunnymark. (and i'm sure it's not the particular device, we've had 2 Tab3's )

 

But in the end those are just my experiences .

[Videlais]

I'm surprised I can't find threads about Phaser development for Android and it's horrible performance. Generally the result of my googling is that making HTML5 games for Android is way worse than making Internet Explorer 6 hacks for websites was before. It looks like Phaser and probably most other frameworks are more or less unusable with it, so this is a huge issue.

 

"Unusable" is a pretty strong word for Phaser on Android right now. It's definitely usable, but it's usability is often dictated by a number of other factors that are usually outside the Phaser community's control.

 

The chief among those is the Samsung GPU code -- see here -- on its devices. It's just not good and can often cause problems, as @Str1ngS points out too.

 

Another is compatibility with CocoonJS, which has had a number of ups and downs over the last several months. (Some problems should be fixed in 2.1, assuming the next version of CocoonJS doesn't change too many things.)

 

I'm early in development of a game, and after my tests I've noticed it's lagging on Android even with the simplest possible tween for one sprite across the screen (code attached). This applies both to the native Android browser and using CocoonJS with Canvas+, my test device is Galaxy Tab 3. CocoonJS claims the fps to be over 60, but in reality there's the occasional chop in movement every few seconds. On Android's Chrome browser it's ok, but obviously that's not enough. If I use the moveToXY function instead of tweens, it's closer to acceptable, but still far from perfect.

Any of the tips provided in the long and pinned CocoonJS thread don't seem to apply to this case, since I suppose it's more about Android than anything else. I'm very interested in hearing people's thoughts about this, have you made not-laggy games for Android with Phaser, and if, how on earth did you succeed?

 

I'm sorry you weren't able to get any help out of the CocoonJS thread. I do generally test on a number of devices, including both iOS, Android, and even Ouya on occasion.

 

As for the lagging, the somewhat obvious questions come to mind: how much is too much for you? Are you seeing drops as low as 10-20 FPS? Or is it dropping into the 50s FPS sometimes? If it is lagging a great deal, you might look at optimizing your code. Certain functionality like extra render and debugging calls can really slow down mobile device. Sometimes, getting rid of just a single extra draw call can improve performance a great deal.

 

Finally, getting constant 60 FPS all the time just might not be do-able for your project. Depending on how much you are drawing, you could be taxing the device too much. Many devices cannot handle strenuous loads on their GPUs and will deliver lower performance.

 

Obviously, I'm writing about more than just that code you listed, but those are pretty common problems you might want to look out for in the future as you proceed as well.

[markus.n]

Thank you both for your replies! Str1ngS, could you please elaborate how and what you've tested in Tab3, in order to get acceptable performance for a Phaser game? You still say the performance is "rather shit", but also that you haven't had issues? This seems contradicting.

I'm not looking into getting constant 60+ fps, not even 30 would be necessary. Also, the CocoonJS launcher indeed claims the frame rate to be good (~30-50) even when the chops appear. However, they are VERY noticeable, especially in the first seconds, no nit-picking here. I just need to develop a game which doesn't look buggy for anyone playing it on a market leader's very common devices. This also applies to Galaxy S III, unfortunately I currently don't have access to more, but on the other hand, these should work anyway. Seeing that the simplest possible tween on Phaser doesn't perform, it very sadly looks that I have to abandon Phaser in this project and come up with something else, unless I can find a miracle cure.

I'm still not saying that Phaser would be the problem here - I understand what you're saying about Samsung, and I found interesting and very depressing comments about Android's WebView in general, e.g. here: http://www.mobilexweb.com/blog/android-browser-eternal-dying It truly seems to be the new IE6 with an added revenge, I'm extremely surprised and disappointed that Google could have let this happen. Whatever the reason is, Phaser and these common devices together produce unacceptably poor performance. This can also be seen by browsing the online Phaser examples, many of which are lagging severely on the stock browser, which we unfortunately have to live with for years to come.

However, the bright side is that the CocoonJS demos packaged with the launcher run extremely smoothly on the same device, I couldn't distinguish it from native even if I tried. This means that somehow, despite all the limitations, it indeed IS possible to create a smooth experience with HTML5 and these poor performing devices. Next, I'm going to make some performance tests and dig into the code of those and also Phaser's tweens, hoping to find something.

In a nutshell, I'm mostly after discussion and experiences on Phaser + Android (or maybe just Samsung?) performance, and if there might be anything to be done with it, other than wait for new versions of CocoonJS etc. As it is, I can't develop mobile games on Phaser, no matter how much I'd love to.

[markus.n]

I'm very happy to report that I got to the bottom of this!

Indeed even the CocoonJS launcher's showcase demos are chopping on these Samsung devices (good example: "Sprites 2" with adding animated fish), but ONLY for the first 10-20 seconds, and especially the first few. Since my Phaser example tween was only 20 seconds long and begun immediately, it was affected by this and I didn't see the problem ending. When I chained a bunch of new tweens totalling to a minute or so, there was no problem after the beginning anymore. Once my game is complete with menus etc, I doubt this will be a problem at all.

Of course it'd be nicer if this chopping wouldn't happen at all, but this is easily acceptable. Faith in technology and HTML5 development restored.

[Videlais]

I'm still not saying that Phaser would be the problem here - I understand what you're saying about Samsung, and I found interesting and very depressing comments about Android's WebView in general . . . I'm extremely surprised and disappointed that Google could have let this happen. Whatever the reason is, Phaser and these common devices together produce unacceptably poor performance.

However, the bright side is that the CocoonJS demos packaged with the launcher run extremely smoothly on the same device, I couldn't distinguish it from native even if I tried. This means that somehow, despite all the limitations, it indeed IS possible to create a smooth experience with HTML5 and these poor performing devices.

 

Believe me, I'm right there with you about bemoaning mobile browsers and Phaser compatibility. No matter how far we seem to come with patches for CocoonJS -- and more recently Apache Cordova -- we'll always tied to the platform's code and hardware. If it's terrible, our project's run terrible. Not a whole lot we can do about it.

 

It's not much of a consolation right now, but we (Phaser) have come a very long way toward being able to run on these platforms at all this year. I can remember back in early February when there was very little mobile platform detection and CocoonJS was completely broken with Phaser. Now, more or less six months later, Phaser can detect all major hybrid app frameworks and has a number of optimizations for things like CocoonJS.

 

As you wrote, sometimes it is a matter of waiting out the patches and software updates.

 

Indeed even the CocoonJS launcher's showcase demos are chopping on these Samsung devices (good example: "Sprites 2" with adding animated fish), but ONLY for the first 10-20 seconds, and especially the first few. Since my Phaser example tween was only 20 seconds long and begun immediately, it was affected by this and I didn't see the problem ending. When I chained a bunch of new tweens totalling to a minute or so, there was no problem after the beginning anymore. Once my game is complete with menus etc, I doubt this will be a problem at all.

Faith in technology and HTML5 development restored.

 

That's good to read. I'm glad you were able to find a work-able solution, even if it doesn't sound all that great overall.

 

If you end up using CocoonJS and happen to come across new solutions (or problems) please feel free to post in that Common Issues thread. Even if I have personally stepped away from CocoonJS some more recently, there are a number of developers who do post in that thread on a fairly regular basis who are actively using CocoonJS. (We are also in somewhat of a holding pattern until a new version of Phaser or CocoonJS comes out to start new testing too.)

[rich]

To be honest I've noticed the "10 second lag" on most native games on my brand new Samsung tablets. My wife likes playing hidden object type games (sand so do I to be fair ) and both of us are used to starting a game and not touching it for a while to let it "settle down".

As for what on earth is going on I've no idea. Maybe some more terrible Samsung code in the OS somewhere to go with the rest of their terrible code that causes some fantastic Samsung only bugs. Maybe it's something to do with multitasking apps and swapping stuff out of memory. Who knows. Maybe one day it will get better.

In the meantime it's possible that moving to a smaller build of phaser may help a little (ie one without p2 bundled in or similar) as there will be less to process when starting up. But really it may make no difference at all.

[San4er]

I have noticed lags on the first 10 seconds ony my HTC device too. I'm using CocoonJS and Phaser 2.1.1
It seems like I will have to make a fake 'loading screen' on that time to prevent laggy experience.

[Beyb26]

I have the same problem with the performance of Phaser+CocoonJs. 
My Game is so Laggy after i compiled it. But then, when i run it on Google Chrome (Desktop Browser) the game is so smooth and has a good performance.

 

~ Jerald