collector

Permet d'afficher un compteur d'objets collectés

How to use

parameters

Parameter	Default Value	Type	Description
legacy	boolean	true	conserve la collection niveau à l'autre
deleteOnRespawn	boolean	true	vide la collection quand le personnage réapparait
showTotal	boolean	false	affiche la somme des collectible dans le niveau
hideWhenEmpty	boolean	true	est maqué si la collection est vide
anchor	string	'left'	point d'ancrage de l'affichage
sprite	string	'coin'	sprite à afficher
type	string	'item'	type d'objet à décompter
margin	Vec2	vec2(30, 40)	marge de l'affichage
textMargin	Vec2	vec2(0, 0)	marge du texte
detuneSpeed	number	100	vitesse du changement de hauteur de l'effet sonore
textSize	number	30	taille du texte du décompte
iconSize	number	30	taille de la sprite
iconMarign	number	10	marge d'affichage de la sprite
color	Color	WHITE	couleur du texte

example

collector({
  legacy: true,
  deleteOnRespawn: true,
  showTotal: false,
  hideWhenEmpty: true,
  anchor: 'left',
  sprite: 'coin',
  type: 'item',
  margin: vec2(30, 40),
  textMargin: vec2(0, 0),
  detuneSpeed: 100,
  textSize: 30,
  iconSize: 30,
  iconMarign: 10,
  color: "WHITE"
}),

Source

component.js

function collector(p) {
  const param = {
    legacy: true, // conserve la collection niveau à l'autre
    deleteOnRespawn: true, // vide la collection quand le personnage réapparait
    showTotal: false, // affiche la somme des collectible dans le niveau
    hideWhenEmpty: true, // est maqué si la collection est vide
    anchor: 'left', // point d'ancrage de l'affichage
    sprite: 'coin', // sprite à afficher
    type: 'item', // type d'objet à décompter
    margin: vec2(30, 40), // marge de l'affichage [Vec2]
    textMargin: vec2(0, 0), // marge du texte [Vec2]
    detuneSpeed: 100, // vitesse du changement de hauteur de l'effet sonore
    textSize: 30, // taille du texte du décompte
    iconSize: 30, // taille de la sprite
    iconMarign: 10, // marge d'affichage de la sprite
    color: WHITE, // couleur du texte [Color]
    ...p,
  };
  return {
    icon: null,
    label: null,
    collected: 0,
    total: null,
    id: 'collector',
    pitch: 0,
    add() {
      this.label = add([
        text('', {
          size: param.textSize,
        }),
        pos(param.margin),
        fixed(),
        anchor(param.anchor),
        z(11),
        color(param.color),
      ]);
      if (param.anchor == 'right') this.label.pos.x = width() - param.margin.x;
      if (param.sprite != null) {
        this.icon = add([
          sprite(param.sprite, {
            width: param.iconSize,
          }),
          pos(param.margin),
          fixed(),
          anchor(param.anchor),
          z(10),
        ]);
        this.setCollectorTextPos();
        if (param.hideWhenEmpty) this.icon.hidden = true;
      }

      this.on('pick', (obj) => {
        if (obj.type == param.type) {
          this.pitch += 100;
          this.updateCollector(this.collected + 1);
          this.trigger('score', {
            detune: this.pitch,
          });
        }
      });
      this.on('respawn', () => {
        if (param.deleteOnRespawn) {
          this.updateCollector(0);
        }
      });
      if (param.legacy)
        this.on('legacy', (legacy) => {
          for (const e of legacy)
            if (e.collected) this.updateCollector(e.collected);
        });
      this.on('init', () => {
        this.total = get('collectible', {
          recursive: true,
        }).length;
        this.updateCollector();
      });
      onResize(() => this.setCollectorTextPos());
    },
    setCollectorTextPos() {
      if (param.anchor == 'right') {
        this.icon.pos.x = width() - param.margin.x;
        this.label.pos.x =
          width() - param.iconSize - param.iconMarign - param.margin.x;
      } else {
        this.label.pos.x =
          param.margin.x +
          param.iconSize +
          param.iconMarign +
          param.textMargin.x;
      }
      this.label.pos.y = param.margin.y + param.textMargin.y;
    },
    updateCollector(collected = this.collected) {
      this.collected = collected;
      this.label.text = this.collected;
      if (param.showTotal) this.label.text += '/' + this.total;
      if (param.hideWhenEmpty && this.collected == 0) {
        this.label.hidden = true;
        if (this.icon != null) this.icon.hidden = true;
      } else {
        this.label.hidden = false;
        if (this.icon != null) this.icon.hidden = false;
      }
    },
    update() {
      this.pitch = Math.max(0, this.pitch - dt() * param.detuneSpeed);
    },
  };
}