Common Phaser + CocoonJS issues

[Agnostic]

I have this simple scene code and I can't see any images or sprites on the launcher either... 

 

// Login Scene(function(){  var LoginScene = function(game) {  };  // Preload  LoginScene.prototype.preload = function() {    console.log('Login preload');    // Fonts    var fontFile = (navigator.isCocoonJS) ? 'default.xml' : 'default_desktop.xml';    this.load.bitmapFont('default', 'assets/fonts/default.png', 'assets/fonts/' + fontFile);  };  // Create  LoginScene.prototype.create = function() {    console.log('Login create');    this.stage.backgroundColor = 0x2d2d2d;    this.add.bitmapText(50, 50, 'default', 'Login Scene', 16); // Visible in browsers or webview mode, not in canvas+    // CocoonJS Fix    var fake = this.game.add.image(0, 0, ''); // This is not working for me  };  // Update  LoginScene.prototype.update = function() {  };  // Render  LoginScene.prototype.render = function() {    // phaser.debug.cameraInfo(phaser.camera, 20, 20);  };  // initGame  LoginScene.prototype.initGame = function() {    this.state.start('game');  };  // game.scenes.login = LoginScene;  phaser.state.add('Login', LoginScene);})();

[Videlais]

Hi, Agnostic.

 

Have you looked at the top post of this thread? I keep it updated with issues that are reported between CocoonJS and Phaser.

 

For example, your code will probably not run correctly in CocoonJS. For its Canvas+/Accelerated mode, it doesn't have XML support. Unless you convert the XML to JSON and change some more things (as noted here), you won't be able to run it as-is.

 

If the hack of using a "fake" image is not working for images or sprites (not bitmapFonts!), we can't currently do anything to help you. This is a known issue with no solution. (Sorry.)

[Youle]

Hi, 

I've got an error I can't fix because it hasn't reference to my code :

Javascript Exception (Tag: 'timer'): Error : DOM Exception 8. Calling InsertBeforewith null value.at Phaser.Device._checkCSS3D (phaser.js : 32081:23)at Phaser.Game.boot(phaser.js:31742:10)at _onBoot(phaser.js:18310:22)

Just before I've some warning : 

Not implemented createElement : z

I can't do anything, I'm really blocked, do you know that problem ?

I'm developping on 2.0 Phaser version,

thank you

[Videlais]

Hi, Youle.

 

It looks like you are trying to create an element you can't under the Canvas+/Accelerated mode of CocoonJS. If you look under the 'document' section of the CocoonJS 1.4.7 (and 2.0) feature list, you can see that createElement is limited to only a handful of things like image and canvas elements. (The same with getElementById too.)

 

My advice is to either already have that element created before runtime as part of the HTML or, if you can, avoid using any DOM operations completely with the Canvas+/Accelerated mode in CocoonJS.

 

(Remember too that you should use an empty string for the parent element of Phaser projects with CocoonJS so that it creates a canvas element and appends it to the document.body directly. An example is shown in the top post.)

[Agnostic]

Hi, Agnostic.

 

Have you looked at the top post of this thread? I keep it updated with issues that are reported between CocoonJS and Phaser.

 

For example, your code will probably not run correctly in CocoonJS. For its Canvas+/Accelerated mode, it doesn't have XML support. Unless you convert the XML to JSON and change some more things (as noted here), you won't be able to run it as-is.

 

If the hack of using a "fake" image is not working for images or sprites (not bitmapFonts!), we can't currently do anything to help you. This is a known issue with no solution. (Sorry.)

 

Thank you Videlais, I am using a json file for bitmap fonts in cocoonjs, but sometimes fonts are not displayed, I don't have errors on the console, I have a fake image and a debug message on render() but the bitmap fonts are not displayed in cocoon.

[rodrigogrow]

Hi All, 

 

I have an issue with buttons on Cocoonjs 2.0, I'm using phaser 2.0.2.

 

When I try to click on button, its event is not triggered.  It works fine on Browser or Cocoonjs 1.4.7.

 

Someone had the same issue ?

[Videlais]

