Jump to content

Common Phaser + CocoonJS issues


Recommended Posts

  • Replies 302
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Last update of this information was 13 August 2014.   Note: As of this writing, CocoonJS (2.0.*) comes in a total of three modes.   [system] WebView creates an instance of the default browser for

Good news, everyone: I got audio to work! (Within the CocoonJS Launcher. Will check compiled app and reconfirm. EDIT: Works!).   Thanks to an idea from @Haden (thanks again for that), I found out th

What an awesome post - thank you And just so you know I've just made all of the above changes into the 1.2 core version.

Posted Images

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+.

Link to post
Share on other sites
  • 2 weeks later...

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?

Link to post
Share on other sites

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 :)

Link to post
Share on other sites

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. 

Link to post
Share on other sites
  • 1 month later...

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

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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

 

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

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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!

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 1 month later...
  • 1 month later...
  • 3 weeks later...
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.

 


 

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

Link to post
Share on other sites
  • rich unpinned this topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.


×
×
  • Create New...