lifebar

Permet d'afficher la santé du joueur

How to use

parameters

Parameter	Default Value	Type	Description
sprite		string	'heart'
margin		vec2	vec2(40, 40)
healAnimDuration		number	0.6
hurtAnimDuration		number	0.2
lifeZero		boolean	true
iconSize		number	40
iconMarign		number	-10

example

lifebar({
  sprite: 'heart',
  margin: vec2(40, 40),
  healAnimDuration: 0.6,
  hurtAnimDuration: 0.2,
  lifeZero: true,
  iconSize: 40,
  iconMarign: -10
}),

Source

component.js

function lifebar(p) {
  const param = {
    sprite: 'heart',
    margin: vec2(40, 40),
    healAnimDuration: 0.6,
    hurtAnimDuration: 0.2,
    lifeZero: true,
    iconSize: 40,
    iconMarign: -10,
    ...p,
  };
  return {
    id: 'lifebar',
    icons: [],
    add() {
      const zl = param.lifeZero ? 1 : 0;
      for (let i = 0; i < this.hp - zl; i++) this.createIcon();
      this.updateIcons();
      this.on('hurt', () => this.updateIcons());
      this.on('heal', () => this.updateIcons());
      this.on('death', () => this.updateIcons());
    },
    createIcon() {
      const p =
        param.margin.x +
        this.icons.length * (param.iconSize + param.iconMarign);
      const e = add([
        sprite(param.sprite, { width: param.iconSize }),
        fixed(),
        pos(p, param.margin.y),
        z(10),
        scale(0),
        anchor('center'),
        { displayed: false },
      ]);
      this.icons.push(e);
    },
    updateIcons() {
      const heartCount = param.lifeZero ? this.hp - 1 : this.hp;
      for (let i = this.icons.length; i < heartCount; i++) this.createIcon();
      for (let i = 0; i < this.icons.length; i++) {
        if (i < heartCount && !this.icons[i].displayed) {
          this.icons[i].displayed = true;
          tween(
            0,
            1,
            param.healAnimDuration,
            (v) => this.icons[i].scaleTo(v),
            easings.easeOutBounce
          );
        } else if (i >= heartCount && this.icons[i].displayed) {
          this.icons[i].displayed = false;
          tween(
            1,
            0,
            param.hurtAnimDuration,
            (v) => this.icons[i].scaleTo(v),
            easings.easeOutSine
          );
        }
      }
    },
  };
}