Aller au contenu
colin's kaplay doc

Messages

Yanis & Sullivan

Affiche des messages à l’adresse du joueur

  1. Charger une image

    Section intitulée « Charger une image »
    load.js
    const PNG = [
      "paper",
      "grass",
    ]

  2. Charger un son

    Section intitulée « Charger un son »
    load.js
    const MP3 = [
      "bloup",
      "wooosh",
      "off",
    ]

  3. Créer des composants

    Section intitulée « Créer des composants »
    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")
        },
      }
    }

  4. Déclarer un objet

    Section intitulée « Déclarer un objet »
    config.js
    const LEVEL_CONFIG = {
    

      // paramètres du niveau
    

      tileWidth: 64,
      tileHeight: 64,
      backgroundColor: "afe1ff",
      gravity: 3200,
    

      tiles: {
    

        "!": () => [ // text
          sprite("paper"),
          message(),
          anchor("bot"),
          offscreen({ hide: true }),
          z(-1),
        ],
    

        "#": () => [ // player 1
          sprite("bean"),
          platformerController(),
          alive(),
          opacity(),
          scale(),
          health(1, 4),
          area(),
          anchor("bot"),
          body(),
          respawn(),
          falling(),
        ],
    

        "=": () => [ // block
          sprite("grass"),
          area(),
          body({ isStatic: true }),
          anchor("bot"),
          offscreen({ hide: true }),
        ],
    

      },
    }

  5. Modifier la scène

    Section intitulée « Modifier la scène »
    game.js
    scene("game", () => {
    

      const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config }
      const map = LEVELS[CURRENT_LEVEL].map.split("\n")
      const level = addLevel(map, config)
    

      add([
        setMessage(config),
        multiplayerCamera(),
      ])
      setGravity(config.gravity)
      setBackground(config.backgroundColor)
    

      on('jump', 'player', () => play('wooosh'))
      on('drop', 'player', () => play('off'))
      on('respawn', 'player', (obj) => obj.play('idle'))
      on('sleep', 'player', (obj) => obj.play('sleep'))
      on('awake', 'player', (obj) => obj.play('idle'))
      on('jump', 'player', (obj) => obj.play('jump', { speed: 4, onEnd: () => obj.play('idle') }))
      on('drop', 'player', (obj) => obj.play('worry'))
    

    }

  6. Lancer une animation

    Section intitulée « Lancer une animation »
    game.js
    scene("game", () => {
    

      const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config }
      const map = LEVELS[CURRENT_LEVEL].map.split("\n")
      const level = addLevel(map, config)
    

      add([
        multiplayerCamera(),
      ])
      setGravity(config.gravity)
      setBackground(config.backgroundColor)
    

      on('show message', 'message', () => play('bloup'))
      on('jump', 'player', () => play('wooosh'))
      on('drop', 'player', () => play('off'))
      on('respawn', 'player', (obj) => obj.play('idle'))
      on('sleep', 'player', (obj) => obj.play('sleep'))
      on('awake', 'player', (obj) => obj.play('idle'))
      on('jump', 'player', (obj) => obj.play('jump', { speed: 4, onEnd: () => obj.play('idle') }))
      on('drop', 'player', (obj) => obj.play('worry'))
    

    }

  7. Placer les objets

    Section intitulée « Placer les objets »
    level.js
    const LEVELS = [
    

      {
        map: `
    

             #   !    !
           ==============
    

        `,
      },
    

    ]

  8. Rédiger les messages

    Section intitulée « Rédiger les messages »
    level.js
    const LEVELS = [
    

      {
        map: `
    

             #   !    !
           ==============
    

        `,
        config:{
          messages:[
    

            "oh hi,",
            "oh bye!",
    

          ],
        },
      },
    

    ];

Paramètres

Section intitulée « Paramètres »
example
config.js
message({
  defaultText: "!",
  size: 60,
  margin: vec2(0, -100),
  showDistance: 60,
  tag: "player",
  showAnimDuration: 0.2,
  hideAnimDuration: 0.2,
  rotationAnimAmp: 20,
  rotationAnimCount: 3
}),

Ressources

Section intitulée « Ressources »