Common Phaser + CocoonJS issues

[Michel (Starnut)]

@rodrigogrow I'll be testing audio playback with Phaser 2.0.4 under CocoonJS 2.0 on iOS 7.1.1 these days (probably even today). I'll let you know how it goes and if I run into the same issues.

[Zaidar]

 But looking at your code I don't think I ever explicitly had to call .render() or .refreshBuffer() to make it work.

 

Well, thanks for this already, I don't know why it was here, but it was really slowing my game without any explicit purpose, thanks for that

 

Now, I'll try to see where the problem comes from by starting a new dummy game and debug on cocoon. If I find something I'll tell here.

[Zaidar]

Update: I used this code to test

(function(){  var GameState = {    create: function(){      this.stage.backgroundColor = 0xff2fff;           this.line = game.add.bitmapData(320, 480);      this.lineSprite = game.add.sprite(0, 0, this.line);    },    update: function(){      this.line.clear();      this.line.ctx.beginPath();      this.line.ctx.moveTo(game.width / 2, game.height / 2);      this.line.ctx.lineTo(this.input.activePointer.x , this.input.activePointer.y);            this.line.ctx.lineWidth = '5';      this.line.ctx.strokeStyle = '#ffffff';      this.line.ctx.closePath();      this.line.ctx.stroke();    }  };  var game = new Phaser.Game(320, 480, Phaser.CANVAS, '');  game.state.add('game', GameState, true);})();

It works perfectly on cocoonjs so I think my problem comes from my code. Sry about that ! and thx for help

EDIT : Yes it was an dumb error, the kind of error which makes you spend hours on stupid debug ... Otherwise it works good !

[Nambew]

Guys,

 

I'm using Phaser 2.0.4 with the latest CocoonJS on iOS 7.1.1. I just figured, if I turn off "WebGL Enabled" in the CocoonJS Launcher Settings and hard restart the game (kick it out of the phone's memory) everything renders just fine! No more missing Sprites and/or TileSprites. I have a perfectly rendering game running at 60 FPS (well, not at the very beginning but afterwards).

 

