Common Phaser + CocoonJS issues

[Videlais]

@Binary Moon: It's as @Starnut wrote, compiling a launcher for the platform and then loading it. In my case, I've been using an Android 2.0.2 launcher and, like you, with a iOS 2.0.1 as a backup test environment.

 

 

@ghostrifle: Hmm. I just tested your case and it worked for me in CocoonJS (iOS, 2.0.1). What is your testing environment? Let's rule that out first.

 

 

@korgoth: I'm not surprised shadows don't work. Text working at all without a work-around hack is still new. Still, yeah, I'll start making separate test cases per text issue (multi-line, shadows) today.

[ghostrifle]

@ghostrifle: Hmm. I just tested your case and it worked for me in CocoonJS (iOS, 2.0.1). What is your testing environment? Let's rule that out first.

 

 

 

Hi!

 

I tested it on an iPhone 5S with the lastest iOS7 and Cocoon 2.01 and 2.02 (custom build)

[Videlais]

I tested it on an iPhone 5S with the latest iOS7 and Cocoon 2.01 and 2.02 (custom build)

 

Huh. Me too. Other than using 2.0.1, we've got the same setup on iOS.

 

When you tested the case, it loaded the 'background.png' image as a sprite at 0,0 and the button in the middle of the world space, right? Tapping or clicking on the button (the pink square) should have produced the message "Button touched/clicked!" in the console.

[ghostrifle]

Yes. Exactly this way. I also recorded a video to show what happens. If you look correctly. The button appears for ca. 1 frame:

 

https://www.dropbox.com/s/vfm094s2a5vm5ok/VID_20140726_090440.mp4

[Videlais]

Yes. Exactly this way. I also recorded a video to show what happens. If you look correctly. The button appears for ca. 1 frame:

 

https://www.dropbox.com/s/vfm094s2a5vm5ok/VID_20140726_090440.mp4

 

This is strange.

 

I recorded what was shown on my iPhone too just now. And I can see the pink square on mine.

 

I'm putting Buttons back on the list, but I'm definitely going to have to do more testing on this.

[Videlais]

So, bad news and a mea culpa here.

 

After finally figuring out why @ghostrifle and I were getting different results, I went back and re-tested everything. It turns out I had turned off "WebGL Enabled" on both my iPhone and Android tablet awhile back during my testing of image issues weeks ago, which meant everything was working fine with my recent testing. Turning that option back on (the default) breaks things again. Single image loading works now, but anything using more than one image for anything (@ghostrifle's test case, particles, and tilesprites) doesn't work anymore.

 

Despite this change, though, I did go ahead and update the top post today. Since CocoonJS 1.4.7 will be depreciated starting 1 August 2014 (tomorrow for me as I write this), I dropped mentions from the post and tried to organize toward the latest versions of Phaser too. I didn't see much use in keeping information on Phaser 1.1.* given the newer patches and fixes in 2.0.*.

 

Edit: New builds of Phaser using this patch should work fine with multiple images.

[rich]

This PR came in from Ludei (now merged with dev branch): https://github.com/photonstorm/phaser/pull/1064

[Videlais]

This PR came in from Ludei (now merged with dev branch): https://github.com/photonstorm/phaser/pull/1064

 

It works!

 

Just tested my particles and button test cases with that patch using a new build.

 

 

[Binary Moon]

I've created a custom build version of the launcher and am still getting the text offset vertically (I assume that's what the font problem is). Perhaps it's an issue with the font I am using?

 

If someone could test my game I'd be happy to send a zip that you can add use to see if it works for you.

[Michel (Starnut)]

@Binary Moon I can sure check it out. Sent you a PM with the email address.

[Binary Moon]

thanks Michel - I'll send something over shortly

[Videlais]

I've created a custom build version of the launcher and am still getting the text offset vertically (I assume that's what the font problem is). Perhaps it's an issue with the font I am using?

 

I replied to your thread on this topic just now, @Binary Moon, but for others, it looks as if anchor.set isn't working correctly for text.

 

I did some testing with various standard anchor values today (-1, 0, 0.5, 1) and the only useful value was zero (0).

 

For 0.5, it positioned it much higher than normal, on the uppermost edge of the screen vertically. For -1 and 1, it was gone completely; either it didn't draw it, or its positioning was far outside the screen.

 

(Note: this only affects Canvas+. It, of course, works fine in WebView.)

[Oliganti]

https://github.com/photonstorm/phaser/pull/1064/files

 

I've applied those lines to my phaser library, but now everything is like reflected in the mirror  

 

But I must say, that buttons are working!

[Videlais]

https://github.com/photonstorm/phaser/pull/1064/files

 

I've applied those lines to my phaser library, but now everything is like reflected in the mirror  

 

But I must say, that buttons are working!

 

That might be a scaling issue. If it is looking as I think it might be, the canvas is being mirrored to fill out the screen.

 

Is that what is happening? Is the screen being mirrored on the edges?

[Oliganti]

The whole canvas is flipped horizontally and vertically, but only on display because buttons' position is on the same place. Maybe there is something more in dev branch that i forgot to copy.

[Binary Moon]

I merged commit #1064 code locally yesterday and it seems to have fixed the button issue so I think it's ok. I've certainly not seen any mirroring issues

[Oliganti]

http://imgur.com/FeCopf7

 

Iphone 4 + Latest dev branch build + latest cocoonJS launcher. Accelerated mode.

 

Update:

 

It works well with disabled WebGL in CocoonJS options.

[balazsdavid987]

