Common Phaser + CocoonJS issues

[Gods]

Can anyone link me a open source phaser+cocoonjs game with 60+ FPS steady for all devices? 

No matter what I do I cant get steady 60 FPS even with simple flappy bird clone :/ 

I need to see how people are coding to get steady 60 FPS thanks! 

[patmood]

Here's one of mine that works perfectly in cocoon: https://github.com/patmood/koala-climb

 

Hopefully it helps someone. I still have a few games that I can't get to work but I'm using the above as a working template.

[Gods]

Here's one of mine that works perfectly in cocoon: https://github.com/patmood/koala-climb

 

Hopefully it helps someone. I still have a few games that I can't get to work but I'm using the above as a working template.

Do you think no sound is the reason why its stable 60FPS?

[jdnichollsc]

How Can I use “textureReduction” with Phaser to reduce the textures (Big images with spritesheets)?

Regards, Nicholls

[Gods]

The problem I have is figuring out how to scale everything without wrapping it in a div and using css width: 100%, height: 100% since that doesnt work in Cocoonjs Canvas+

 

[Raicuparta]

My game seems to be running fine with Canvas+, but with BitmapData the circles I draw are very pixelated. It might be that it just changes the resolution of the entire game to a lower one, but I can't really tell looking at the other sprites. If this is to help performance, I'm ok with it, but I'd like to at least have an option to toggle it.

Any way around this? Seems to look much better on Webview and Webview+.

[yougotashovel]

Hello, 

 

@valueerror, I've been looking at this problem, and it's not gonna be an easy one to solve. It is definitely a bug on our side, but it's a high-level one, regarding how the pause, stop and play operations should behave. This, combined with how OpenAL handles buffering (already committed chunks of audio cannot be stopped from our side) means we have big trouble handling calls to pause and play in rapid succession.

 

In this case, we have 2 audio buffers of 100ms each which as I said we cannot manually stop once committed to OpenAL, so when you call pause it will take 100-200ms for the sound to actually stop playing.

 

However, if you call play right after that, the audio will start playing immediately from the next point in the audio file, which is 200ms in the future, as those next 200ms will be in-flight inside OpenAL at this point. This creates the effect you're experiencing where you miss 200ms of audio, as Phaser does a pause/play combination in the same frame to handle audio looping (probably to support audio sprites).

 

This would unfortunately be quite difficult for us to solve without re-writing half of our audio system, as it affects other parts of how it is structured.

 

To fix this issue in Phaser, I'd recommend finding a way to avoid doing pause+play to do the looping, and instead rely on the loop property of the audio objects. I understand this won't work for audio sprites, but for typical background music scenarios it should work fine.

 

Sorry for the inconvenience. 

 

Regards. 

 

@ludei I've been experiencing this same issue, has there been any updates to this since december?

 

In my case i have an audiosprite with 10 sounds, and when i call play on any part of the audiosprite it appears to play the first few-hundred milliseconds of the whole file, then the part that i have referenced.

 

@valueerror did you find a good workaround for this yet?

[valueerror]

i reported this on github and rich told me that he fixed this on the phaser side in the dev branch...  unfortunately i couldn't test it because witch phaser 2.3 my game throws a hundred errors and cocoonjs won't load my game anymore..  no matter what i do - canvas or webgl - i always get a black screen nothing more..

 

so i'll stick to crosswalk..  no hacks, no errors, no custom json importers, no button issues.. just a working game -- well.. and a huge filesize but that's okay

[metalNumb]

Is there a way to use accelerometer in phaserJS and get it to work in CocoonJS ?

I have tried and it did not work unfortunately. 

[Ludei]

Hello, 

 

My game seems to be running fine with Canvas+, but with BitmapData the circles I draw are very pixelated. It might be that it just changes the resolution of the entire game to a lower one, but I can't really tell looking at the other sprites. If this is to help performance, I'm ok with it, but I'd like to at least have an option to toggle it.

Any way around this? Seems to look much better on Webview and Webview+.

 

There are several quality parameter in the launcher (supersampling, path render quality, ...). Have a look at them in settings, I am sure you will find helpful. 

 

