Issue with Inheritance, TypeError : this.onTextureUpdate

[Zoragna]

Hello !

I'm quite new to Phaser, quite new to JavaScript. If there is a language I'm good in it may be Python.

Well, I'm trying to work out a game using the inheritance because that's how it's supposed to be done with JS, right ?

So I would supposedly end with a bunch of class-objects such as Item > Player, Item > Storage, Item > Ennemy > Boss, Item > Equipment.

 

Item = function (game, x, y, sprite_name) {
    Phaser.Sprite.call(this, game, x, y, sprite_name);
    game.physics.enable(this, Phaser.Physics.ARCADE);
    // Bunch of properties
};
Item.prototype.update = function () 
{
// Bunch of things
};

Item.prototype = Object.create(Phaser.Sprite.prototype);
Item.prototype.constructor = Item;

Player = function (game, x, y, sprite_name) 
{
    Item.call(this,game,x,y,sprite_name);
    // Bunch of properties
};
Player.prototype.someFunction = function()
{
//Bunch of things
};

Player.prototype.update = function () 
{
//Bunch of things
};

Player.prototype = Object.create(Item.prototype);
Player.prototype.constructor = Player;

 

But when I try to run my code, I have this error :

TypeError : this.onTextureUpdate is not a function
[it calls a lot of lines in phaser.js]
[it calls the "[parent].call(this, parameters)" line]

I really don't know what to do.
 

[Zoragna]

Hello back ; so it seems that I work out my way around the problem : I called my extended sprite using new which made it works.

But now, I really don't understand why my extended sprite don't go through their update fonction.
I am calling state this way :

var currentBoss;
var newscore;

var playState = 
{
    preload : function()
    {
        this.load.spritesheet("player","Sprites/player.bmp",32,32,3);
    },
    create : function () 
    {
       hoplite = new Player(game, 200, 300, 'player');
    },
    update : function()
    {
       hoplite.score[player_name] = new_score ;
    }
};

[the player updates by checking one of its property which is a finite state machine from fsm.js ; then update accordingly and, for instance, listening for keyboard input etc.]

I have no clue why my code doesn't work.

[Arcanorum]

You need to study the examples more closely. https://phaser.io/examples/v2/sprites/extending-sprite-demo-2

The order of how you assign things to the prototype matters.

This is what your objects should look like:

Item = function (game, x, y, sprite_name) {
    Phaser.Sprite.call(this, game, x, y, sprite_name);
    game.physics.enable(this, Phaser.Physics.ARCADE);
    // Bunch of properties
};

/**
* Assign the prototype of this object to the same prototype of Phaser.Sprite.
* Do this BEFORE adding or overriding any properties on the prototype object 
* for this object, otherwise they will be overwritten.
*
* If you do Item.prototype = ... at the end, then the prototype property of 
* Item will reference a completely different object than the one that you 
* added .update to.
*/
Item.prototype = Object.create(Phaser.Sprite.prototype);
/**
* It doesn't really matter where you assign the constructor, as long as it is
* after the declaration of the Item function.
*/
Item.prototype.constructor = Item;

/**
* Now that the prototype of Item is using the prototype of Phaser.Sprite, we 
* can override any functions that Phaser.Sprite has, such as .update, .render, etc.
*/
Item.prototype.update = function () 
{
    // Bunch of things
};

 

[Zoragna]

Thank you very much !

[samme]

I often use a helper function for better readability and fewer mistakes.

var extend = function(sourceConstr, constr, prototypeProps) {
  constr.prototype = Object.create(sourceConstr.prototype);
  constr.prototype.constructor = constr;
  constr.prototype.super = sourceConstr.prototype;
  Object.assign(constr.prototype, prototypeProps);
  // Object.seal(constr.prototype);

  return constr;
};

var Player = extend(

  // superclass
  Phaser.Sprite,
  
  // constructor
  function Player (game, x, y, key, frame) {
    Phaser.Sprite.apply(this, arguments);
    this.create();
  },
  
  // prototype
  {
    name: 'player',
    create: function () {
      this.anchor.set(0.5);
    },
    update: function () {
      this.angle += 1;
    },
  }

);