message

How to use

triggers on self"show message""hide message"

parameters

Parameter	Default Value	Type	Description
defaultText		string	'!'
size		number	60
width		number	600
margin		vec2	vec2(0, -40)
tag		string	'player'
align		string	'center'
anchor		string	'bot'
fadeDuration		number	0.1
easing		unknown	easings.easeOutSine

example

message({
  defaultText: '!',
  size: 60,
  width: 600,
  margin: vec2(0, -40),
  tag: 'player',
  align: 'center',
  anchor: 'bot',
  fadeDuration: 0.1,
  easing: "easings.easeOutSine"
}),

Source

component.js

function message(p) {
  const param = {
    defaultText: '!',
    size: 60,
    width: 600,
    margin: vec2(0, -40),
    tag: 'player',
    align: 'center',
    anchor: 'bot',
    fadeDuration: 0.1,
    easing: easings.easeOutSine,
    ...p,
  };
  return {
    message: null,
    id: 'message',
    add() {
      let shown = false;
      this.message = add([
        text(param.defaultText, {
          size: param.size,
          width: param.width,
          align: param.align,
        }),
        pos(0, 0),
        anchor(param.anchor),
        rotate(),
        opacity(0),
        scale(),
      ]);
      requestAnimationFrame(() => {
        this.message.pos = this.pos.add(param.margin);
      });
      onUpdate(() => {
        const fade = (t) => {
          tween(
            this.message.opacity,
            t,
            param.fadeDuration,
            (v) => (this.message.opacity = v),
            param.easing
          );
        };
        if (this.currentTarget && !shown) {
          shown = true;
          this.trigger('show message');
          fade(1);
        }
        if (!this.currentTarget && shown) {
          shown = false;
          this.trigger('hide message');
          fade(0);
        }
      });
    },
  };
}