É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. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     // échelle
     H: () => [
       sprite('ladder'),
       anchor('bot'),
       offscreen({ hide: true }),
       z(-1),
       pos(32, 64),
       area({ isSensor: true }),
       'climb',
     ],
   
     // player
     '#': () => [
       sprite('bean'),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor('center'),
       'player',
     ],
   
     // block
     '=': () => [
       sprite('grass-tileset'),
       offscreen({ hide: true }),
       tile({ isObstacle: true }),
       autoTiling(),
       area(),
       body({ isStatic: true }),
     ],
   
   };

3. modifier le joueur

   config.js

     // player
     '#': () => [
       climbController(),
       sprite('bean'),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor('center'),
       'player',
     ],

4. Lancer une animation

   events.js

   function events() {
     return {
       add() {
         // échelles
         on('climb jump', 'player', (obj) => {
           play('wooosh');
           obj.play('jump', {
             speed: 4,
             onEnd: () => obj.play('idle'),
           });
         });
   
         // personnages
         on('respawn', 'alive', (obj) => (obj.flipY = false));
         on('hurt', 'alive', (obj) => {
           play('hit');
           colorShiftFx(obj, { color: 'ff9b9b' });
         });
         on('death', 'alive', (obj) => {
           obj.flipY = true;
           wait(0.2, () => {
             if (!obj.isAlive) {
               obj.hidden = true;
               obj.collisionIgnore = ['*'];
               obj.isStatic = true;
             }
           });
         });
   
         // joueur
         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) => {
           play('wooosh');
           obj.play('jump', {
             speed: 4,
             onEnd: () => obj.play('idle'),
           });
         });
         on('drop', 'player', (obj) => {
           play('off');
           obj.play('worry');
         });
         on('hurt', 'player', (obj) => {
           obj.play('worry', {
             speed: 2,
             onEnd: () => obj.play('idle'),
           });
         });
       },
     };
   }

5. Placer les objets

   level.js

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

Paramètres

climbController()

example

config.js

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

Ressources

• ladder.png