Common Phaser + CocoonJS issues

momothemonster · March 20, 2014

The code you posted doesn't work for me when forcing CANVAS mode, it works if I leave it on AUTO or force WEBGL mode.

Videlais · March 20, 2014

@momothemonster: Yeah, that's been the problem. It doesn't work for anyone when using the accelerated mode in CocoonJS with Phaser.CANVAS right now. (I'm not interested in WebView mode, as that is platform-dependent.)

I'm pretty sure it's a problem that has its roots in changes to Phaser as a result of merging with the 1.5 branch of the Pixi.js code. Just haven't been able to narrow it down yet.

tylerjhutchison · March 20, 2014

@Videlais and @momothemonster: I have been having similar problems getting Phaser and CocoonJS to play nicely.

I am using Phaser v2.0.0 "Aes Sedai" - Built: Fri Mar 14 2014 04:24:06

and trying to get my app to run using the CocoonJS Launcher with Canvas 2D/WEBGL mode on my Samsung Galaxy S4

The following code will draw for me and function.

<html>    <head>        <script src="js/phaser.js?v3"></script>        <script type="text/javascript">        window.onload = function() {            console.log('test version 1.12');            var width = window.innerWidth;            var height = window.innerHeight;                        var canvas = document.createElement('screencanvas');            var game = new Phaser.Game(width, height, Phaser.CANVAS, '', { preload: preload, create: create, render:render });                        var circle;                        function preload() {                game.load.image('background', 'assets/128.png');                game.load.spritesheet('button', 'assets/button_sprite_sheet.png', 160, 80);            }            function create() {                game.add.sprite(game.world.centerX, game.world.centerY, 'background');                var button = game.add.button(game.world.centerX, 300, 'button', startGame, this, 2, 1, 0);                button.anchor.setTo(0.5, 0.5);                circle = new Phaser.Circle(game.world.centerX, 100,64);                            }                        function render () {                game.debug.geom(circle,'#cfffff');            }                        function startGame (){                console.log('BUTTON PRESSED');            }        };        </script>    </head></html>

There are a few things I did that managed to get things working:

Setting the Phaser renderer to CANVAS

Sending an empty string '' as the parent parameter for Phaser.Game()

I am forcefully creating the 'screencanvas' element before calling new Phaser.Game rather than letting phaser try to automatically create it during the Stage boot.

For some reason allowing Phaser to automatically call document.CreateElement('screencanvas'); in Phaser.Canvas.create does not seem to perform as expected. The only way I could get things to draw was create the canvas first and send in an empty string as the parent parameter.

I am drawing a debug circle in the render call. The circle does not actually get drawn because it is the last thing in the list of stuff to draw.

The button draws correctly and is functional so long as I attempt to render the debug circle. If I remove the circle debug in the render call, the button will be invisible but still fire touch events.

momothemonster · March 20, 2014

Thanks for the input, @tylerjhutchison. I can verify on my iPhone 5s that adding the debug call enables my sprite to draw in Canvas mode. However, it makes no difference as far as the Greensock issue.

Videlais · March 21, 2014

@tylerjhutchison:

I am forcefully creating the 'screencanvas' element before calling new Phaser.Game rather than letting phaser try to automatically create it during the Stage boot.

For some reason allowing Phaser to automatically call document.CreateElement('screencanvas'); in Phaser.Canvas.create does not seem to perform as expected. The only way I could get things to draw was create the canvas first and send in an empty string as the parent parameter.

Phaser 2.0 will create a 'screencanvas' element correctly. That was fixed weeks ago.

Without attaching the canvas element to the document.body via an appendChild call anyway, you aren't actually doing anything with it. Phaser will always use the canvas it creates internally.

As for the parent element issue, that's because CocoonJS doesn't have a DOM in accelerated mode. Well... it does, but it's highly restricted. I guess I should probably spell it out clearer for people in the top post not to use anything there. The empty string is the correct method with CocoonJS.

The button draws correctly and is functional so long as I attempt to render the debug circle. If I remove the circle debug in the render call, the button will be invisible but still fire touch events.

Yeah, I've discovered something similar. Any extra calls that do not depend on images will cause them to appear afterwards. For you, that's the call to Phaser.Circle (and its internal drawing) and for others it is the use of an extra call to "game.add.image(0,0,'')".

That's the problem I've been trying to track down. I'm fairly certain it has to do with the tweening issue too, that images aren't working as they should.

JanneLeppanen · March 23, 2014

Hello,

I am facing some rendering issues with latest Phaser.js (2.0.0 and 2.0.1 ) when using CocoonJS Launcher (1.4.7) on my Samsung Galaxy Tab 2. The issues does not seem to appear when using Phaser.js version 1.1.6. I have no clue if this is related to phaser.js, pixi.js, cocoon.js, samsung or my code.

This image shows what exactly happens:

https://dl.dropboxusercontent.com/u/27815133/phaser/cocoonjs-issue-1/pic-1.jpg

This appears with Phaser.CANVAS and Phaser.WEBGL
This appears only when choosing Canvas 2D/WebGL on CocoonJS Launcher (Everything works fine with Webview)
Those evil black things change their shape after reloading

Code:

var win = {     width: window.innerWidth * window.devicePixelRatio,     height: window.innerHeight * window.devicePixelRatio } var game = {};   window.onload = function() {     game = new Phaser.Game( win.width, win.height, Phaser.Canvas, '', { preload: preload, create: create }); }   function preload() {     console.log('preload'); }   function create() {     console.log('create');     game.stage.backgroundColor = "#FF0099"; }

What am I doing wrong? Is anybody faced this kind of issue before?

Thanks.

Videlais · March 23, 2014

@JanneLeppanen:

You aren't doing anything wrong.

I was able to replicate that just now. It's now a confirmed issue.

SteveB · March 23, 2014

I don't know if it helps with the image loading issues. I've been battling away to get CocoonJS working. I've came across this issue, which make no sense to me, but might help someone who know what is going on, to pinpoint the image loading issue.

I've got three groups, DPR.background, DPR.midground, and DPR.foreground. I've also got three sprites, DPR.bot, DPR.player and DPR.carriedTile. The first two go in the midground and the last in the foreground. Then for debugging purposes I've added 5 extra sprites. In the following code they go in the foreground group.

When I do this, only the DPR.player, DPR.bot, and DPR.carriedTile are displayed in CocoonJS, i.e the 5 debug Sprites do not appear. However, later on in the game, when the DPR.player and DPR.bot are killed, the 5 Sprites appear. They disappear when DPR.player and DPR.bot are revived.

DPR.midground.add(DPR.bot);DPR.midground.add(DPR.player);        DPR.foreground.add(DPR.carriedTile);var sp;for (var n = 0; n < 5; n++) {    sp = new TrackerSprite(32 * (n + 1), 32, 'carriedTiles');    DPR.foreground.add(sp);    sp.frame = 1; }

If I change it so that the 5 debug sprites go in the midground group like so:

DPR.midground.add(DPR.bot); DPR.midground.add(DPR.player);         DPR.foreground.add(DPR.carriedTile); var sp; for (var n = 0; n < 5; n++) {      sp = new TrackerSprite(32 * (n + 1), 32, 'carriedTiles');      DPR.midground.add(sp);      sp.frame = 1;  }

then the 5 Sprites appear but the DPR.carriedTile, the only one in the foreground, now vanishes. However, it appears when the first 2 Sprites, DPR.player and DPR.bot are killed; it disappears when they are revived.

It makes no sense to me and my head is beginning to hurt.

Forgot to say: everything works as you'd expect in the browser; the strange behaviour only occurs in CocoonJS.

Edited March 23, 2014 by SteveB

mamwalter · March 26, 2014

with Phaser.CANVAS, if you set anchor on a text it will not show in CocoonJS.

var testTxt = new Phaser.Text(game, 0, 0, "test", style);testTxt.anchor.setTo(0.5,0.5);

nb: haven't try in WEBGL.

Videlais · March 26, 2014

@mamwalter: Most Phaser text writing doesn't work in CocoonJS. There is a patch, but it has not been accepted into Phaser (or even Pixi.js) yet.

It won't work in WebGL mode, either.

Michel (Starnut) · April 2, 2014

Hey guys,

thanks again for this terrific thread. Just wanted to let you know about my experience with the image loading issue (using Phaser 2.0.2):

I recently refactured my game a bit and ran into the same issue that all instances of the same image just wouldn't show up in CocoonJS with the game initializing with Phaser.CANVAS.

Now, just today, I went through the game and put all of the game's images on one single texture atlas. With the CocoonJS image issue reported here, I expected everything to show up or nothing. But guess what:

1. Half of the game got displayed, the other half didn't, although, everything is being drawn from the same atlas. Consequently, it can't be a loading issue.

Then, I realized, the elements that were missing were the last ones I added to the game. So, I went and spawned one of the elements right after creating the ones that went missing, expecting it to vanish with the others, but:

2. More elements were drawn afterwards than before. Actually, all elements except for the the last one (which is an image with a Phaser.BitmapData texture I draw stuff into) reappeared.

To me all of this sounds like some of the last elements get lost in the rendering pipeline. Question is why does the amount vary and why does it happen in the first place?

Videlais · April 3, 2014

. . . . Consequently, it can't be a loading issue.

I think you are right. I got about that far in my own more recent testing and updated the wording on the top post to read "rendering" instead of loading.

To me all of this sounds like some of the last elements get lost in the rendering pipeline. Question is why does the amount vary and why does it happen in the first place?

We aren't sure. Well, I should clarify that *I'm* not sure, myself. I have had several e-mail conversations with different people (including Rich himself) over the last couple of weeks and we couldn't seem to easily narrow down the problem.

With CocoonJS 2.0 coming out today, though, I'm going to start a new round of testing and see if the same problems exist as soon as I get the chance.

rich · April 3, 2014

Just to say that I will be looking into this as a matter of priority starting next week (or whenever Cocoon 2.0 ships and Phaser 2.0.3 is done, which should be tomorrow for both)

SteveB · April 3, 2014

Just tried the new version of Cocoonjs (2.0.0 beta). Still loosing my sprites so whatever was going on remains.

Videlais · April 5, 2014

Just a heads-up:

I just filed a bug report with Ludei over the sdkTarget and maxSdkTarget for CocoonJS 2.0 Android projects. They are currently exclusively targeting API level 19 and all devices (including the Ouya) not running Android 4.4 are incompatible with both the launcher and all currently compiled projects because of it.

Until they either fix this or update their iOS client through the iTunes store, I'm not going to be able to test anything with CocoonJS 2.0 for awhile.

However, I will continue to track reported issues. I just won't be able to confirm them from my end.

freaker · April 5, 2014

The dissapearing sprites issues it's happening to me on iOS, actually on an iPad2. So I guess it's not depending on the OS. It has to be either a bug of some sort on cocoon or a bug on pixi or phaser. But it's not OS dependent.

zanardi · April 5, 2014

CocoonJS 2 don't work in android 2.3 anymore.

I lost my 1.4.7 from my phone, and I can't install 2.0.

Anyone know how to recover 1.4.7 version on android?

Videlais · April 5, 2014

CocoonJS 2 don't work in android 2.3 anymore.
I lost my 1.4.7 from my phone, and I can't install 2.0.
Anyone know how to recover 1.4.7 version on android?

Yeah, CocoonJS 2.0 is targeting Android 4.4 (API level 19) exclusively. Any system version less than that won't be able to install the newer launcher or any compiled projects using CocoonJS 2.0. (I've already filed a bug report about this with them.)

