Performance Tips

[Edricus]

Hello everyone. This is my first time posting on the HTML5 Game Dev forums so don't hurt me.

 

I am currently working on a small project for a job that I got about a month ago. We are using the Phaser engine to create three games in one app. Two of the games use Phaser's Arcade Physics the third does not. We wanted these games to be available on both the App Store (iOS) and the Play Store (Android) so we decided to go with PhoneGap to wrap our games. Our first few attempts were with CocoonJS and that didn't work out too well for us.

 

So in short, right now we are at the stage where we can get PhoneGap to give us a working app that we can put on an Android phone for testing. We have tested our app with three different phones right now ranging from old, to decent to pretty much brand new. The phones are as follow:

1. HTC Desire C
2. HTC One V
3. Samsung Galaxy S4 Mini

The games run fine on the S4 Mini with a couple blips in the frame rate here and there but on the other two devices they just run horribly. Unfortunately we haven't had the opportunity to test on other physical devices just yet. Through some research we saw some posts stating that devices pre-2012 don't run JavaScript that well. This would explain the first two devices but not so much about why there are frame rate blips on the S4 Mini.

 

I realize the easiest thing to look at is how the code is written but we ran a test app on its own on the first two phones. This app simply has a tween that goes off once every 6 seconds tweening in 6 colored boxes. The only other thing is there is an event listener for a tap on the boxes. If anyone can shed some light on the issue, that would be greatly appreciated!

[Zaidar]

PhoneGap isn't great for performance for canvas games. I think it uses the webView from Android, which has quite bad performance.

You said you tried Cocoonjs, but did you try on WebView or Canvas+ because Canvas+ is way faster with games using canvas?

[Edricus]

From what I remember I tried building with all three CocoonJS types. I'm going to give it another shot. I'm going to try loading up the small tween demo with CocoonJS Canvas+ and I'll post my results shortly. Thanks for the response Zaidar.

[Edricus]

So we just finished attempting to run the app on the three phone stated in the original post. On all the devices the Ludei logo pops up, flashes once and then the screen goes black. This was with Canvas+ selected. We used PhoneGap to convert the app as well and ran it on the same phones listed above. It runs like garbage on the first two phones but on the S4 Mini runs perfectly fine.

 

Any ideas as to why the CocoonJS one resulted in a black screen? This was our first issue and unfortunately we were unable to find a solution to the problem.

[xzereus]

Edricus,

 

Are you using DOM manipulation or is your game strictly using the canvas? As you probably know, Canvas+ is stripped of just about all DOM capabilities. If you're trying to do something like add a div to the page, Canvas+ will blow up on you. Also, I had to use the following when creating my game:

var game = new Phaser.Game(w, h, Phaser.CANVAS, '');

This is outlined further in the CocoonJS with Phaser sticky.

 

Have you tried checking the console for errors? I'd highly suggest launching your game with the cocoonjs launcher and then clicking the FPS button in the upper left. This gives you the option of viewing the log where you can see if you are getting any errors (most likely for attempting DOM manipulation).

 

Let us know what you find!

[Edricus]

Thanks xzereus,

 

So I followed your steps and I got the following errors:

 

JavaScript Exception ( Tag: 'load'): Error: Phaser.Loader. Invalid XML given

at b.Loader.xmlLoadComplete (js/phaser.min.js:12:21637)

at XMLHttpRequest.c.xmlURL._xhr.onload (js/phaser.min.js:12:19232)

 

Failed to load Image: assets/preloader.gif

[Videlais]

Thanks xzereus,

 

So I followed your steps and I got the following errors:

 

JavaScript Exception ( Tag: 'load'): Error: Phaser.Loader. Invalid XML given

at b.Loader.xmlLoadComplete (js/phaser.min.js:12:21637)

at XMLHttpRequest.c.xmlURL._xhr.onload (js/phaser.min.js:12:19232)

 

Failed to load Image: assets/preloader.gif

 

As the Common Phaser + CocoonJS Issues thread mentions in the first post, CocoonJS doesn't have XML support. If you absolutely need it, there are two solutions for this. One, switch the XML over to JSON and load the content another way or, two, use an external JavaScript library I've worked up for this purpose. (The dev branch of the library has more features, but is still experimental.)

 

Whenever possible, though, it's best to just avoid XML if you going to use CocoonJS.

[Edricus]

Videlais,

 

Thanks for the quick response. However, the demo I'm loading onto CocoonJS is very simple. To the best of my knowledge we used no XML at all throughout this project. It's simply a background with a couple of colored boxed tweening in on a timer every 3 seconds or so. This is why this error has me puzzled. :S Once again thanks for all the help everyone.

[Videlais]

To the best of my knowledge we used no XML at all throughout this project. It's simply a background with a couple of colored boxed tweening in on a timer every 3 seconds or so. This is why this error has me puzzled.

 

That's pretty strange. I know that error very well (having worked on XML support for CocoonJS) and it only occurs inside the Phaser functionality to load XML. (Plus, the xmlLoadComplete function name gives that away.)

 

Somewhere in there, Phaser thinks you are loading XML and CocoonJS doesn't like it.

[Edricus]

Do you think perhaps any of these technologies might be trying to do something behind the scenes? We used Grunt to compile one game.js file and we are also use Node.js for modules.

[Edricus]

Well, we found the culprit. It turns out we were loading an XML without even knowing it.

this.load.bitmapFont('flappyfont', 'assets/fonts/flappyfont/flappyfont.png'/*, 'assets/fonts/flappyfont/flappyfont.fnt'*/);

I've commented out the third parameter which was taking in the FNT file type as an XML. We were doing some tests with the Flappy Bird font for now. When it comes round to actually having our own font how can we possibly get around this? We do have plans of incorporating our own font eventually. 

[Videlais]

When it comes round to actually having our own font how can we possibly get around this?

 

There are a few different ways.

• Convert the XML to JSON (using one of a number of programs and services for that) and then use something like this example code.
• Use my own external library for replacing DOMParser in CocoonJS (See my earlier post for the links.)
• Convert the TypeType font (assuming that's the original source) into a a bitmap font (using BMFont or a similar program) and then use Phaser.RetroFont instead.
• (Worst case and most work) Convert all the text areas into separate images and load them as needed.

[Edricus]

Thanks a lot Videlais for the response. Unfortunately, I don't think we will have the time today to do those steps but we will definitely attempt those next week as our deliverable today won't heavily rely on font at the moment.