If I turn WebGL Enabled back on (I think that's the default) everything breaks.

 

Can you guys confirm this?

 

You can turn off WebGL in the Cocoon launcher, but I don't see any option on the dev portal on ludei for compile project.

[Michel (Starnut)]

You can turn off WebGL in the Cocoon launcher, but I don't see any option on the dev portal on ludei for compile project.

 

True. Can you confirm this problem still persists in the compiled app while it's fine with the setting turned off in the launcher? I didn't have time to test that yet. If so, we need to file a question and ask them how to turn it off.

 

But I wonder why they put a button there in the first place, if there's no way to apply this setting to the final app...

[haden]

Hi Folks, 

 

I'm trying play sound on cocoonjs 1.4.7 (ios 7.1.1) but I didnt have any success.

 

Someone can help me?

 

Using: 

- Phaser 2.0.3 (WebGL)

- Cocoonjs 1.4.7

- iphone 4S

 

Menu.prototype = {

 

  preload: function() {

      this.game.load.audio('bg_sound', 'assets/audio/bg_sound.mp4');

  },

 

  create: function() {

 

      this.bgm = this.game.add.audio('bg_sound', 1, true);

      this.bgm.play('',0,1,true);

  }

 

...

 

Regards.

 

 

Try playing the sound the first time muted, then it should play after that fine, at least this solved it for me last time I tried. This is how you play it muted:

this.bgm.play('', 0, 0);

[Michel (Starnut)]

 

I'm trying play sound on cocoonjs 1.4.7 (ios 7.1.1) but I didnt have any success.

 

Someone can help me?

 

Using: 

- Phaser 2.0.3 (WebGL)

- Cocoonjs 1.4.7

- iphone 4S

 

 

I ran some audio tests myself now and I'm having similar issues: no sound playback at all - but under a slightly different setup:

 

- Phaser 2.0.4 (Canvas+)

- CocoonJS 2.0.0

- iPhone 5 iOS 7.1.1

 

But I do get this Phaser error message, which is weird:

 

Phaser.Loader error loading file: snd-clock from URL null

 

Weird because:

1. I've tested the sound in the browser before and it played well.

2. If I pass it an incorrect URL I get a totally different message telling me the sound could not be found.

3. It only appears for m4a sounds - wav, ogg and mp3 don't even seem to be considered.

 

Afterwards, I get another Phaser error, of course:

 

Phaser.Cache.getSound: Invalid key: "snd-clock"

 

This one's clear, but I guess Haden's hack won't help with this.

 

Apparently CocoonJS does not support WebAudio, which could be a hint, but I honestly have no idea where to even start looking... :-/

[Michel (Starnut)]

In the meantime I was able to compile my project to check if the WebGL issues reappear in the compiled version and, as expected, they do. I have now filed a question under "Problems & Troubleshooting" in hopes that Ludei will point me to a solution for this problem.

 

If you guys care, you can upvote the question here:

 

http://support.ludei.com/hc/communities/public/questions/201838788-Turn-WebGL-Enabled-off-in-final-app-

 

Maybe that'll help get some speedy replies.

[Michel (Starnut)]

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 that M4A isn't even supported under CocoonJS - not even on iOS. So here goes:

 

Setup (as mentioned above):

- Phaser 2.0.4 (Canvas+)

- CocoonJS 2.0.0

- iPhone 5 iOS 7.1.1

 

1. I tested M4A, WAV, MP3 and OGG. M4A wasn't even loaded and only MP3 and OGG did actually play back.
EDIT: We have MP3, OGG, WAV on iOS, OGG and WAV on Android.

 

2. Just like in some other mobile browsers, playback only worked after one initial touch, after preload was complete.
EDIT: It turned out to be absolutely essential this touch happens BEFORE any audios are being loaded into the game. See this post for details.

 

3. A previous muted playback as suggested by @Haden in the above post, was not necessary.

EDIT: Still isn't if you get touch input before loading.

 

4. Simultaneous playback of multiple audios works (I tested with two).

 

5. I experienced some slight lags between playbacks when looping. The lags appeared more frequent the longer the audio was.

 

These may be different for CocoonJS 1.4.7 and other versions of Phaser.

 

What. A. Day!

I guess, I can go home and sleep soundly now.

 

@videlias: You may have to update some stuff on the front page.

[Nambiar]

Sprite.events.onInputDown (or any other one of the onInputX series) do not seem to be working on the Canvas+ implementations on Cocoon. 

It works fine with Webview+ . But then audio seems to be messed up on Webview. 'tis frustrating.

[Michel (Starnut)]

@Nambiar: My input events work absolutely fine with Canvas+. If you posted your concrete setup (Cocoon version, Phaser version, device, OS) and a bit of sample code, we could actually help you find the problem.

[Nambiar]

I think I was scaling my game wrong. I dug up a recent thread ( http://www.html5gamedevs.com/topic/4960-phaser-cocoonjs-scaling/ )

and got my scaling somewhat right. Along with that, the sprites now respond to touch. 

 

Here's the code I use for scaling...

if(navigator.isCocoonJS){            cocoonjsphaser.utils.fixDOMParser();            this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            // this.game.scale.setShowAll();            this.game.scale.pageAlignHorizontally = true;            this.game.scale.pageAlignVeritcally = true;            this.game.scale.setScreenSize(true); //this.game.scale.refresh();        }

While its satisfying to have almost everything working fine, there's just one little snag left before I can publish ...

 

 

 

Why is the bottom area messed up?

I have tried adding the following to every 'create' in the game....

this.game.add.sprite(0,0,'');

but nothing changes...

[Nambiar]

Oh.. disregard above... 

to fix, I simply had to change scaleMode to EXACT_FIT. 

 

[Videlais]

1. I tested M4A, WAV, MP3 and OGG. M4A wasn't even loaded and only MP3 and OGG did actually play back.

 

2. Just like in some other mobile browsers, playback only worked after one initial touch, after preload was complete.

5. I experienced some slight lags between playbacks when looping. The lags appeared more frequent the longer the audio was.

 

 

Hey, everyone. Sorry I've been so slow to answer lately. As you might imagine from the timestamps on my early posts for this stuff, I've been fighting against -- and, yes, sometimes with -- CocoonJS for several months now. I decided pretty recently to just take a break from all things CocoonJS for a little awhile.

 

First, though, thank you, @Starnut, for doing that work. As you wrote, and I confirmed on Ludei's site, CocoonJS does not support M4A at the moment. Under the "Audio" section for 1.4.7, they list “audio/wav”, “audio/x-wav”, and “audio/ogg” for Android. For iOS, they say “audio/mpeg”, “audio/mp4”, “audio/mp3”, “audio/x-wav”, and “audio/ogg”. (I double-checked what I initially wrote back in February and it is still correct. For Android, that's WAV and OGG. For iOS, that's MP4, OGG, MP3, and MPEG.)

 

I was also happy to read that turning off WebGL fixed things in the Launcher. That's good to know. But, of course, as I expected with that too, you can't yet turn off the option for cloud compiled projects. (If we don't get a response back for over a week for that question, @Starnut, I'll send it along to some contacts I have at Ludei and ask them about it. That's no guarantee that they will add the option any time soon, but I could probably get an official answer that way.)

 

(To give some perspective on the image issue between Phaser 2.0.X and CocoonJS 2.0: both parties have been aware of it since a few days after it started many weeks ago. From my own communication with Rich and my contact at Ludei, neither was sure what was causing it. So, it would be nice if it could be temporarily resolved by simply disabling WebGL. But, on the other hand, I'd much prefer to figure out the root cause and fix that at some point.)

[Nambiar]

So, as I just realized, i got everything working fine on the launcher and now there's no button to switch off webgl on the cloud compiler. *sigh*

 

Btw, when WebGL is turned on, its only a problem of scaling... the game occupies only a part of the screen, rest everything works fine.

[Michel (Starnut)]

Hey Videlais,

 

No worries. I've had my share of CocoonJS trouble, too, now and I can totally understand you had to take a break from it

 

Thanks for the additional info and that great link with the HTML5 feature set. Never seen that one before. Might turn out quite helpful.

 

For Audio I'm going to go with OGG (EDIT: WAV) since it seems to be the only format working on both platforms.

 

Sadly, the "WebGL Enabled" bug is the most crucial part and absolutely vital for my project and I'm on a very tight schedule here. I bet everything on CocoonJS in January hoping these things would be fixed, by now, and am a little disappointed about the progress that the Phaser-CocoonJS integration has made since then, especially since these issues have been known for so long. Ludei lists Phaser and Pixi on their front page and says integration works seamlessly and it just doesn't.

 

Also, I don't get why quite some of the launcher settings aren't available in the cloud compiling system. Not even to premium users. What use is it having them in the Launcher, if they don't work in the final product?

 

Well, at least we found some hacks to work around e.g. the image display bug. But, sadly, it does not work for TileSprites. I'll have to replace those manually with regular sprites, I guess, since I'm running out of time. I need to submit my app to stores on Friday taking into account Apple's review time. I don't expect Ludei to provide a solution just in time. So far, there has been no feedback, but then again, I posted the request on the weekend and it's only Monday morning 4am in SF right now

 

Thanks for keeping an eye on this, though. It's good to know that you actually have these contacts and there are options to directly commute with them.

[Videlais]

Sadly, the "WebGL Enabled" bug is the most crucial part and absolutely vital for my project and I'm on a very tight schedule here. I bet everything on CocoonJS in January hoping these things would be fixed, by now, and am a little disappointed about the progress that the Phaser-CocoonJS integration has made since then, especially since these issues have been known for so long. Ludei lists Phaser and Pixi on their front page and says integration works seamlessly and it just doesn't.

 

Also, I don't get why quite some of the launcher settings aren't available in the cloud compiling system. Not even to premium users. What use is it having them in the Launcher, if they don't work in the final product?

 

Oh, believe me, I know how you feel about the disappointment. I started around late January on this integration too and had come pretty far -- writing a Ouya gamepad plugin, XML parser for CocoonJS, and solving many of those other original problems myself -- before the images broke in the 2.0 upgrade of both Phaser and CocoonJS several weeks ago. (If anyone is curious, I also wrote patches to add in basic text support for both Pixi.js and Phaser.js. The pull requests date two months ago.)

 

The larger problem with most of this is that there just isn't that much interest in solving things as they come up. Many of us are reporting issues with either Phaser or Ludei, but as I know from having done the hard work myself, it often takes a great deal of time to track done the specific line and then come up with a check or hack to get around it. In every case I've personally solved with the integration between Phaser and CocoonJS, it has always been a matter of walking through the tens of thousands of lines of code manually, checking the calculations or output of different functions, and then reverse engineering where something is going wrong.

 

 

But, anyway, on to the most recent audio issue...

 

I did some audio testing today myself with Phaser and CocoonJS. (Test is here. And ZIP test file is here.)

 

Using OGG with fallback to MP4 and MP3, I was able to play the audio successfully in Android in CocoonJS 1.4.7 and 2.0 using Accelerated Canvas/Canvas+ modes. In iOS 7.1.1, it worked as expected in Accelerated Canvas and in System WebView with CocoonJS 2.0. As Starnut pointed out, you do have to tap to start the audio, though. (And I updated the top post to reflect this on 10 May.)

 

So, I'm of the opinion that there doesn't seem to be any current audio issues between Phaser and CocoonJS. Well, other than needing certain file formats per platform.

[mamwalter]

I noticed that when i add JPG image, there is a small black border on the right and on the bottom with iOS. No such things with PNG nor GIF.

 

Cocoon Launcher 2.0 and Phaser 2.0.4.

[Videlais]

I noticed that when i add JPG image, there is a small black border on the right and on the bottom with iOS. No such things with PNG nor GIF.

 

Cocoon Launcher 2.0 and Phaser 2.0.4.

 

I was able to confirm this. It appears with any JPEG encoded image on iOS in CocoonJS 2.0, but only in CANVAS mode. I did not see the border when using WebGL. (I also tested on Android in both CocoonJS 1.4.7 and 2.0 and across all modes. The border did not appear at all on Android.)

 

Phaser: Test is here; ZIP of Canvas test is here; ZIP of WEBGL test is here.

 

Hoping this was an issue with that particular file format and CocoonJS, I also created a low level, load-and-loop-draw example too. However, the border did not appear again on iOS in CocoonJS.

 

Low level: Test; ZIP file.

 

So, after a few hours messing around with this, I'm not sure what's causing the border, but I have confirmed that it does appear with JPEG images when using both Phaser 2.0.4 (with CANVAS mode) and CocoonJS 2.0, but only on iOS.

[Videlais]

If you guys care, you can upvote the question here:

 

http://support.ludei.com/hc/communities/public/questions/201838788-Turn-WebGL-Enabled-off-in-final-app-

 

Maybe that'll help get some speedy replies.

 

I e-mailed my contact at Ludei and got back a reply on this. The sort-of-official message is that turning off WebGL support (or not testing for it) should probably be done in JavaScript space, not necessarily from the cloud compiler options themselves.

 

I specifically asked about what the the "WebGL Enabled" toggle did and he answered that all it does is tell the launcher to return null for the calls to the following:

canvas.getContext("webgl") || canvas.getContext("experimental-webgl")

My current thinking, then, is that Phaser might need a flag or some type of check for if Phaser.CANVAS has been set, and if so, to not even bother doing the testing for WebGL within the Phaser.Device object. It's either that or we just test for navigator.isCocoonJS, and if it's there, avoid triggering WebGL support at all through testing for it.

 

Although I haven't had time to test things out myself yet, it should be a matter of checking if "this.cocoonJS" is true within the _checkFeatures function and avoid checking for WebGL support.

[korgoth]

I e-mailed my contact at Ludei and got back a reply on this. The sort-of-official message is that turning off WebGL support (or not testing for it) should probably be done in JavaScript space, not necessarily from the cloud compiler options themselves.

 

I specifically asked about what the the "WebGL Enabled" toggle did and he answered that all it does is tell the launcher to return null for the calls to the following:

canvas.getContext("webgl") || canvas.getContext("experimental-webgl")

My current thinking, then, is that Phaser might need a flag or some type of check for if Phaser.CANVAS has been set, and if so, to not even bother doing the testing for WebGL within the Phaser.Device object. It's either that or we just test for navigator.isCocoonJS, and if it's there, avoid triggering WebGL support at all through testing for it.

 

Although I haven't had time to test things out myself yet, it should be a matter of checking if "this.cocoonJS" is true within the _checkFeatures function and avoid checking for WebGL support.

 

I tried to comment out this line: https://github.com/photonstorm/phaser/blob/dev/src/system/Device.js#L457  and add the following: this.webGL = false;

 

seems like this solves all my webgl related graphics problems when i turn on the "webgl enabled" option in the launcer.

[Michel (Starnut)]

@Videlais: Thanks for contacting Ludei directly. That's great news since it sounds like we can actually fix it. What I don't get is why they didn't answer publicly to my request, which, by now, has six votes and two more comments with people sharing the issue. Especially, since they obviously know the answer to that one, I don't know what actually kept them from letting us know. Quite disappointing. If I'd had that information a week ago, I may not have lost a day fixing things manually by replacing TileSprites and stuff. Oh well... for the next project.

 

In other news: I was struggeling with sound under CocoonJS again on the week end. It turned out that everything behaves quite differently if you don't trigger the sounds directly on start up. Essentially, nothing worked reliably at all. Sometimes the sounds would play, sometimes not. There didn't seem to be a pattern except one: If I tapped before or at the beginning of the load process we had more, if not all sounds play.

 

So, eventually, I tried this and it did the trick:

 

Before preloading any audio (so actually in my Boot state), I sneak touch input from the player by letting him choose whether she wants to start a new game or continue the old one. After that selection I load everything I didn't need at that point, including all audio (that first click has to go silent) displaying the preloader and sound always works reliably afterwards. That actually solved all of our problems.

 

It seems that sound just won't work reliably if you don't get user input before preloading the audio files (and Phaser probably does something in the background that should be done after the touch occured).

 

Also, I've stuck with WAV for now, since it works on both Android and iOS but played back cleanest on iOS, especially when looped. Looping in general, sadly, still is an issue, though. I've experienced quite some lags when looping on Android (Nexus 7 1Gen and Nexus 5). Sound playback works actually way better within Chrome on both devices.

 

Well, but it all looks way better than only a week ago now. And though I've had some very frustrating moments with CocoonJS up until now I'm quite happy with what I submitted to the App Store yesterday

 

Let's hope all of this improves some more turns into actual fun into the very near future

 

Note: I'll update my above posts concerning audio, so they're not misleading.

 

EDIT: Just a thought: it may be enough to add the audios to the game (via game.add.sound) after the first click occured. I'm not sure I've checked that. Then again I've checked so much this week end I'd be surprised if I hadn't tried that option. Well, if somebody cares to give it a shot, I'd be curious about the results.

[Michel (Starnut)]

And on a side note: if anyone is looking for a way to store information like player progress with CocoonJS, localStorage worked like a charm. No complications there. No extensions needed.

[Nambiar]

I tried to comment out this line: https://github.com/photonstorm/phaser/blob/dev/src/system/Device.js#L457  and add the following: this.webGL = false;

 

seems like this solves all my webgl related graphics problems when i turn on the "webgl enabled" option in the launcer.

 

Oh wow... thanks!

 

[Zaidar]

As phaser is only 2D what is the point of putting phaser in webgl and then turning it off in Cocoonjs ? Does it still gives improvement performance compared to canvas context ? (Sry for maybe stupid question)