Migrating Phaser to CocoonJS

This post to detail my journey on making a Phaser 2.0.7 game work with CocoonJS 2.0.2 (versions ARE importants here).

 

Patch Phaser

Follow this wiki page : https://github.com/photonstorm/phaser/wiki/Phaser-General-Documentation-:-CocoonJS

 

JQuery

So, first of all, JQuery doesn't load  on CocoonJS navigator.
Move on to underscorejs.

 

XML

That may be sound crazy but CocoonJS doesn't provide any XML API. I draw some texts as Phaser bitmapText requiring an XML descriptor parsing.
This code saved my life : https://github.com/videlais/xml-for-cocoonjs

 

Scaling

I never had any issue with scaling during my previous tests (desktop, cordova build on mobile...) but there problems arise : my stage where truncated with black gaps on sides.
In phaser, my game is created using safe height, with the safe width computed based on safewidth/safeheight ratio, then scaling apply

 
this.game = 
    new Phaser.Game(widthRatio, safeHeightheight, 
    Phaser.CANVAS, 'hh_canvas', null, false, false);

hh.game.scale.setScreenSize(true); 
 

With CocoonJs the code is fairly different : full window w&h have to be applied on Game creation, and disabled setScreenSize().

this.game = 
    new Phaser.Game(window.innerWidth*window.devicePixelRatio, window.innerHeight*window.devicePixelRatio, 
    Phaser.CANVAS, 'hh_canvas', null, false, false);   

 

Black background

A fun one that took me a lot of time to figure out the problem.
I render my background using a gradient filled bitmapData : black in CocoonJS
Do NOT set transparent background on new Phaser.Game creation. Works everywhere but in CocoonJS.

 

Last sprite/image not rendered

For an unknown reason, the last element I add to game in "create" function is never renderered.
I just added a dummy.png 1x1 empty image on all my State create() function...

 

Animated texts truncated

One more a time a crazy problem : the last character of my texts, when animated, is not rendered.
Had to add a suffix "_" in case of CocoonJS navigator.

if(navigator.isCocoonJS){
    _text = _text+"_"//add a dummy last character
} 

Hope I saved you some hours I wasted.

I ll try to keep this post updated.