Using Cocoon with Phaser

[spencerTL]

I've just made my first builds using Cocoon by Ludei.  I've used Phaser/javascript to make the app.

I started making some notes to aid me in the future as I don't make many app build builds and I'll have forgotten by the next time I do.  I decided to put it here as it may help others.  There isn't anything here that isn't available on Cocoon's docs, forums, and a few other places on the web but they are snippets that I wish had been in big red letters when I was working through it.  Follow Cocoon's docs.  What's written here is essentially the solutions/extra clarity to each sticking point I had.

Include this line between the head tags of your index.html. (Code taken from Cocoon's docs)

<script src="cordova.js"></script>

include this in your body tags.
 

    <script type="text/javascript">
        document.addEventListener('deviceready', function() 
            console.log("Cordova is initialized and ready!");
        }, false);
    </script>

I start my game using the following code in index.html. 

I tried using the anonymous function as shown in a Phaser Cocoon template but this caused subtle changes to my game.  I could not find what the cause was as it seemed utterly unconnected and, although I presume it must be to do with scope, impacted things that were scoped only to a single state.   Essentially a Phaser group was no longer updating its children as it was expected to.   Be sure to check your game carefully using the developer build as these new bugs can be subtle. 

I used the following.  Uncommenting the first and last lines as in the template  still seems to work but introduces those subtle bugs.

<script type="text/javascript">
//(function(){
        var game = new Phaser.Game(2048, 1536, Phaser.AUTO, 'game');
    game.state.add('Boot', BasicGame.Boot);
    game.state.add('Preloader', BasicGame.Preloader);
    game.state.add('Game', BasicGame.Game);
    game.state.add('OtherState', BasicGame.OtherState);
    game.state.start('Boot');
//})();
</script>

Create file structure of

js
assets
src
css
index.html

Zip these files *not* the folder they are in.  See zip gotcha below.

The bundle id you use in the cocoon builder must not have uppercase letters even though you may have already created a bundleid with apple that you cannot change.  Fortunately, if you were stupid enough (me) to have done this a long time ago, it does not seem to matter that they do not match,  Apparently Apple, at least, is case insensitive for bundle ids.

FOr iOS, if you wish to test the resulting ipa on a device, build it using a development certificate and an adhoc provisioning profile.  (Not a development provisioning profile/ensure your devices are added to your dev account before generating the provisioning profile).  Just copy the ipa to iTunes and then to the device.

Quirks that may be resolved in future updates:

The zip file that you create of your project won't work if you use the the native Windows 'send to archive' using winrar results in a zip that does work.  

The help links accompanying each section are very useful.  A minority, however, open in the current window so losing any changes you've made.  Best to 'open as new window' just in case. 

Conclusions

I have to say, the service was very good.  Aside from the few issues mentioned above it went very smoothly.  Uploading a single icon and having the service sort it into the myriad that Apple demands was a bonus time saver.  For me, it was a much nicer process than when I used xcode and cordova alone.  

I've used the free service with a very small app (less than 5mb).  I've had to use the webview+ as one section of my app uses the DOM but the performance is still very good.  My app has a lot of sprites on screen but they don't update much.

Only the zip issue was nearly a showstopper.  Whether this is an issue with Microsoft's archiver or Cocoon's reading of the zip I don't know but it was the only problem I found that really needs to be addressed with urgency. The value of Cocoon's service will vary for you, but I'll definitely be considering the paid for version when I'm ready for its extra features.

[espace]

hi,

could you post your index.html entirely because i don't understand very well your explanations.

[bruno_]

You can see the phaser template cocoon here: https://github.com/CocoonIO/cocoon-template-phaser/blob/master/www/index.html

[espace]

yes i know this template and when i adapt the index.html example to point to my little main.js the webview, webview+ and canvas + doesn't work...

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Cyber Orb demo</title>
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
    <style>
    body {
        margin: 0;
        background: #2B2E31 url(img/screen-bg.png) repeat;
    }
    </style>
    <script src="cordova.js"></script>    
    <script src="src/phaser.js"></script>
    <script src="src/main.js"></script>
</head>

<body>
    <script>
   document.addEventListener("deviceready", function() {
        setTimeout(function() {
            navigator.splashscreen.hide();
        }, 5000, false);
    });
    (function() {
       var game = new Phaser.Game(1280,1920,Phaser.CANVAS,'game' )
		game.backgroundColor = '#494b4c'
		game.state.add("Boot",boot);
	game.state.add("Launch",launch);
	game.state.start("Boot");
})();
    </script>
</body>

</html>

	var bmd;
	var circle;

	var colors;
	var i = 0;
	var p = null;



var boot= {
	create: function(){
		this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
		this.scale.pageAlignHorizontally = true
		this.scale.pageAlignVertically = true
		this.scale.refresh()
		this.game.stage.backgroundColor = '#494b4c'
		game.state.start("Launch",launch);
	},
}

var launch ={
	create: function(){

		colors = Phaser.Color.HSVColorWheel();

		//  Create a Circle
		circle = new Phaser.Circle(game.world.centerX, game.world.centerY, 500);

		//  Create a BitmapData just to plot Circle points to
		bmd = game.add.bitmapData(game.width, game.height);
		bmd.addToWorld();

		//  And display our circle on the top
		var graphics = game.add.graphics(0, 0);
		graphics.lineStyle(1, 0x00ff00, 1);
		graphics.drawCircle(circle.x, circle.y, circle.diameter);

		p = new Phaser.Point();

	},

	update :function(){

		for (var c = 0; c < 10; c++){
			circle.random(p);

			//  We'll floor it as setPixel needs integer values and random returns floats
			p.floor();

			bmd.setPixel(p.x, p.y, colors[i].r, colors[i].g, colors[i].b);
		}

		i = game.math.wrapValue(i, 1, 359);

	},
}