I have an issue with buttons on Cocoonjs 2.0, I'm using phaser 2.0.2.

 

When I try to click on button, its event is not triggered.  It works fine on Browser or Cocoonjs 1.4.7.

 

Which mode are you using with CocoonJS 2.0? Canvas+ (Accelerated Canvas/WebGL), WebView+, or System WebView?

 

When you were using it with CocoonJS 1.4.7, which mode were you using then? Accelerated or System WebView?

 

For the events, do you have them enabled? And if so, are other taps/clicking registering? Or is it just for a specific button?

 

If you can, could you post a link to the code or provide more context too? I'd like to rule out some simple problems before I add it to the list of known issues.

[rodrigogrow]

Which mode are you using with CocoonJS 2.0? Canvas+ (Accelerated Canvas/WebGL), WebView+, or System WebView?

 

When you were using it with CocoonJS 1.4.7, which mode were you using then? Accelerated or System WebView?

 

For the events, do you have them enabled? And if so, are other taps/clicking registering? Or is it just for a specific button?

 

If you can, could you post a link to the code or provide more context too? I'd like to rule out some simple problems before I add it to the list of known issues.

 

Hi @Videlais,

 

Which mode are you using with CocoonJS 2.0? Canvas+ (Accelerated Canvas/WebGL), WebView+, or System WebView?

I test on CocoonJs 2.0 Canvas+.

 

When you were using it with CocoonJS 1.4.7, which mode were you using then? Accelerated or System WebView?

In 1.4.7, I used accelerated mode.

 

For the events, do you have them enabled? And if so, are other taps/clicking registering? Or is it just for a specific button?

I do have any event enabled for this state

 

the snippet code of button goes below:

 

