How to start with CocoonJS

[totallybueno]

Hi there,

I have my game working perfectly on web, everything goes perfectly good... but I´m trying to try it as an app using CocoonJS and all I have is a black screen and the fps counter.

 

I have a .html and two folders, one with the .js files and another one with all the assets. I tried with all the .js files in the root of the zip but I have the same result.

 

Can anyone tell me how to pack a proper zip for use with Cocoon?

[Ezelia]

Hi

 

there is no "magic" solution for all issues with CocoonJS

 

but here are some directives to help you debug your problem.

1 - try to compil your application on a webview/webview+ container, this should work since it has the same behaviour as a mobile browser. if the game performance is good then you're done .... but webview/webview+ are not as performant as canvas+ ....

2 - if (1) didn't work or didn't satisfy your need, then download or build a cocoon launcher, put your zip package on a server, and open it from cocoon launcher, tap the FPS button, you'll get a screen with a JS console where errors/warnings are displayed. resolve them and your game should work.

 

3 - if your resolved your errors, in step (2) the game worked on launcher but the compiled version don't work, your final option is : adb logcat .... here you'll need to put some console.log in your code to identify when the game starts and the potential errors it throws .

 

 

most of the time, the black screen issue is related to a resource (image, sound, json ...etc) you are trying to use while it's not yet loaded.

browsers are more tolerant to this in some cases while CocoonJS will just fail.

 

try this and tell me if it help

 

[totallybueno]

Ok, I didn´t know that the FPS thing was a button to show the console

 

Now at least I know that the problem is loading a xml for a bitmap font.

 

It worked Ezelia, now debugging time (why the hell I´m happy, debugging is not so cool!)

[totallybueno]

Well, webview running smoothly, Webview+ and Canvas+ running at 3 fps

 

I´m pretty sure I can do it better...

[Ezelia]

really strange !
both Webview+ and Canvas+ should have better performace thant webview ...

are you using a specific engine ? or from scratch ?

what size are your images ?

are you using requestanimationframe ?


btw : from the CocoonJS debug screen you can profile CPU and Memory usage, so you'll know what's slowing down your code

[totallybueno]

I´m using Phaser, the canvas is 720x1280 (rescaled with window.innerHeight and .innerWidth) and the images are just a background and little sprites, that´s not the problem.

 

I´ll check later the CPU usage... thanks for the tips Ezelia.

[totallybueno]

So, now my game is working with bitmap fonts, but something weird is happening when trying the game with cocoonjs launcher:

 

webview: no fps but it runs smoothly, almost perfectly

webview+: not working, black screen

canvas+: 1/2 fps

 

WTF!?!?!

[Ezelia]

this is really weird ... have you tried Memory/CPU profiling ?

 

what version of Phaser do you use ?

[totallybueno]

I´m using 2.0.2 and I´m trying to find de .json that the launcher is saving with the profile

[totallybueno]

Well, it was the render function... without that is running at 60 fps in canvas+

[Ezelia]

do you mean a custom render function ? or the native Phaser render function ?

[totallybueno]

do you mean a custom render function ? or the native Phaser render function ?

 

 

The native one, without that function commented the game is running at 60fps in Canvas+, with that function at  1/2fps, and dude, this is the code... soooooo weird:

render:function() {        this.game.debug.body(this.hero);        this.game.debug.body(this.background);    },

[Ezelia]

have you tried to upgrade Phaser to 2.0.7 ?

there was an issue with a Phaser version can't remember if it was 2.0 2

[totallybueno]

I´ll update later, for sure, but now at least is working properly

 

Thanks mate

[Videlais]

 

The native one, without that function commented the game is running at 60fps in Canvas+, with that function at  1/2fps, and dude, this is the code... soooooo weird:

render:function() {        this.game.debug.body(this.hero);        this.game.debug.body(this.background);    },

 

To answer why using render is so much slower, it's because it is making extra drawing calls per frame. Instead of caching the visual data and updating sections, game.debug makes new calls every single render call. That's a huge number of wasted drawing calls that would drop the frame rate tremendously on any platform and especially on mobile devices.

 

As well, to backup @Ezelia's comments, upgrading to Phaser 2.0.7 is recommended. There have been a number of CocoonJS-related patches between 2.0.2 and 2.0.7 -- and more to come in 2.1 too.

[totallybueno]

Thanks for the tip, updated to 2.0.7