The problem I have is figuring out how to scale everything without wrapping it in a div and using css width: 100%, height: 100% since that doesnt work in Cocoonjs Canvas+

 

 

Well, you can always paint it in the right dimension using this: http://www.w3schools.com/tags/canvas_drawimage.asp

It should be easier if you are using a framework. 

If not, Webview+ has pretty good results too. It is not as fast as Canvas+, but it will allow you to use DOM elements. 

 

Is there a way to use accelerometer in phaserJS and get it to work in CocoonJS ?

I have tried and it did not work unfortunately. 

 

It should work fine. Those functionalities are exposed. If you still didn't manage to make it run , please, provide a test case and we will have a look at it. 

 

 

@ludei I've been experiencing this same issue, has there been any updates to this since december?

 

In my case i have an audiosprite with 10 sounds, and when i call play on any part of the audiosprite it appears to play the first few-hundred milliseconds of the whole file, then the part that i have referenced.

 

Not yet. I am sorry. I hope we can think about a solution soon. 

 

Regards. 

[Cedric]

Hi every one,

 

I'm making a doodle jump remake, everything is doing great except on mobile, I first had a problem that everything is antialiased or smoothed in web browser and in the cocoonJS launcher.

The browser part is fixed.

In the launcher everything is still blurry and not looking like pixel art.

How do I make it like pixelart ? and why is this happening ?

 

PS: my basic canvas is 52 by 100 so it can scale easely to device with 19:6 ratio 

 

for convenience I've placed my game on dropbox:

https://www.dropbox.com/s/cl29bky9lmbn8mx/doodle%20jump%20remake.zip?dl=0

 

Thanks in advance

doodle jump remake.zip

doodle jump remake.zip

[Cedric]

please use the attachments

they weren't showing up as uploaded, the link is relevant aswell

[Cedric]

please use the attachments

they weren't showing up as uploaded, the link is relevant aswell

[Ludei]

Hello, 

 

You mention the launcher, but not the environment. Could you please tell me which one are you using? If it is Canvas+, you can have a look at this method: 

http://doc.ludei.com/3.0.5/Cocoon.Utils.html#toc8

This is the file you need to include as a script: https://github.com/ludei/cocoonjs-plugins/blob/master/build/cocoon.js

 

Regards. 

[Cedric]

Hi ludei,

 

realy cool to see you here

 

I was using canvas+.

thank you for the answer, I'll have to check the link later though because I cant access github on any of my browsers.

 

Best regards,

Cedric 

[Cedric]

thank you sooooo much it all works like a charm now ,

 

so, for every game I make I need to include the cocoon.js file and the Cocoon.Utils.setAntialias(false); command in the bootState and it all works.

 

Thank you again and I love what you are doing.

another question besides this: what is the accual difference between the premium version and the standard version of cocoonJS?

 

Best Regards,

Cedric

[Ludei]

Hello, 

 

Currently the only differences are the possibility of using the plugins (ads, social integration, etc, because they require additional configuration at the cloud) and, if I am not mistaken, the size of the project to upload at the cloud. Unless you need one of those services, you can keep using the normal plan. In any case, both are free . 

Regards. 

[hbkmad]

Hello,

 

When I used Cocoon.App.openURL(..) It lost focus from the webview and phaser stoppend rendering the game. Is there a way to return the focus after the player closes the page? Because I tried clicking on the app but it didn't work it was just frozen. I used normal Webview.

 

Thank you!

[muoji]

Hi,

 

I’m making a simple runner game for mobile with phaser and cocoonjs. I have a simple parallax with 3 layers, platforms handled by the tiled plugin, and some collectibles. Everything works fine in the browser (tested with both firefox and chromium) and on iOS with cocoon, but when testing on android the game gets choppy. It's still playable, the framerate stays around 62, but the movement of the camera is sometimes choppy, as if the game was frozen for a very brief time.

 

At first I was moving the player and setting the camera to follow it, but then I tried to have a fixed camera/player and move the platforms/items/parallax, but the problem stays the same. I even made an empty project with only a tilesprite and the scrolling is still choppy on android. It’s not always choppy, only at some random times, but it’s still noticeable.

 

Here is the code I used:

