“Imagination is everything. It is the preview of life's coming attractions”

- Albert Einstein

  • 6 Tips To Make Your Phaser Game Work With CocoonJS

    6 Tips To Make Your Phaser Game Work With CocoonJS

    Power, patience and skills required to make Phaser (a fine piece of code by the way) work properly with CocoonJS are beyond simple mortals. So that's why there's a need for forces of almighty research, grand crusade of trial and error, opening the portal of endless blind tries..! Well, I just actually wanted to share 7 tips that allowed my game to work properly with CocoonJS.

    Please keep in mind that following tips were assembled while working on Phaser 2.0.3 and through extensive exploration of html5gamedevs.com forum (a great source of knowledge, which I highly recommend). Tests were done on Samsung Galaxy Ace with Android 2.3.3 on board (since I always want to make my target group as large as possible).

    1. Switch from WebGL to Canvas

      This change removed the issue with black screen that appeared on game startup. Disadvantage of this solution is that it actually disallows usage of any fancy WebGL features, eg. shaders. If you're into 3D stuff on mobile devices, Unity3D could be a better choice (though it limits your target device list)

    2. Add empty image to prevent images not being displayed

      When your images are not rendered, add a dummy (blank) image to each state's create function, eg:

      GameSpace.GameState = function() {
        return {
          create: function() {

      This tip and previous one (switching from WebGL to Canvas) solved rendering issues for me (beside tiled sprites, which are described below). Even issue with Phaser.Button images not being shown shall be vanished from your realm.

    3. Implement XML to JSON polyfill when using bitmap fonts

      CocoonJS currently doesn't support window.DOMParser which means that you won't be able to use bitmap fonts (which are superior in performance when compared to standard vector type fonts). This can be easily fixed by applying a polyfill introduced in this post. You may find this fix lacking, due to missing DOMishObject.getAttribute() function. Real fixed code is available under this Gist. Once you have applied it according to the instruction you'll need to convert all of your bitmap fonts XML maps (eg. created with BMFont) to JSON files. Once that's done, JSON maps can be used normally like their XML counterparts:

      GameSpace.PreloadState = function() {
        // Empty
      GameSpace.PreloadState.prototype = {
        preload: function() {
          // ...
          this.load.atlasJSONHash('gui', 'assets/sprites/gui.png', 'assets/sprites/gui.json');
          // ...
        create: function() {
          // ...
    4. Don't use Phaser.TileSprite

      Phaser.TileSprite won't be rendered under CocoonJS for version 1.4.7 and 2.0.0 beta. Avoid using it. If you really want to use a tile sprite (eg. for parallax effects), try simulating tiled sprites with Phaser.Image assembled together (eg. in horizontal/vertical line)

    5. Screen scaling technique

      Standard Phaser scaling through Phaser.ScaleManager just won't work for CocoonJS. Instead use solution introduced under this address. Keep in mind though, you'll need to adjust physical bodies of sprites using this.game.world.scale.x, eg.

      // ...
      // Basic physics settings
      this.body.setSize(this.body.sourceWidth * this.game.world.scale.x, this.body.sourceHeight * this.game.world.scale.y);
      // ...

      Also, all coordinate setting/fetching code will need to be adjusted with scale multiplier:

      // ... 
        this.game.input.activePointer.x / this.game.world.scale.x, 
        this.game.input.activePointer.y / this.game.world.scale.y
      // ...
    6. Use CocoonJS 1.4.7 compiler

      Using CocoonJS 2.0.0 beta just didn't work for me (or at least device I've been testing on). Switch to CocoonJS 1.4.7 and everything should be fine.

    That's it, hope you enjoyed it - boo-ya!