Forums » Help » CocoonJS

I came across this wrapper for android and iOS, that does the same thing as iOSImpact and appMobi (it calls OpenGl and OpenAl functions instead of <canvas> and <audio>)

http://ludei.com/tech/cocoonjslauncher

I need to run my game on Android (as I don't have the resources to get an Ipad, a Mac, nor the experience to properly build and test on that enviroment), and appMobi is taking too long to release the Android version of DirectCanvas.

In order to use it I need to do the following:

1.- Remove the HTML entry point file.
2.- Create a Canvas object manually from JavaScript. If needed, substitute
document.getElementById
function calls by
document.createElement("canvas");
or
new Canvas();
3.- Put all your JavaScript in one file. Your whole JavaScript code should be in just one .js file.
4.- Create a zip file with your JavaScript file and game assets. The current version of CocoonJS only loads local assets.

I'm having issues with point 2. How can I tell impact to use that canvas created on runtime?

On system.js I modified the init function like this:

this.canvas = document.createElement("canvas");
		this.canvas.width=   window.innerWidth;
        this.canvas.height=  window.innerHeight;
        document.body.appendChild( this.canvas );
		this.resize( this.canvas.width, this.canvas.height, scale );
		this.context = this.canvas.getContext('2d');

But now I'm getting "Uncaught TypeError: number is not a function" message on my console. Any hints you can provide me with?

Examples of coocoonjs do something like this:

var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
document.body.appendChild(canvas);
ig.main('#canvas', MyGame, 60, 240, 160, 2);

Thanks mate, i'll give it a go and see what happens :-)

Edit_01: It worked! I could kiss you right now!
Edit_02: It does work on my browser, I still can't get it to work on my cellphone. There seems to be an issue where impact tries to get an .ogg file (tho I changed all my files to *.mp3 and all their paths to 'media/song.mp3' instead of 'media/song.' )

I am interested in using cocoonjs for my impactjs games. How I can run my game with this tool?
I have to put an index.html with this code? or is there any other mechanism?

Code in index.html:

var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
document.body.appendChild(canvas);
ig.main('#canvas', MyGame, 60, 240, 160, 2);

hey felipe

if you can share a working template, i and a lot of other would benefit....

I can't get Cocoon to do anything. It won't even console.log something from outside of the impact framework code.

I'm currently baking my code to produce one js file and including that along with my media directory in the zip. Is that the correct approach?

Ok, well I discovered one issue. I downloaded one of the sample .zips and unzipped it and zipped it back up and tried to deploy it and it didn't work. It seems there is something with the .zip format, although I'm not sure.

The originally downloaded .zip did work if deployed directly (no unzipping and rezipping).

I solved the zipping issue. I was zipping from outside the folder so the folder's relative path was being included. Calling "zip -rj zipfile.zip folder/*" did the trick.

Ok, I got it all working. The only code I had to add to my impact game was (in coffescript):

canvas = document.createElement('canvas')
canvas.id = 'canvas'
document.body.appendChild(canvas)

ig.main('#canvas', ArchitectGame, 60, ig.GameWidth, ig.GameHeight, 1)

@puzzleschool: Care to share your entire index.html file? That'd be much appreciated.

Got this working by adding the following code and removing the <canvas/> element from my index.html file. Actually removing the entire index.html from the zip package worked provided I had this code in my main.js method as CocoonJS doesn't need it.

Right before your main game initialisation code:

ig.main('#canvas', YourGame, 60, 480, 320, 1);

Put this:

var c = document.createElement('canvas');
c.id = 'canvas';
document.body.appendChild(c);

Then bake your main.js file and zip the media folder and game.min.js file.

Thanks to @amadeus for this:

http://impactjs.com/forums/help/setting-up-cocoon-js

Hi everyone,
We threw together a sample ImpactJS project at https://github.com/fragcastle/ImpactJS-CocoonJS-Example

Let us know if you like it! Feel free to send a pull request if you find any issues!

Thanks,
John from Frag Castle Games