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 = {
   
     "D": () => [ // porte vers le niveau suivant
       sprite("door"),
       area(),
       door(),
       anchor("bot"),
       offscreen({ hide: true }),
       z(-1),
     ],
   
     "0": () => [ // porte vers le niveau 0
       sprite("door"),
       area(),
       door({ destination: 0 }),
       anchor("bot"),
       offscreen({ hide: true }),
       z(-1),
     ],
   
     "1": () => [ // porte vers le niveau 1
       sprite("door"),
       area(),
       door({ destination: 1 }),
       anchor("bot"),
       offscreen({ hide: true }),
       z(-1),
     ],
   
     "2": () => [ // porte vers le niveau 2
       sprite("door"),
       area(),
       door({ destination: 2 }),
       anchor("bot"),
       offscreen({ hide: true }),
       z(-1),
     ],
   
     "#": () => [ // player 1
       sprite("bean"),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor("center"),
     ],
   
     "=": () => [ // block
       sprite("grass"),
       area({ collisionIgnore: ["agent"] }),
       body({ isStatic: true }),
       anchor("bot"),
       offscreen({ hide: true }),
       tile({ isObstacle: true }),
     ],
   
   }

4. Lancer une animation

   game.js

   scene("game", () => {
   
     const tiles = { ...TILE_CONFIG, ...LEVELS[CURRENT_LEVEL].tiles }
     const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config, ...{tiles:tiles}}
     const map = LEVELS[CURRENT_LEVEL].map.split('\n')
     const level = addLevel(map, config)
     const utility = 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'))
   
   }

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
}),

Ressources

• door.png
• door.mp3