Checkpoints

Saul

Les checkpoints permettent de préserver la patience du joueur et de centrer l’expérience sur les passages les plus difficiles. L’accumulation de checkpoints peut aussi réduire les conséquences des actions du joueur et ainsi nuire à la tension du jeu.

1. Charger une image

   load.js

   const PNG = [
     "flag",
     "grass",
   ]

2. Charger un son

   load.js

   const MP3 = [
     "signal",
     "wooosh",
     "off",
   ]

3. Créer des composants

   component.js

   function checkpoint(p) {
     const param = {
       onInteract: false,
       forAllPlayer: true,
       tag: "player",
       ...p
     }
     return {
       animAmp: 0,
       animStart: 0,
       id: "checkpoint",
       add() {
         if (param.onInteract) this.on("activated", (obj) => this.activateCheckPoint(obj))
         else this.onCollide(param.tag, (obj) => this.activateCheckPoint(obj))
       },
       activateCheckPoint(obj) {
         if (obj.is("respawn") && this.pos != obj.resetPos) {
           if (param.forAllPlayer) for (const t of get(param.tag, { recursive: true })) t.setInitPos(this.pos)
           else obj.resetPos = this.pos
           for (const e of get("checkpoint", { recursive: true })) if (e != this) e.trigger("checkpoint off")
           this.trigger("checkpoint on")
           obj.trigger("checkpoint")
         }
       },
     }
   }

   component.js

   function interactive(p) {
     const param = {
       switch: false,
       ...p
     }
     return {
       interactOn: false,
       add() {
         this.onCollide("interact", (e) => e.addInteractObject(this))
         this.onCollideEnd("interact", (e) => e.removeInteractObject(this))
       },
       activate(p) {
         (this.interactOn) ? this.trigger("disactivated", p) : this.trigger("activated", p)
         if (param.switch) this.interactOn = !this.interactOn
       },
     }
   }

   component.js

   function swing(p) {
     const param = {
       delay: 0.4,
       amplitude: 4,
       speed: 1,
       on: true,
       ...p
     }
     const offset_mult = 0.5
     return {
       id: "swing",
       require: ["rotate"],
       swingAmp: 0,
       add() {
         if (param.on) this.swingAmp = 1;
       },
       update() {
         const offset = this.pos.x + this.pos.y
         const timer = time() * param.speed + offset * offset_mult
         this.angle = wave(-param.amplitude, param.amplitude, timer) * this.swingAmp
       },
       swingSwitch(b) {
         tween(this.swingAmp, b ? 1 : 0, param.delay, (v) => (this.swingAmp = v))
       },
     }
   }

4. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "P": () => [ // checkpoint
         sprite("flag"),
         area(),
         anchor("bot"),
         pos(0, 10),
         offscreen({ hide: true }),
         rotate(),
         checkpoint(),
         interactive(),
         swing({
           on: false,
           amplitude: 10,
           speed: 4,
         }),
       ],
   
       "#": () => [ // 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. 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('checkpoint on', 'checkpoint', (obj) => obj.swingSwitch(true))
     on('checkpoint off', 'checkpoint', (obj) => obj.swingSwitch(false))
     on('checkpoint on', 'checkpoint', () => play('signal'))
     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. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
   
               #       P       P
             =====    ===     ===
   
   
       `,
     },
   
   ]

Paramètres

example

config.js

checkpoint({
  onInteract: false,
  forAllPlayer: true,
  tag: "player"
}),

example

config.js

swing({
  delay: 0.4,
  amplitude: 4,
  speed: 1,
  on: true
}),

Ressources

• flag.png
• signal.mp3