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. Créer des composants

   component.js

   function door(p) {
     const param = {
       nextLevel: false,
       destination: 0,
       delay: 0.1,
       onInteract: false,
       ...p
     }
     return {
       id: "door",
       add() {
         if (param.onInteract) this.on("activated", (obj) => this.enter(obj))
         else this.onCollide("player", (obj) => this.enter(obj))
       },
       enter(obj) {
         const d = param.nextLevel ? CURRENT_LEVEL + 1 : param.destination
         wait(param.delay, () => this.next(d))
         obj.trigger("enter")
         this.trigger("enter")
       },
       next(d) {
         if (d < LEVELS.length) CURRENT_LEVEL = d
         else CURRENT_LEVEL = 0
         go("game")
       },
     }
   }

4. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "D": () => [ // porte vers le niveau suivant
         sprite("door"),
         area(),
         door({ nextLevel: true }),
         anchor("bot"),
         offscreen({ hide: true }),
         z(-1),
       ],
   
       "0": () => [ // porte vers le niveau 0
         sprite("door"),
         area(),
         door(0),
         anchor("bot"),
         offscreen({ hide: true }),
         z(-1),
       ],
   
       "1": () => [ // porte vers le niveau 1
         sprite("door"),
         area(),
         door(1),
         anchor("bot"),
         offscreen({ hide: true }),
         z(-1),
       ],
   
       "2": () => [ // porte vers le niveau 2
         sprite("door"),
         area(),
         door(2),
         anchor("bot"),
         offscreen({ hide: true }),
         z(-1),
       ],
   
       "#": () => [ // 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('enter', 'door', () => play('door'))
     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: `
          2
         ===   ===
   
   
          #     D
         ===   ===
       `,
     },
     {
       map: `
          D
         ===
   
             =
          0     #
         ===   ===
       `,
     },
     {
       map: `
   
          #     D
         ===   ===
   
             =
                1
               ===
       `,
     },
     {
       map: `
          2     #
         ===   ===
   
   
                1
         ===   ===
       `,
     },
   
   ];

Paramètres

example

config.js

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

Ressources

• door.png
• door.mp3