[Ask] tPhaser Inheritance

[hyude]

Hello, I'm still learning Phaser.

 

I'm familiar with OOP Perspective. But from what I learnt from many tutorial in Phaser, Phaser does not have obvious OOP-perspective. So the tutorial use a workaround to it.

 

For example, if I want to have a customized draggable sprite (with spesific dragDrop eventhandler).

I need to create an object, which have a properties (pointer) to sprite.

I can then use the sprite as the object itself (sort of wrap the sprite with my custom object method and properties).

 

This approach is simple when used in simple object, but I can see this might create some problem for more complex object.

 

So I am thinking maybe the reason most tutorial use this approach to do this is because they are tutorial (which tries to shows the simplest way to do it). 

 

My question is : Is this the correct practice when using phaser? Using the pseudo-inheritance workaround, as extending a base class. Or is there a better practice and cleaner approach to do this for more complex object?

 

Thank you.

[clark]

It is a good question!

 

In TypeScript and I guess JavaScript directly, I use both methods. 

 

For example, if I wanted an image, I would say this.game.make.image but it would be just as relevant to say  new Image()

 

So say for example, most of my visual stuff extends Phaser.Group when I need a dedicated specific class

class Tree extends Phaser.Group{    private appleColor: number;    constructor(game: Phaser.Game, appleColor: number, parent?: any){                super(game, parent);        this.appleColor = appleColor;        }}

usage

var tree: Tree = new Tree(this.game, 0x000000, this.stage);

But I suppose that this could also be done with your example tutorial method.  For a long time, not just in Phaser, I have trouble knowing what way is the best way to structure visual entities. 


If tree had an image of an Apple inside my Tree class, I would probably say
 

this.image = this.game.add.Image(0, 0, key, frame, this);

because it is less boring than 
 

this.image = new Phaser.Image(this.game, 0, 0, key, frame);this.add(this.image)

but both are the same thing really?

[hyude]

Thank you for your response clark.

 

I just learned another way to do it, that is by using call() method and assign prototype to parent class.

 

Say, I want to extends Sprite Class, I can do

MyObj = function(game){    Phaser.Sprite.call(this, game, x, y, 'asset');};MyObj.prototype = Object.create(Phaser.Sprite.prototype);MyObj.prototype.constructor = MybBj; 

and I can implement preload(), create() and update()  by overriding the parent method.

 

My question is : How can I call parent method, like super.update(), if I want to somehow extends the parent method and not overriding it?

.

[PixelPicoSean]

You can call method from parent's prototype:

MyObj = function(game, x, y) {    Phaser.Sprite.call(this, game, x, y, 'asset');};MyObj.prototype = Object.create(Phaser.Sprite.prototype);MyObj.prototype.constructor = MyObj;// Override its Sprite.updateMyObj.prototype.update = function() {    // Call parent method    Phaser.Sprite.prototype.update.call(this);    // Something else here...}

Or try a JavaScript class system instead. Take a look at my phaser generator here: https://github.com/pixelpicosean/slush-phaser-project 

Hope it helps, but note that the class system included is still experimental

[xerver]

It has Objects and constructors, Phaser just uses factory methods for object creation. For example, these are basically the same:

game.add.group();//same as:new Phaser.Group(game);

You can see that in fact that is exactly what the factory method does: https://github.com/photonstorm/phaser/blob/master/src/gameobjects/GameObjectFactory.js#L105

 

 

Note also that JavaScript is not a classical OOP language, it is prototypal. Trying to apply classic OOP concepts in JS usually just end up causing you unnecessary pain.

[Noid]

If you're not familiar with the way javascript handles inheritance I recommend to take some time to get familiarized with it.  

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript