collector

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

How to use

parameters

Parameter	Default Value	Type	Description
deleteOnRespawn		boolean	true
showTotal		boolean	true
margin		vec2	vec2(30, 40)
textMargin		vec2	vec2(0, 0)
anchor		string	'left'
sprite		string	'coin'
detuneSpeed		number	100
textSize		number	30
iconSize		number	30
iconMarign		number	10
hideWhenEmpty		boolean	true
noText		boolean	false
textOverIcon		boolean	false
color		object	{ r: 255, g: 255, b: 255 }
type		string	'item'

example

collector({
  deleteOnRespawn: true,
  showTotal: true,
  margin: vec2(30, 40),
  textMargin: vec2(0, 0),
  anchor: 'left',
  sprite: 'coin',
  detuneSpeed: 100,
  textSize: 30,
  iconSize: 30,
  iconMarign: 10,
  hideWhenEmpty: true,
  noText: false,
  textOverIcon: false,
  color: { r: 255, g: 255, b: 255 },
  type: 'item'
}),

Source

component.js

function collector(p) {
  const param = {
    deleteOnRespawn: true,
    showTotal: true,
    margin: vec2(30, 40),
    textMargin: vec2(0, 0),
    anchor: 'left',
    sprite: 'coin',
    detuneSpeed: 100,
    textSize: 30,
    iconSize: 30,
    iconMarign: 10,
    hideWhenEmpty: true,
    noText: false,
    textOverIcon: false,
    color: { r: 255, g: 255, b: 255 },
    type: 'item',
    ...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.r, param.color.g, param.color.b),
      ]);
      if (param.noText) this.label.hidden = true;
      else {
        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.collected++;
          this.pitch += 100;
          if (!param.noText) this.updateCollectorText();
          this.trigger('score', {
            detune: this.pitch,
          });
        }
      });
      this.on('respawn', () => {
        if (param.deleteOnRespawn) {
          this.collected = 0;
          this.updateCollectorText();
        }
      });
      requestAnimationFrame(() => {
        this.total = get('collectible', {
          recursive: true,
        }).length;
        this.updateCollectorText();
      });
      onResize(() => this.setCollectorTextPos());
    },
    setCollectorTextPos() {
      if (param.anchor == 'right') {
        this.icon.pos.x = width() - param.margin.x;
        if (param.textOverIcon && param.sprite != null) {
          this.label.pos.x = width() - param.margin.x - param.iconSize / 2;
          this.label.anchor = 'center';
        } else
          this.label.pos.x =
            width() - param.iconSize - param.iconMarign - param.margin.x;
      } else {
        if (param.textOverIcon && param.sprite != null) {
          this.label.pos.x =
            param.margin.x + param.textMargin.x + param.iconSize / 2;
          this.label.anchor = 'center';
        } 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;
    },
    updateCollectorText() {
      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);
    },
  };
}