message

How to use

triggers on self"show message""hide message"

parameters

Parameter	Default Value	Type	Description
defaultText		string	"!"
size		number	60
margin		vec2	vec2(0, -100)
showDistance		number	60
tag		string	"player"
showAnimDuration		number	0.2
hideAnimDuration		number	0.2
rotationAnimAmp		number	20
rotationAnimCount		number	3

example

message({
  defaultText: "!",
  size: 60,
  margin: vec2(0, -100),
  showDistance: 60,
  tag: "player",
  showAnimDuration: 0.2,
  hideAnimDuration: 0.2,
  rotationAnimAmp: 20,
  rotationAnimCount: 3
}),

Source

component.js

function message(p) {
  const param = {
    defaultText: "!",
    size: 60,
    margin: vec2(0, -100),
    showDistance: 60,
    tag: "player",
    showAnimDuration: 0.2,
    hideAnimDuration: 0.2,
    rotationAnimAmp: 20,
    rotationAnimCount: 3,
    ...p
  }
  return {
    message: null,
    shown: false,
    animated: false,
    id: "message",
    add() {
      this.message = add([
        text(param.defaultText, { size: param.size }),
        pos(this.pos.add(param.margin)),
        anchor("bot"),
        scale(0),
        rotate(),
      ])
    },
    update() {
      const viewers = get(param.tag, { recursive: true })
      let shown = false
      for (const e of viewers) if (this.pos.dist(e.pos) <= param.showDistance) shown = true
      if (shown && !this.shown && !this.animated) this.showMessage()
      if (!shown && this.shown && !this.animated) this.hideMessage()
      this.message.hidden = !this.shown
    },
    showMessage() {
      tween(0, 1, param.showAnimDuration, (v) => this.message.scaleTo(v), easings.easeOutSine)
      tween(0, 1, param.showAnimDuration, (v) => this.message.angle = Math.sin(v * Math.PI * param.rotationAnimCount) * param.rotationAnimAmp, easings.easeOutSine)
      this.animated = true
      this.shown = true
      wait(param.showAnimDuration, () => this.animated = false)
      this.trigger("show message")
    },
    hideMessage() {
      tween(1, 0, param.hideAnimDuration, (v) => this.message.scaleTo(v), easings.easeOutSine)
      this.animated = true
      wait(param.hideAnimDuration, () => {
        this.animated = false
        this.shown = false
      })
      this.trigger("hide message")
    },
  }
}