Prototype inheritance error: this.onTextureUpdate is not a function

[jonteferm]

Hello!

I'm trying to refactor my code making some inheritance. I'm using a Character prototype which is supposed to inherit from Phaser.Sprite and then there can be - for example - a Player prototype which inherits from the Character. The problem is that i get this error: this.onTextureUpdate is not a function inside phaser.js when trying to create the Player object inside the create-function of the level. I would be greatful if someone could take a look on this. Here is the code relevant to the issue (I think) (It's in separate files):

Character = function(game, x, y, type){
	Phaser.Sprite.call(this, game, x, y, type);
	
	this.id = 0;
	this.name = "";
	
	this.health = 0;
	this.dexterity = 0;
	this.defense = 0;
	this.strength = 0; 
	
	/*Räknas ut*/
	this.primalDamage = 0; //TODO: Lägg till uträkning
	this.weaponDamage = 0;
	this.attackRate = 0;
	this.hit = 0;
	this.protection = 0;
	this.block = 0;
	this.reach = 0;
	/*---------*/
	
};

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

Character.prototype = {
		countStats: function(){

		},

Etc. etc etc......

Then the player:

Player = function(game, x, y){
	Character.call(this, game, x, y, 'player');
	
	this.equipped = {
		rightHand: {
			name: "broadsword", 
			type: "weapon", 
			damage: 4, 
			protection: 0, 
			attackRate: 1.6 ,
			block: 0,
		},
	};

	this.health = 20;
	this.dexterity = 13;
	this.defense = 14;
	this.strength = 15; 
	
	this.groupCombatEnabled = false;

	this.animations.add('idleRight', [0], 5, true);
	this.animations.add('right', [0, 1, 2], 5);
	this.animations.add('hitRight', [0, 3, 4], 5, true);
	this.animations.add('idleLeft', [5], 5, true);
	this.animations.add('left', [5, 6, 7], 5);
	this.animations.add('hitLeft', [5, 8, 9], 5, true);
	this.animations.add('idleUp', [10], 5, true);
	this.animations.add('up', [10, 11, 12], 5);
	this.animations.add('idleDown', [15], 5, true);
	this.animations.add('down', [15, 16, 17], 5);
	this.animations.add('hitDown', [15, 18, 19], 5, true);

	this.reachCircle = this.game.add.graphics();
	this.reachCircle.beginFill(0x000000, 1);
	this.reachCircle.drawCircle(this.x+24, this.y+24, this.reach*48);
	this.reachCircle.alpha = 0.2;
	this.reachCircle.endFill();
	
	this.events.onAnimationComplete.add(function(self, animation){
		this.animations.stop(true, true);
		
		if(animation.name.includes("hit") && this.enemiesAttacked.length > 0){
			this.enemiesAttacked.pop().takeDamage(this, "primary");
		}
	}, this);
	

	this.wasd = {
		up: this.game.input.keyboard.addKey(Phaser.Keyboard.W),
		down: this.game.input.keyboard.addKey(Phaser.Keyboard.S),
		left: this.game.input.keyboard.addKey(Phaser.Keyboard.A),
		right: this.game.input.keyboard.addKey(Phaser.Keyboard.D)
	};
	
	this.combatKeys = {
		switchCombatStyle: this.game.input.keyboard.addKey(Phaser.Keyboard.Q)
	};
	
	
	this.dmgTextColour = "#ff0000";
};

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

Player.prototype = {
		checkActions: function(levelObjects){
			this.reachCircle.clear();
			this.reachCircle.beginFill(0x000000, 1);
			this.reachCircle.drawCircle(this.x+24

Etc. etc. etc..

Then there is the level:

/**
 * Level state.
 */
function Level() {
	Phaser.State.call(this);
	// TODO: generated method.
}

/** @type Phaser.State */
var proto = Object.create(Phaser.State.prototype);
Level.prototype = proto;
Level.prototype.constructor = Level;

Level.prototype = {
		create: function(){
			this.map = this.game.add.tilemap('oryxtiles');
			this.map.addTilesetImage('tiles', 'tiles');
			this.map.addTilesetImage('tree', 'tree');

			this.backgroundLayer = this.map.createLayer('backgroundLayer', 768, 768);
			this.blockLayer = this.map.createLayer('blockLayer', 768, 768 );

		    this.map.setCollisionBetween(1, 3000, true, 'blockLayer');

		    this.backgroundLayer.resizeWorld();

		    this.createItems();
		 	this.createDoors();

		    var playerStart = this.findObjectsByType('playerStart', this.map, 'objectLayer')[0];
		    this.player = new Player(this.game, playerStart.x, playerStart.y);

 

[jonteferm]

Update: I do manage to solve this error by moving these to the Level.js

Character.prototype = Object.create(Phaser.Sprite.prototype);

Player.prototype = Object.create(Character.prototype);

But then I get an error later: this.player.countStats is not a function. This is a function inside Character.prototype.

 

[jonteferm]

I think I solved it. The error is because I do redefine the prototypes instead of just adding the functions on to them

[samme]

Character.prototype = Object.create(Phaser.Sprite.prototype);
// …
Character.prototype = {/*…*/};