function Menu() {};

 

    Menu.prototype = {

 

        create: function () {

            this.playBtn = this.add.button(0, 0, 'button_play', this.startGame, this);

            this.playBtn.anchor.set(0.5, 0.5);

            this.playBtn.x = 250;

            this.playBtn.y = 500;

         },

 

         startGame: function () {           

                this.game.state.start('Gameplay');           

          },

 

 

Thanks!

[Videlais]

Which mode are you using with CocoonJS 2.0? Canvas+ (Accelerated Canvas/WebGL), WebView+, or System WebView?

I test on CocoonJs 2.0 Canvas+.

 

When you were using it with CocoonJS 1.4.7, which mode were you using then? Accelerated or System WebView?

In 1.4.7, I used accelerated mode.

 

This is now a confirmed issue.

 

I tested creating a single button in CocoonJS 1.4.7 and 2.0 on both iOS and Android. (Only 2.0 on iOS, though. I can't downgrade or co-install 1.4.7 without XCode.)

 

In 1.4.7, using Phaser.CANVAS and Phaser.WEBGL, the button worked. I was able to tap on it and an event occurred. However, I was only able to get this same functionality in CocoonJS 2.0 with Phaser.CANVAS. When using Phaser.WEBGL on both iOS and Android, the event did not fire.

 

(For those interested, the two test cases can be found here: http://videlaisstudios.info/testing/phaser/buttons/)

[valueerror]

any updates on the "not displayed images"  ? in my game all backgrounds are missing and worst of all .. my player.. everything else works and you can even play the game (without seeing the player)  if i change something on the sprite ingame  (scale it) it suddenly appears ...   

 

im using phaser 2.0.3 and the cocoonjs 2.0.0beta cloud compiler (canvas method) and force canvas in phaser..   the workaround with the empty sprite doesn't seem to work

[blackgames]

Have you tried to put the add.sprite(0,0,'') at the and of the create function? That works for me in the same situation

[valueerror]

i have.. but maybe in the wrong one..   i have several states  boot > preload > level1   i added it the level1 state (the state where the images are missing)

[blackgames]

For me it works when i added to the end of every create function - I figured out that cocoonjs rendert all sprites to the last add.sprite(0,0,'') - maybe it works for you too :-)

[rodrigogrow]

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.
 

[valueerror]

added the blank sprite to every create function.. outcome: i now see my player but thats it. still no powerups or backgrounds

[Latimed]

Using Cocoonjs 1.4.7 and phaser 1.1.4 the tilemap and tilesprite don't appear (invisible) in both CANVAS and WEBGL

 

is there any solution to this problem ?

 

have you faced this problem with newest versions of phaser or not ?

 

 

Thanks.

[Nambew]

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.

 

 

I confirm this issue, I try to find what is the problem, it's only append on iOS and so far, the problem is from the locked property. The reloadSound is call, but the reloadComplete isn't call so the sound stay in locked mode.

[Michel (Starnut)]

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?

[Michel (Starnut)]

@rodrigogrow:

 

Have you tried using m4a instead of mp4?

[rodrigogrow]

@rodrigogrow:

 

Have you tried using m4a instead of mp4?

 

Hi @Starnut,

 

I tried with m4a too, but haven't success.. I created a simple app to test it: http://goo.gl/0qcdfM

 

I tested it on cocoonjs 1.4.7 (ios 7.1.1), iphone 4s. 

 

Phaser version is 2.0.3 - WebGL

 

the index.html code:

 

 <!DOCTYPE html>

<html>

  <head>

    <title>Audio Testing</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="js/phaser.js"></script>

  </head>

  <body>

    <script>

      

      var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.WEBGL,

      '', {preload: preload, create: create});

 

      var audio_file_name = 'test.m4a';

      var audio = null;

 

      function preload() {

 

        console.log("load audio: " + audio_file_name);

 

        game.stage.backgroundColor = '#ccc';

        game.load.audio('audio_test', audio_file_name);

      

      }

 

      function create() {

 

        audio = game.add.audio('audio_test', 1, true);

        audio.play('',0,1,true);

 

      }

 

    </script>

  </body>

</html>

 

Thanks.

[Latimed]

@Starnut:

 

I totally confirm what you said. When i turn off WEBGL ENABLED in Cocoonjs settings the game renders perfectly (even the tilesprite) !!!

 

Phaser 1.1.4

CocoonJS 2.0

iOS 7.1.1

[Zaidar]

Hi, do you have any new information about the drawing on canvas ?

 

I thinks it's already has been said but when I try to use bitmapData, cocoonjs and canvas + doesn't render the line.

     //create method      this.line = game.add.bitmapData(320, 480);      this.lineSprite = game.add.sprite(0, 0, this.line);      // update method      this.line.clear();      this.line.ctx.beginPath();            this.line.ctx.lineTo(/*blablabla*/);      this.line.ctx.lineWidth = '5';      this.line.ctx.strokeStyle = this.spritesTouched[0].color;      this.line.ctx.stroke();      this.line.ctx.closePath();      this.line.render();      this.line.refreshBuffer();

the add.sprite(0,0) is necessary if I want to be able to draw a line. Works in the browser, but not in canvas+ on cocoonjs.

 

I've got Phaser 2.0.4, cocoonjs 2 and android 4.4

 

Anyone has something similar ? Any idea ? thanks.

[Michel (Starnut)]

@Zaidar Since Phaser 2.0.x there is a new class, Graphics, that's perfect for all kinds of shape-drawing. Does not allow for input events though. I'm using it for all my custom drawing and it works quite well with canvas+ on cocoonjs. Check the examples section to get an impression of what you can do with it.

 

@Latimed Sounds like a high-5-moment

[Zaidar]

@Zaidar "Does not allow for input events though."

 

Yeah that's my problem. Anyway, thx.

[Michel (Starnut)]

@Zaidar: Note that there are general rendering issues under cocoonJS where the last images put on the stage are not rendered at all. If that is the case here, it might be the issue you're dealing with and nothing BitmapData related. Make sure to have WebGL Enabled turned off in the Launcher settings and hard-restart the app afterwards. But then again, that's my experience under iOS. I have not tested anything running under cocoonJS on Android, yet.

 

I used your approach before changing to Graphics and it did work with CocoonJS 1.4.7, I think (on iOS again). But looking at your code I don't think I ever explicitly had to call .render() or .refreshBuffer() to make it work. Are you sure that does not interfere with anything? Also, have you tried calling .stroke() after .closePath(), not before?