Videlais

Common Phaser + CocoonJS issues

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by SteveB

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.