Can I add another Phaser.Component.Health to Sprite to represent shield?

I don’t quite get how Phaser.Component works, but I assume its a “Component” you can add to a class by will. The main character in my game has health which is covered with Phaser.Sprite class, but it also has shield, which also acts as additional health, except, the Sprite.health value would start to fall down only when shield is down, i.e 0% if we look at it like percentage.

How or can I add additional Phaser.Component.Health as shield to a Sprite class, or I should use Phaser.Utils.extend() method to extend Sprite class with shield component, or maybe just an integer value?

I think this works like

Phaser.Component.Shield = function () {};

Phaser.Component.Shield.prototype = {
  shield: 1
  // etc.
};

Phaser.Utils.mixinPrototype(
  Phaser.Sprite.prototype,
  Phaser.Component.Shield.prototype,
  true // replace (override) properties of the same name
);
1 Like

yes it does, except now all sprites have a shield property. I managed to create my own code like so:

Phaser.Component.Shield = function () {};

Phaser.Component.Shield.prototype = {
       shield: 100
       // etc.
};

var spaceRanger = game.add.sprite(50, game.world.centerY, 'spaceRanger');
var spaceRangerNew = Phaser.Utils.mixin(
        Phaser.Component.Shield,
        spaceRanger,
);

spaceRangerNew.shield = 54;

console.log("the new space ranger has: " + spaceRangerNew.shield + "% shield");
// outputs: the new space ranger has: 54% shield

This makes just the SpaceRanger have a shield property and not all Sprites.

Hmm could possibly do it like this:

var SpaceRanger = (function () {
     return {
          // methods
     };
}());
Phaser.Component.Shield = function () {};

Phaser.Component.Shield.prototype = {
  shield: 1
  // etc.
};

Phaser.Utils.mixinPrototype(
  SpaceRanger.prototype,
  Phaser.Component.Shield.prototype,
  true // replace (override) properties of the same name
);

And then SpaceRanger prototype will get Shield property