You should still be able to build with CocoonJS 1.4.7 from the Ludei project page, though. While their launcher in the GooglePlay store is the newer, 2.0 version, you can still create one using their 1.4.7 version by creating a developer account, creating a project, and requesting a 1.4.7 compiled project or launcher. However, you will need to side-load this older version yourself.

samifruit514 · April 7, 2014

Im trying to add a "mouse trail" to the touch input with bitmapdata. On the browser it works great but with android (cocoonjs 2.0) the trail does not appear. The sprites are shown correctly. Is there something the in bitmapdata that is not properly supported by cocoonjs on android?

thanks

Videlais · April 7, 2014

On the browser it works great but with android (cocoonjs 2.0) the trail does not appear. The sprites are shown correctly.

For the browser, is that the desktop browser, or the one on the device? For example, does it work in both Chrome on the desktop and Chrome on the Android phone/device too?

Also, what mode are you using for CocoonJS 2.0? Canvas+, WebView+ or System WebView?

samifruit514 · April 7, 2014

Thanks for your quick answer,

For the browser, yes its the desktop (Chrome Version 33.0.1750.152). Im not trying on the phone's browser because i need cocoonjs's performance.

Im using Canvas+ (since the other modes are not performant as canvas).

Note that Im having this problem with Phaser.CANVAS mode. When I try the WEBGL mode, I can see my trail (from ctx.drawImage) but the scaling is not working properly so we cannot use it.