new Phaser.Game({    width: 1136,    height: 640,    renderer: Phaser.CANVAS,    state: {        preload: function() {            this.game.load.image("bg", "bg.png");        },        create: function() {            this.bg = this.game.add.tileSprite(0, -320, 10000, 1024, "bg");        },        update: function() {            this.bg.tilePosition.x -= 2 * this.game.time.elapsed / 10;        }    }});

Is there something I’m doing wrong?

 

Thanks

[totallybueno]

FIXED

[Tom Atom]

@valueerror, @yougotashovel: how did you solved audiosprite problem? By loading and playing individual sounds from individual sound assets?

[likon]

Did you guys tried to compile official cocoonjs and phaser tempalte: https://github.com/CocoonIO/cocoon-template-phaser.
It doesn't work on my android, black screen only. Someone had the same problem?

[tips4design]

It seems like, at the current versions (Phaser 2.4.1 and Cocoon 2.2.2), Phaser.WebGL is much slower in all modes (Webview, Webview+, Canvas+). With Phaser.Canvas every mode gets 50fps+ with WebGL, webview modes get 30+ FPS and Canvas+ under 10FPS. Am I doing something wrong?

[Alexalten]

Hi,

 

I've made a simple test to add music (a ogg file) to my project (with Phaser). But it doesn't work.

Everything is ok on PC. Probably I've made some mistake.

 

Then, I've also tried using Cocoonjs extensions, but the result is the same. Everything works on desktop, not after compiling on Android.

 

Neither with the "onlclick" option things work (as suggested on Ludei forum http://support.ludei.com/hc/communities/public/questions/201351853-Sound-doesn-t-run-in-Webview-without-a-click-2-0-1-?locale=en-us).

 

Here the code I've used in my latest test (with Cocoonjs extensions):

 

void function () {

CocoonJS.Audio = function () {return this}

CocoonJS.Audio.prototype = {

audio : null,

setAudio : function (audio) {this.audio = audio; this.audio.load(); return this},

loop : function (loop) {return this},

play : function () {this.audio.volume = 0.5; this.audio.play(); return this},

pause : function () {this.audio.pause(); return this}

}

} ()

 

void function () {

CocoonJS.Music = function () {return this}

CocoonJS.Music.prototype = {

audio : null,

setAudio : function( audio ) {

this.audio = audio

this.audio.load()

this.audio.addEventListener ('ended', function (audioEvent) {audioEvent.target.playing = false; console.log("Audio ends playing.")}, false)

return this

},

loop : function () {

if (!this.audio) {console.log ("audio not present."); return}

this.audio.loop = !this.audio.loop

return this

},

play : function () {

if (!this.audio) {console.log ("audio not present."); return}

if (this.audio.playing) return

this.audio.playing = true

 

this.audio.play ()

 

return this

},

pause : function () {

if (!this.audio) {console.log ("audio not present."); return}

this.audio.pause ()

this.audio.playing = false

return this

}

}

 

} ()

 

var game = new Phaser.Game(600,900,Phaser.CANVAS,"",{preload:onPreload, create:onCreate, update:onUpdate});

 

function onPreload() {

game.stage.backgroundColor = '#000000';

 

game.load.image("background", "assets/bg-desert.png");

game.load.image("buttonmenu", "assets/play.png");

 

 

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

game.scale.setScreenSize(true);

}

 

 

 

 

 

 

function onCreate(){

 

 

// The scrolling background

starfield = game.add.tileSprite(0, 0, 600, 300, 'background');

 

 

playbutton = this.add.button(200, 600, 'buttonmenu', function () {

 

soundbg = new Audio()

soundbg.src = 'resources/musics/music.ogg' //or '.mp3'

soundbg.loop= true;

var ms = new CocoonJS.Audio()

ms.setAudio(soundbg)

 

ms.play()

 

}, this);

 

 

 

}

 

function onUpdate(){

 

starfield.tilePosition.x -= 1.5;

 

 

}

 

 

many thanks in advance for your help and sorry for my long post!

 

Alex

[tips4design]

Why don't you use the Phaser.Sound manager? I simply load the sounds in Phaser and it works with CocoonJS.