Échelles

Issa

Les échelles peuvent permettre de donner au jeu plus de verticalité et peuvent être l’occasion de présenter de nouveaux types de défis pour le joueur.

1. Charger une image

   load.js

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

2. Créer des composants

   component.js

   function climbController(p) {
     const param = {
       upKey: "up",
       downKey: "down",
       climbSpeed: 400,
       climbJump: 600,
       delay: 0.05,
       sticky: true,
       catch: true,
       ...p
     }
     return {
       onLadder: false,
       savedTimeOnLadder: 0,
       isClimbing: false,
       require: ["player"],
       add() {
         this.onCollideUpdate("climb", () => this.savedTimeOnLadder = time())
         onKeyDown(param.upKey, () => this.climb(-1));
         onKeyDown(param.downKey, () => this.climb(1));
         this.on("climb start", () => {
           this.gravityScale = 0
           this.vel = vec2(0, 0)
           this.isClimbing = true
         })
         this.on("climb stop", () => {
           this.isClimbing = false
           this.gravityScale = 1
         })
         this.on("climb jump", () => this.jump(param.climbJump))
       },
       climb(d) {
         if (this.isAlive && this.isClimbing && this.onLadder) {
           this.move(0, d * param.climbSpeed)
         }
       },
       update() {
         this.onLadder = time() - this.savedTimeOnLadder < param.delay
         if (!this.isClimbing && this.isAlive && this.onLadder && (param.sticky || isKeyDown(param.upKey))) this.trigger("climb start")
         else if (this.isClimbing && !this.onLadder) {
           if (isKeyDown(param.upKey)) this.trigger("climb jump")
           this.trigger("climb stop")
         }
         else if (this.isClimbing && this.isGrounded()) this.trigger("climb stop")
         else if (this.isClimbing && !param.catch && !isKeyDown(param.upKey)) this.trigger("climb stop")
       },
     }
   }

3. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "H": () => [ // échelle
         sprite("ladder"),
         area(),
         anchor("bot"),
         offscreen({ hide: true }),
         z(-1),
         "climb",
       ],
   
       "#": () => [ // 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 }),
       ],
   
     },
   }

4. modifier le joueur

   config.js

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

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('climb jump', 'player', () => play('wooosh'))
     on('climb jump', 'player', (obj) => obj.play('jump', { speed: 4, onEnd: () => obj.play('idle') }))
     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: `
   
                      H
                  H   H    H ===
                  H   H    H
               #  H        H
             ======
   
       `,
     },
   
   ]

Paramètres

example

config.js

climbController({
  upKey: "up",
  downKey: "down",
  climbSpeed: 400,
  climbJump: 600,
  delay: 0.05,
  sticky: true,
  catch: true
}),

Ressources

• ladder.png