Sign in to follow this  
Liranan

Get a state variable from extended class

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;

 

Share this post


Link to post
Share on other sites

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;

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.