Videlais

Common Phaser + CocoonJS issues

Recommended Posts

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);})();

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.
 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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.