Michel (Starnut) · April 7, 2014

Hi samifruit514,

I'm also doing BitmapData drawings in my game in works fine on iOS within Cocoon 1.4.7. - I know different setup but I highly assume that your issue rather falls under the global/common "images aren't rendered properly" issue everyone's currently dealing with rather than a new "BitmapData doesn't work" issue. The fact that you can see the trail in Phaser.WEBGL but not in Phaser.CANVAS mode speaks in favor of that.

samifruit514 · April 7, 2014

Hi!

I've add a bitmapdata right at the start (with a simple context.lineTo) and my trail started to show! Its like if the last bitmap item was not shown (?) maybe it has something to do with the game.sprite.add(0,0,'') hack for cocoonjs....

update: This seem to make the trail works with the bitmapdata:

function render() {

bmd.ctx.strokeStyle = '#ffffff'

bmd.ctx.lineWidth = 20

bmd.ctx.beginPath()

bmd.ctx.stroke()

}

strange isnt it?

Videlais · April 7, 2014

I've add a bitmapdata right at the start (with a simple context.lineTo) and my trail started to show! Its like if the last bitmap item was not shown (?) maybe it has something to do with the game.sprite.add(0,0,'') hack for cocoonjs....

That's my current working theory, actually. It has to do with the last item, be it a group, sprite, or something else, that is not getting drawn. The empty, default image is adding an extra object to the rendering group that is not being drawn, but is adding to the total number of objects.

What is even stranger is that the total number is correct, though. And by-passing Phaser's normal creation functions works too. I had a recent test that created pure Pixi.js objects and injected them into Phaser. They were drawn but mostly covered up.

Videlais · April 11, 2014

A quick update:

If you run into the problem zanardi did, of having an Android device that does not match the official CocoonJS Launcher SDK version, you can change the Custom Launcher's target SDK version under the 'Android' settings from a Ludei project page. At the very bottom are two drop-down menus. Just pick what you want the minimum and maximum SDK versions to be from there.

Remember that you will need to side-load the new launcher yourself after that too.

(Personal plug: I wrote a guide for getting CocoonJS running on the Ouya. And another guide for CocoonJS and Google Glass too.

If you want to get Phaser running on either device with CocoonJS, these guides should help you get started.)

Common Phaser + CocoonJS issues

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Videlais

Michel (Starnut)

rich

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members