Get a state variable from extended class

[Liranan]

Hello everyone.

I'm learning about extending classes so excuse me if I'm asking a silly question. What I want is to get a variable from the state and use it in the extending class constructor and functions.

The state looks similar to this

MyGame.Game = function(){
     this.tileSize = 80;
};
MyGame.Game.prototype = {
     create: function(){
         for(var i = 0; i < 8; i++){
               for(var j = 0; j < 8; j++){
                    var tile = new Tile(this, i, j);
                    this.add.existing(tile);
               }
         }
     }
};

Then, I've a extended class like this:

Tile = function(game, column, row){
	var posX = game.tileSize * column;
	var posY = -game.tileSize + (game.tileSize * row);
	Phaser.Sprite.call(this, game, posX, posY, "tile");
	this.game = game;
};
Tile.prototype = Object.create(Phaser.Sprite.prototype);
Tile.prototype.constructor = Tile;

It works fine, it creates the tilegrid and I'm able to use the "tileSize" value I've defined in the state function.

The problem happens when I try to add some animations to the tile class.

If I add the "this.animations.add('shine'...)" command in the constructor, I get an error (this.animations is not defined)

I've searched in the forum and I've found a solution, instead of "var tile = new Tile(this, i, j)" I should use "var tile = new Tile(this.game, i, j)"

That's correct, if I do that, I can add the animations, but then I cannot use the state variable "tileSize".

Is there a way to do both things at the same time?

Thanks a lot.

Liranan.

[Tom Atom]

Hi, wWhile this.game is Phaser.Game object, this is only Phaser.State in your case.

Your Tile constructor can take as many arguments as you need. So, you can change it to take game and state:

Tile = function(game, state, column, row)

 and call it: new Tile(this.game, this, i, j);

 Or, every state has game property, so you can pass only:

Tile = function(state, column, row)

and inside the constructor get game as: state.game, where Phaser.Game is needed.

Be carefull in your Tile constructor. It is derived from Phaser.Sprite and it already has game property, which is Phaser.Game. You are setting this.game = game. This line is not necessary, parent constructor will set it for you (if you want to keep reference to Phaser.Game). But if you wanted to store reference to your Game state, then rename that property to "gameState" or so, otherwise you will overwrite original property with different object type and you end with mess.

[Str1ngS]

You can still pass this in new Tile(), replace your tile code with:

Tile = function(myGame, column, row){
	var posX = myGame.tileSize * column;
	var posY = -myGame.tileSize + (myGame.tileSize * row);
	Phaser.Sprite.call(this, myGame.game, posX, posY, "tile");
	this.game = myGame.game;
};

As an alternative (and better) solution you can set tilesize as 'static' property of MyGame.Game like so:

MyGame.Game = function(){};
MyGame.Game.tileSize = 80;
MyGame.Game.prototype = {
     create: function(){
         for(var i = 0; i < 8; i++){
               for(var j = 0; j < 8; j++){
                    var tile = new Tile(this.game, i, j);
                    this.add.existing(tile);
               }
         }
     }
};

Tile = function(game, column, row){
	var posX = MyGame.Game.tileSize * column;
	var posY = -MyGame.Game.tileSize + (MyGame.Game.tileSize * row);
	Phaser.Sprite.call(this, game, posX, posY, "tile");
	this.game = game;
};
Tile.prototype = Object.create(Phaser.Sprite.prototype);
Tile.prototype.constructor = Tile;

 

[Liranan]

Thank you for your answers.

Tom Atom, you're absolutely right, I was being inaccurate while naming my variables. I should call 'state' to the variable I received in the constructor. I already fixed that. I tried passing to parameters (this as the state and this.game as the game) but for some reason it didn't work.

Str1ngS, you give me the solution.

I change the context in the Phaser.Sprite.call function, from 'state' to 'state.game'. By doing this, I can use the variable from the state function and I can also add the animations. Anyway, you're probably right about the static variable.

The final code looks like this, in case somebody has the same doubt in the future:

MyGame.Game = function(){
     this.tileSize = 80;
};
MyGame.Game.prototype = {
     create: function(){
         for(var i = 0; i < 8; i++){
               for(var j = 0; j < 8; j++){
                    var tile = new Tile(this, i, j);
                    this.add.existing(tile);
               }
         }
     }
};

Tile = function(state, column, row){
	var posX = state.tileSize * column;
	var posY = state.tileSize * row;
	Phaser.Sprite.call(this, state.game, posX, posY, "tile");
	this.state = state;
    this.animations.add('shine', [0, 1, 2, 3], 4, true);
    this.animations.play('shine');
};
Tile.prototype = Object.create(Phaser.Sprite.prototype);
Tile.prototype.constructor = Tile;