Portes

Les portes permettent de diviser un jeu en plusieurs niveaux et d’introduire un nouveau type de circulation pour le joueur. Les niveaux peuvent s’enchainer les uns après les autres de manière continue et ainsi rythmer la progression du joueur. Un même niveau peut aussi comprendre différentes portes vers différents niveaux, à la manière d’un hub.

1. Charger une image

   load.js

   const PNG = [
     'door',
     'grass',
   ];

2. Charger un son

   load.js

   const MP3 = [
     'door',
     'wooosh',
     'off',
   ];

3. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     // porte vers le niveau suivant
     D: () => [
       sprite('door'),
       area({ isSensor: true }),
       door(),
       anchor('bot'),
       offscreen({ hide: true }),
       z(-1),
       pos(32, 64),
     ],
   
     // porte vers le niveau 0
     0: () => [
       sprite('door'),
       area({ isSensor: true }),
       door({ destination: 0 }),
       anchor('bot'),
       offscreen({ hide: true }),
       z(-1),
       pos(32, 64),
     ],
   
     // porte vers le niveau 1
     1: () => [
       sprite('door'),
       area({ isSensor: true }),
       door({ destination: 1 }),
       anchor('bot'),
       offscreen({ hide: true }),
       z(-1),
       pos(32, 64),
     ],
   
     // porte vers le niveau 2
     2: () => [
       sprite('door'),
       area({ isSensor: true }),
       door({ destination: 2 }),
       anchor('bot'),
       offscreen({ hide: true }),
       z(-1),
       pos(32, 64),
     ],
   
     // 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 }),
     ],
   
   };

4. Lancer une animation

   events.js

   function events() {
     return {
       add() {
         // portes
         on('enter', 'door', () => play('door'));
   
         // 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: `
   2
    === ===
   
          #     D
         ===   ===
       `,
   
   },
   {
   map: `
   D
    ===
   
             =
          0     #
         ===   ===
       `,
   
   },
   {
   map: `
   
          #     D
         ===   ===
   
             =
                1
               ===
       `,
   
   },
   {
   map: `
   2 #
   === ===
   
                1
         ===   ===
       `,
   
   },
   
   ];

Paramètres

door()

example

config.js

door({
  nextLevel: true,
  destination: 0,
  delay: 0.1,
  onInteract: false,
  locked: false,
  goToAnotherScene: true
}),

Ressources

• door.png
• door.mp3