When extending group (or some other phaser object), how to add custom events

[begedin]

In a project I'm working on, we have a card object, which is an extended group. It represents a sort of TCG card graphic.

It's an extended group because it consists of several different sprites, some of which are fixed, while some vary with the card type. There's the background card sprite, three different icons (one for each but the top corner) and the character graphic that goes on top.

 

The thing is, I'd like to add some events to this extended group, but I'm not sure how to do it without overriding the existing events object that get's added on the group some time later in the initialization.

 

To explain a bit better what I'm trying to do, here's a code snippet of my constructor:

    var Combatant = function (game, team, position, texture) {        this.game = game;        Phaser.Group.call(this, this.game);        // removed code that's adding adding various sprites to the group here        var self = this;        this.customEvents = {            onDamaged: new Phaser.Signal(),            onHealed: new Phaser.Signal()        }    };        Combatant.prototype = Object.create(Phaser.Group.prototype);    Combatant.prototype.constructor = Combatant;

Now, as you can see, I've added a "customEvents" object where all my extra events will go. However, I feel it would be better to have those objects within the regular events object of the base Phaser.Group base.

 

The thing is, if I do it at this point in the constructor, the regular events object is still undefined, so there's nothing to extend. On the other hand, just plain renaming "this.customEvents" to "this.events" also somehow prevents the default group events from being added to the object.

 

So, any idea? What would be the best way to extend the default events object?

 

Is it done in init? Create? Some other time? What's the convention?

[lewster32]

Extending a Sprite would be better for this - you can still add children to Sprite instances via sprite.addChild(childSprite) which is equivalent to group.add(childSprite) and so you can create your composite object in the same way you'd do it for a group. If you were to create a 'deck' or a 'hand' then extending Group would be better for this particular purpose, as then you get all of the nice iterator functions Groups have.

[begedin]

I don't have full access to the project at the moment, so I can't try it out. However, I did dig through the documentation and the forum a bit and found the "addChild" option, so I agree it might be a better choice.

 

But the question remains, at what point should I extend the events object of the parent class when extending a Phaser object? It looks like the events object remains undefined in the constructor even after calling the base constructor, so I can't extend it there. Should I do it in init or create, or at some other point?

[lewster32]

The events property is not defined on a Group object at all, but it is defined in the constructor of the Sprite object, so you can add new events after calling the base constructor when extending a Sprite:

var Combatant = function (game, team, position, texture) {    Phaser.Sprite.call(this, game, position.x, position.y, texture);    // from now on, this.events will be defined as an instance of Phaser.Events: http://docs.phaser.io/Phaser.Events.html    this.events.onDamaged = new Phaser.Signal();    this.events.onHealed = new Phaser.Signal();};    Combatant.prototype = Object.create(Phaser.Sprite.prototype);Combatant.prototype.constructor = Combatant;