Coffeescript + Phaser + NW = Uncaught TypeError

[coltonoscopy]

Hey all,

 

I'm trying to get Phaser, Coffeescript, and Node-Webkit all running together. In running just the very basic Getting Started "Hello, world" example here: 

 

http://phaser.io/tutorials/getting-started/part6

 

It works just fine as-is within NW, but when I try and write it in Coffeescript per the following:

window.onload = ->    test = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload: preload, create: create})    preload = ->        test.load.image('logo', 'assets/images/phaser.png')    create = ->        logo = test.add.sprite(test.world.centerX, test.world.centerY, 'logo')        logo.anchor.setTo(0.5, 0.5)

it compiles to the following JavaScript:

// Generated by CoffeeScript 1.6.3(function() {  window.onload = function() {    var create, preload, game;    game = new Phaser.Game(800, 600, Phaser.AUTO, '', {      preload: preload,      create: create    });    preload = function() {      return game.load.image('logo', 'assets/images/phaser.png');    };    create = function() {      var logo;      logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');      return logo.anchor.setTo(0.5, 0.5);    };  };}).call(this);

and then I get the following error:

[8063:0903/115650:INFO:CONSOLE(30716)] ""Invalid Phaser State object given. Must contain at least a one of the required functions: preload, create, update or render"", source: file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js (30716)[8063:0903/115650:INFO:CONSOLE(38762)] ""%c %c %c Phaser v2.4.3 | Pixi.js v2.2.8 | WebGL | WebAudio  %c %c %c http://phaser.io %c\u2665%c\u2665%c\u2665" "background: #9854d8" "background: #6c2ca7" "color: #ffffff; background: #450f78;" "background: #6c2ca7" "background: #9854d8" "background: #ffffff" "color: #ff2424; background: #fff" "color: #ff2424; background: #fff" "color: #ff2424; background: #fff"", source: file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js (38762)[8063:0903/115650:ERROR:nw_shell.cc(336)] TypeError: Cannot set property 'game' of undefined    at Phaser.StateManager.link (file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js:30739:31)    at Phaser.StateManager.setCurrentState (file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js:30805:14)    at Phaser.StateManager.preUpdate (file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js:30611:18)    at Phaser.Game.updateLogic (file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js:39002:24)    at Phaser.Game.update (file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js:38893:18)    at Phaser.RequestAnimationFrame.updateRAF (file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js:61958:19)    at _onLoop (file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js:61942:30)[8063:0903/115650:INFO:CONSOLE(30739)] "Uncaught TypeError: Cannot set property 'game' of undefined", source: file:///Users/coltonoscopy/Desktop/everdungeon/js/phaser.js (30739)

I'm unsure as to what exactly is going on, as the JS seems to be identical in functionality, if not structured slightly differently thanks to CoffeeScript's compiler. Any help is appreciated. Thank you very much!

 

Best,

Colton

[drhayes]

Can you post the JS that is working for you within NW, too?

 

Also, it looks like that's not *exactly* the JS that was generated by that CS; "test" vs. "game", for example. I mean, it looks basically the same, just checking. ( =

 

How are you building your NW package? What's the command-line there? How are you ensuring that the CS->JS transpilation is happening before that build?

[alex_h]

Coffeescript has turned your named function declarations (create and preload) into function expressions so they no longer get hoisted. I think your code is failing because the function definitions are now only assigned to the variables after the undefined values have already been passed through to the game.

Ha! That's coffescript for you

[danwolfe]

Depending on how you're transforming your coffee script, try making it bare. If you're doing a commandline compile use the -b or --bare flag. If you're using gulp use {bare: true} inside the call to coffee().

[coltonoscopy]

Can you post the JS that is working for you within NW, too?

 

Also, it looks like that's not *exactly* the JS that was generated by that CS; "test" vs. "game", for example. I mean, it looks basically the same, just checking. ( =

 

How are you building your NW package? What's the command-line there? How are you ensuring that the CS->JS transpilation is happening before that build?

 

Whoops, sorry! I had tinkered and forgotten to re-compile; here is the 100% pure compiled version, without any changes:

 

// Generated by CoffeeScript 1.6.3window.onload = function() {  var create, preload, test;  test = new Phaser.Game(800, 600, Phaser.AUTO, '', {    preload: preload,    create: create  });  preload = function() {    return test.load.image('logo', 'assets/images/phaser.png');  };  return create = function() {    var logo;    logo = test.add.sprite(test.world.centerX, test.world.centerY, 'logo');    return logo.anchor.setTo(0.5, 0.5);  };};

 

What I had been doing though is removing the "return" from create, just because that was showing up as a syntax error in Sublime. It still ran, so I'm not sure if that's actually legal in JS, but I felt it was better to be safe than sorry.

 

 

Coffeescript has turned your named function declarations (create and preload) into function expressions so they no longer get hoisted. I think your code is failing because the function definitions are now only assigned to the variables after the undefined values have already been passed through to the game.

Ha! That's coffescript for you

 

Ah, that's kind of a pain... so I'll just need to define the functions in CS before they're called within the Phaser constructor?

 

EDIT: This has been confirmed as a fix. Would still be nice to know if there's a way to do it such that the functions could still be declared below the Phaser.Game() call, if CS allows for this.

EDIT AGAIN: Turns out CS only supports function expressions per https://arcturo.github.io/library/coffeescript/07_the_bad_parts.html !

 

 

Depending on how you're transforming your coffee script, try making it bare. If you're doing a commandline compile use the -b or --bare flag. If you're using gulp use {bare: true} inside the call to coffee().

 

Went ahead and ran the -b flag, compiled to the JS I linked up top in this reply! :]

 

Thanks you guys for your help!

 

Best,

Colton

[drhayes]

alex_h is right! Well spotted.