Checkpoints

pour Saul

Les checkpoints peuvent permettre de préserver la patience du joueur et d'éviter de susciter de la frustrantion. Leur accumulation peut aussi réduire le sentiment de tension du joueur lors de passages difficiles.

Charger une image

load.js

const PNG = [

  "flag" ,

  "grass" ,
]

Charger un effet sonore

load.js

const MP3 = [

  "signal" ,

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

Créer un nouveau composant

component.js

// Ajoutes ici tes propres composants

function checkpoint(p) {
  // permet de changer le point d'apparition des joueurs lorsqu'ils perdent
  const param = {
    animDelay: 0.4,
    animAmp: 10,
    animSpeed: 4,
    forAllPlayer: true,
    ...p
  }
  return {
    animAmp: 0,
    animStart: 0,
    id: "checkpoint",
    add() {
      this.onCollide("player", (p) => {
        if (this.pos != p.resetPos) {
          play("signal")
          this.setAnim()
          this.activate(p)
        }
      })
    },
    activate(p) {
      if (param.forAllPlayer)
        for (const t of get("player", { recursive: true }))
          t.resetPos = this.pos
      else p.resetPos = this.pos
    },
    setAnim() {
      for (const t of get("checkpoint", { recursive: true })) {
        tween(
          t.animAmp,
          0,
          param.animDelay,
          (v) => (t.animAmp = v),
          easings.easeInSine
        )
      }
      tween(
        this.animAmp,
        1,
        param.animDelay,
        (v) => (this.animAmp = v),
        easings.easeOutSine
      )
      this.animStart = time()
    },
    update() {
      const t = (time() - this.animStart) * param.animSpeed
      const w = wave(-param.animAmp, param.animAmp, t)
      this.angle = w * this.animAmp
    },
  }
}

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
        "P": () => [ // checkpoint
      sprite("flag"),
      area(),
      anchor("bot"),
      pos(0, 10),
      offscreen({ hide: true }),
      rotate(),
      checkpoint(),
    ],
    "#": () => [ // 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 }),
    ],

  },
}

Placer les objets

level.js

const LEVELS = [
  
  // liste des niveaux du jeu

  {
    map: `

        #       P          
      =====    ===     ====
      
    `,
  },

]

checkpoint

levelConf.js
tiles :
checkpoint({

  animDelay: 0.4,

  animAmp: 10,

  animSpeed: 4,

  forAllPlayer: true,

}),