How to write a class that extends from Phaser.Sprite?

[isfuturebright]

I'm trying to make a Player class to have it's own update and stuff. How can I extend Phaser.Sprite to make it work?

TEKILA.Player= function(texture){    PIXI.Sprite.call( this );};TEKILA.Player.prototype = Object.create( PIXI.Sprite.prototype);//Extends sprite..TEKILA.Player.prototype.constructor = TEKILA.Player;

I'm trying to follow what I've seen in Phaser, but I've into some problems when trying to do a game.add later on, and also my js here doesn't seem to find PIXI. What's the right way to go about this?

[rich]

Yay! This is one where I can finally say "Look at the Examples"

 

Specifically sprites - extending sprite demo 1 and 2.

[plicatibu]

I took a look into both examples.

 

Could you please tell me which are the advantages / disadvantages to pick one or the other extending method?

 

Thank you.

[rich]

The only difference is how they are added to the World. Use the method in demo 1 if you need them added immediately. Use the method in demo 2 if you want to create a bunch of sprites but not add them to the world at that point, but later on.

[isfuturebright]

Yay! This is one where I can finally say "Look at the Examples"

 

Specifically sprites - extending sprite demo 1 and 2.

Thanks, Rich! Oh while on the topic I was wondering what exactly are you doing when you do:

var Phaser = Phaser || {}

What the Phaser = Phaser means?

[rich]

If the Phaser global object already exists then use it, otherwise create a new Object and assign it to Phaser.

[isfuturebright]

I see. Oh and the class worked like a charm too! Thanks!

[farzher]

I strongly recommend using CoffeeScript. Extending a Sprite in Phaser is a huge mess (no offense to the developer, it's javascript's fault). It's done correctly and works perfectly with CoffeeScript classes! (I'm actually using LiveScript, not CoffeeScript, but it's similar)


So you can write this:

class MonsterBunny extends Phaser.Sprite	(game, x, y, @rotateSpeed) -> super game, x, y, 'bunny'	update: -> @angle += @rotateSpeed

Instead of this:

//  Here is a custom game objectMonsterBunny = function (game, x, y, rotateSpeed) {    Phaser.Sprite.call(this, game, x, y, 'bunny');    this.rotateSpeed = rotateSpeed;};MonsterBunny.prototype = Object.create(Phaser.Sprite.prototype);MonsterBunny.prototype.constructor = MonsterBunny;/** * Automatically called by World.update */MonsterBunny.prototype.update = function() {    this.angle += this.rotateSpeed;};

[Massemassimo]

Or typescript, like this:

export class MonsterBunny extends Phaser.Sprite {rotateSpeed: number;constructor(game: Phaser.Game, x: number, y: number, rotateSpeed: number) {   super(game, x, y);   this.rotateSpeed = rotateSpeed;}update() {      this.angle += this.rotateSpeed;}}

[Akshar Patel]

I was scratching my head, for a couple of hours, trying to find a solution to this in Typescript. Thanks @rich. Looking at the examples I understood how to extend the Sprite Class. And after reading @Massemassimo's post I could put my mind to rest. 

[hayesmaker]

Yay! This is one where I can finally say "Look at the Examples"

 

Specifically sprites - extending sprite demo 1 and 2.

 

I can't find demo 1 and 2 in a non numbered examples page: http://phaser.io/examples/v2/category/sprites

[drhayes]

I'd argue against Coffeescript at this point because of how soon we're going to be using ES6. Once jashkenas solves that problem, then Coffeescript ahoy – transpilers are great things and I like how little one has to type in CS.

 

But, right now, Coffee is using reserved words whose semantics are going to change when ES6 lands.

[rich]

I can't find demo 1 and 2 in a non numbered examples page: http://phaser.io/examples/v2/category/sprites

 

http://phaser.io/examples/v2/sprites/extending-sprite-demo-1

http://phaser.io/examples/v2/sprites/extending-sprite-demo-2

[Markarz]

@rich I'm having trouble getting this to work using ES6 syntax. It doesn't seem like the update method is called automatically from my player class extending Phaser.Sprite, but I'm not really sure why. 

 

If I add something simple like: 

 

  update() {         

    console.log('player update');

  } 

 

I don't get any log messages at all. I also tried adding a super.update(); call before the log statement, but that didn't do anything either. The only way I can get update to work so far is by adding it to the update method in my level stage. 

 

class Level1 extends Phaser.State {

 

update() {        

let game = this.game; 

let player = this.game.players[0];  

player.update();

}

}

export default Level1;

but then I can't separate out my update functionality for specific class types, which will lead to very messy level files for each stage. Any ideas?

[Skeptron]

@Markarz could you post your code? I tried ES6 lately and inheritance is crazily simple... You probably missed something. Did you call super(game, x, y, 'sprite') in the constructor?

[Markarz]

@Skeptron Ah, I think I got it.

 

I had been adding my sprites to the scene prior to extending the Phaser.Sprite class, so now I had to change the initialization logic. I'm still not entirely sure why the old method doesn't work in this case, but I noticed the game.add.existing line in one of the sprite examples posted earlier on this thread and that fixed my issues.  

 

new: 

super(game, x, y, 'char5');

game.add.existing(this);

game.physics.p2.enable(this);    

game.camera.follow(this)

 

old:

this.sprite = this.game.add.sprite(x, y, 'char'5);

game.physics.p2.enable(this.sprite);

game.camera.follow(this.sprite);

[the-kid]

For some reason that totally breaks the "x,y" cords for my sprite.