Extending Sprite with abstract classes?

[Tilde]

Hi! So I'm working on a game right now, despite not being all too savvy with javascript. Its current progress can be monitored here whenever I push a new update: http://www.hardmodeorders.com/slapspark/slapspark.html

 

First of all, sorry in advance if this isn't the appropriate place to ask for help.

 

Thanks to some helpful guides, I've already successfully made a player.js file that extends Phaser.Sprite and can be used in the game state. So right now, I'm trying to do the same with Enemy.js. The difference is, I want to have an abstract Enemy class that handles what most enemies have in common. So here is my attempt at that:

Enemy = function(game, x, y, enemyType) {  Phaser.Sprite.call(this, game, x, y, enemyType);  var hp = 1;  var followTarget = false;  var target;  var aggroRange;  var idleAnimation = false;  var idlePeriod = 4000;  var nextIdle = 0;  // AND THE REST    alert(enemyType);}Enemy.prototype = Object.create(Phaser.Sprite.prototype);Enemy.prototype.constructor = Enemy;Enemy.prototype.update = function() {  if (idleAnimation) {    if (this.game.time.time > nextIdle) {      sprite.animations.play('idle'), 14, false;      nextIdle = this.game.time.time + idlePeriod;    }  }  if (followTarget && target) {    this.rotation = game.physics.arcade.angleBetween(this, target);  }  Phaser.Sprite.prototype.update.call(this);}Enemy.prototype.setTarget = function(t) {  target = t;}Enemy.prototype.damage = function() {}Blaad = function(gameS, xS, yS) {  Object.create(Enemy.prototype);  Enemy.apply(this, [gameS, xS, yS, 'blaad']);  this.game = gameS;  this.x = xS;  this.y = yS;  this.idleAnimation = true;  this.animations.add('idle');}WallEnemy = function(gameS, xS, yS) {  Object.create(Enemy.prototype);  Enemy.apply(this, [gameS, xS, yS, 'wallEnemy']);  this.game = gameS;  this.x = xS;  this.y = yS;  this.followTarget = true;}

This doesn't work, and when used like such in the Level game state,

wallEnemy = new WallEnemy(this, 200, 60);wallEnemy.setTarget(player);this.add.existing(wallEnemy);

I get the error "Uncaught TypeError: this.onTextureUpdate is not a function" from phaser.js:1454. Is what I'm trying to do feasible/appropriate?

[Skeptron]

Maybe I'm about to say something stupid but I think you shouldn't override the update() function... This is the base update function of the sprite object, I can't quite see how Phaser will update it if you overwrite it.

 

What I would do, for the rest, is create the Enemy class like it is not 'abstract', and have childs of it. I get that you might want to prevent the instantiation of an Enemy, and maybe there are mechanisms to throw an exception if that happens, but making your Enemy a very normal class might make things easier.

 

But I'm no pro at JS.

[Snade]

You need to tell the sprite what texture you want to use.

Phaser.Sprite.call(this, game, x, y, 'tile');

where 'tile' means the texture you loaded in with phaser.

[Snade]

Ignore my previous comment. I didn't read your code carefully.

 

try this:

var wallEnemy = function(gameS, xS, yS){	Enemy.call(this, gameS, xS, yS, 'wallEnemy');	this.game = gameS;	this.x = xS;	this.y = yS;	this.followTarget = true;};wallEnemy.prototype = Object.create(Enemy.prototype);wallEnemy.prototype.constructor = wallEnemy;

[drhayes]

You've almost got this, you just need to change a couple of things. This line:

Phaser.Sprite.call(this, game, x, y, enemyType);

... should be the first line in your constructor. It allows Phaser to set up all of its properties first. Then, immediately after your constructor function you need a couple of lines like this:

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

This sets up the prototype chain in JS for your objects. This is *kind of* like virtual methods in C++. You'll need the same setup for your own derived classes, except they will call "Object.create(Enemy.prototype);" instead.

 

If you override the update method you'll need a line that looks like this in there:

Phaser.Sprite.prototype.update.call(this);

That will call the "parent" method on Sprite. For the record, Phaser doesn't do anything in the Sprite's "update" method but it's an okay habit to get into when setting up inheritance chains in JS.

[Tilde]

Hey guys, thanks for the replies. I did what you said, but as you can see, I've already got the prototype lines set up after the constructor. I rearranged the stuff you told me to, but I've still got the same error. Interestingly, I didn't think to have that parent updater in the Player class either, but it still works without calling it. From what I can tell (and I'm not totally sure about this but it seems to be the case), Update is called on onscreen Sprites automatically despite them having nothing in that function, implying that they're meant to be overridden with whatever behavior you want. But I could be totally wrong about that. Either way, it's not making the Enemy class work.

 

Original post has been edited to reflect current code.

[Tilde]

Whoa, somehow Snade's comment didn't come up for me until just now. Thanks, man! It looks like that's what finally did it. I owe you a credit.

[Snade]

Whoa, somehow Snade's comment didn't come up for me until just now. Thanks, man! It looks like that's what finally did it. I owe you a credit.

Just made this account, the posts were waiting for approval!

 

Glad I could help.