Issue with inheritance

[Nepoxx]

 

Hi everyone,
 
I'm trying to create a clean HUD class using Phaser 2.0.7 but I am getting a weird error:
"Uncaught TypeError: Cannot read property 'x' of undefined "
 

I created a separate hud.js file with the following code: 

function HeadUpDisplay(game, parent, name, useStage){    Phaser.Group.call(this, game);    var fpsCounter = new Phaser.Text(0,0, "test", {        font: "16px Arial",        fill: "#ff0044"    });    fpsCounter.fixedToCamera = true;    this.add(fpsCounter);    this.update = function() {        fpsCounter.setText(game.time.fps);    };};HeadUpDisplay.prototype = Object.create(Phaser.Group.prototype);HeadUpDisplay.prototype.constructor = HeadUpDisplay; 

So basically my "class" HeadUpDisplay is extending Phaser.io's group. Any idea what is wrong? (and/or what could be improved)

 

Thanks!

[kidos]

1. you must set game.time.advancedTiming = true; in order to use game.time.fps (regardless to what you asked)

2. I have a gut feeling that this error is not related to this code since I don't see any 'x' property in here.

[BdR]

I'm new to javascript classes and prototypes, but isn't the first line..

function HeadUpDisplay(game, parent, name, useStage){

supposed to be like this?   Or is that semantically the same thing?

var HeadUpDisplay = function(game, parent, name, useStage){

[alex_h]

Either approach can be valid. The first is a function declaration that creates a named function (can be referenced / invoked by name), the second creates an anonymous function expression then assigns it to a variable.

Here is some background info

http://kangax.github.io/nfe/

[Nepoxx]

Here's the full code, since the error doesn't seem to be in the snippet I posted (no worries, it's short): http://pastie.org/private/kw8lur4vypaqjkqw04g
 
If I comment out "this.add(fpsCounter);" and "fpsCounter.setText(game.time.fps);", then the error goes away. I'm definitely confused by this.

[alex_h]

You've missed the first argument to the Phaser.Text constructor, which should be a reference to the game object.

 

Your code:

var fpsCounter = new Phaser.Text(0,0, "test", {        font: "16px Arial",        fill: "#ff0044"    });

should be

var fpsCounter = new Phaser.Text(game, 0,0, "test", {        font: "16px Arial",        fill: "#ff0044"    });

[Nepoxx]

Thanks!

 

Although, then, what's the difference between

var fpsCounter = new Phaser.Text(game, 0,0, "test", {        font: "16px Arial",        fill: "#ff0044"});

and

var fpsCounter = new game.add.text(0,0, "test", {        font: "16px Arial",        fill: "#ff0044"    });

[Nepoxx]

 

I'm new to javascript classes and prototypes, but isn't the first line..

function HeadUpDisplay(game, parent, name, useStage){

supposed to be like this?   Or is that semantically the same thing?

var HeadUpDisplay = function(game, parent, name, useStage){

 

I would suggest reading this: http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ . They definitely explain it better than I could