Messages

pour Yanis et Sullivan

Affiche des messages à l'adresse du joueur

Charger une image

load.js

const PNG = [

  "paper",

  "grass",
]

Charger un effet sonore

load.js

const MP3 = [

"bloup" ,

  "wooosh",
  "off",
  "hit",
]

Créer un composant

component.js

// Ajoutes ici tes propres composants

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.text,{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)
      play("bloup")
    },
    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
      })
    },
  }
}

function fillMessages(messages){
  if (messages){
    const objects = get("message",{recursive:true})
    for (let i = 0 ; i < Math.min(objects.length,messages.length);i++) objects[i].message.text=messages[i]
  }
}

Déclarer un symbole

levelConf.js

const LEVEL_CONFIG = {

  // paramètres du niveau

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

  tiles: {
    
    // listes des objets à placer dans les niveaux

    "!": () => [ // text
      sprite("paper"),
      message(),
      anchor("bot"),
      offscreen({ hide: true }),
      z(-1),
    ], 
    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
      coloring(),
      animator(),
    ],
    
    "=": () => [ // block
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
    ],

  },

}

Modifier un objet dans la scène

game.js

scene("game", () => {

  // scène dans laquelle se déroulent les niveaux

  const config = { 
    ...LEVEL_CONFIG, 
    ...LEVELS[CURRENT_LEVEL].config 
  }
  const utilities = add([
    multiplayerCamera(),
  ])
  setGravity(3200)
  setBackground(config.backgroundColor)
  addLevel(LEVELS[CURRENT_LEVEL].map, config)

  fillMessages(config.messages)

})

Placer les objets

level.js

const LEVELS = [
  
  // liste des niveaux du jeu
  {
    map: `

         #   !    !  
       ==============
       
    `,
  },
  
];

Rédiger les messages

level.js

const LEVELS = [
  
  // liste des niveaux du jeu
  {
    map: `

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

    `,

   config:{
      messages:[

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

      ],
    },
  },
  
];

message

levelConf.js
tiles :
message({

  defaultText: "!",

  size: 60,

  margin:vec2(0,-100),

  showDistance:60,

  tag: "player",

  showAnimDuration:0.2,

  hideAnimDuration:0.2,

  rotationAnimAmp:20,

  rotationAnimCount:3,

}),