I'm using Phaser 2.0.7, canvas rendering, and CocoonJS launcher 2.0.2. I add a text to the screen by:

game.add.text(0, 0, 'READY', { font: "65px Arial", fill: "#FFFFFF", align: "center" });

And it works, the text appears as it should be. But if I want to add something using bitmapData before adding the text to the screen...

centerPixel = game.add.bitmapData(10, 10);centerPixel.fill(255, 255, 255);game.add.sprite(game.world.centerX, game.world.centerY, centerPixel);

...the text appears and then immediately disappears! Using the same code, but in a different order, the text remains there, but the square disappears.

 

Can anyone else reproduce this? Am I missing something here? It works (both the text and the square is displayed) using Chrome 36 (both desktop and mobile version), but not with CocoonJS.

[Videlais]

Can anyone else reproduce this? Am I missing something here? It works (both the text and the square is displayed) using Chrome 36 (both desktop and mobile version), but not with CocoonJS.

 

I reproduced this error; whatever was the first rendered disappeared completely. And you aren't missing anything, either. This is just another in a long line of weird errors between CocoonJS and Phaser.

 

I also tested with a dev build from last week and both showed up regardless of order but created the mirroring effect @Oliganti mentioned seeing.

 

 

http://imgur.com/FeCopf7

 

It works well with disabled WebGL in CocoonJS options.

 

Have you had any more luck, Oliganti? I've seen the mirroring too, but haven't built a new version from source in a few days.

 

Also, on the topic of disabling WebGL in the options, it's not as helpful as you might think. Even with disabling 'screencanvas' (as the newer 2.1. patch does), WebGL will still creep into anything built using the Ludei web interface. As far as I know, there isn't a way to disable that in compiled builds.

[balazsdavid987]

 As far as I know, there isn't a way to disable that in compiled builds.

 

I can confirm this. The cloud-compiled launcher has WebGL enabled and it cannot be disabled. But you can explicitly instruct Phaser to use canvas by...

game = new Phaser.Game(480, 640, Phaser.CANVAS);

...but maybe that causes the problem I described previously.

[slash]

Hi all, thank you for you help in this thread, I'm almost done having my game running in CocoonJS with Canvas+

 

Has anyone experienced issues playing WAV files? mine sound like a lot of noise on Canvas+ (phaser 2.0.7, cocoonjs 2.0.2), they work perfect on web (http://slashland.co/ananias ), might be some issue with their actual format?

 

Here's one of the files: http://slashland.co/ananias/sfx/hit.wav

 

I also have an issue with switch music off, once it's switched off I can't turn it back on, I'm using this.phaser.sound.volume = 1; and this.phaser.sound.volume = 0;

 

Finally, has anyone done a workaround for the no text wrapping issue?

[balazsdavid987]

Has anyone experienced issues playing WAV files? mine sound like a lot of noise on Canvas+ (phaser 2.0.7, cocoonjs 2.0.2), they work perfect on web (http://slashland.co/ananias ), might be some issue with their actual format?

 

Here's one of the files: http://slashland.co/ananias/sfx/hit.wav

 

I did. Somewhere I've read that you must convert your sound files to 16-bit waves in order to work properly with CocoonJS (it's not a Phaser issue). The file you showed us is 24 bit, so I'm almost certain that's the problem.

[Videlais]

The cloud-compiled launcher has WebGL enabled and it cannot be disabled. But you can explicitly instruct Phaser to use canvas by . . . . but maybe that causes the problem I described previously.

 

Yeah, it's been that way since February when I started working with CocoonJS. The only easy way to disable WebGL completely is through the launcher itself.

 

Using Phaser.CANVAS doesn't really solve the problem, unfortunately. It prevents the far worse errors when explicitly using Phaser.WEBGL, but WebGL is still triggered by this line. (It's why the 2.1 version now turns off 'screencanvas', but also seems to introduce new problems.)

 

Something both me and some others have tried, though, is taking that line out completely or disabling the check for WebGL in Phaser and then re-building the library. It will force Canvas and should work fairly well, but isn't really a workable solution for Phaser. (There was a good conversation about this back in May-June.)

 

Somewhere I've read that you must convert your sound files to 16-bit waves in order to work properly with CocoonJS (it's not a Phaser issue). The file you showed us is 24 bit, so I'm almost certain that's the problem.

 

Could you find that source for me? I confirmed 24-bit WAV files produce noise under the 2.0.2 iOS launcher, but won't be able to test on Android until much later today. Having a source to point at would be hopeful when updating the top post again, though.

[Binary Moon]

I made the changes from the commit mentioned above but further testing has shown that the vanishing button issue is still happening (albeit less often than it was).

 

Has anyone else seen this or worked out a fix? If there's no known fix then I might just switch over to using images for now and switch back to buttons once it's resolved.

[markus.n]

I found a bug which is probably related to CocoonJS, I suppose this is the right place to report it?

Dragging a sprite and bringing it on the top doesn't work with CocoonJS (Canvas+), despite working fine both on desktop and the Android stock browser. I've tried both having the second parameter of enableDrag() as true and by sprite.bringToTop() inside a onDragStart callback function. If I don't bring the sprite to the top at all, it works fine also on CocoonJS, but it'd be important for my game to do so.

These threads are probably related, and there might even be a solution in the latter one, but I don't understand it well enough to implement it without a code example. Help greatly appreciated as always.
http://www.html5gamedevs.com/topic/6911-how-do-i-implement-touch-and-dragging-a-sprite/
http://www.html5gamedevs.com/topic/3223-does-drag-and-drop-rely-on-touchenter-and-touchleave/