Décors

Issa

Les éléments de décoration permettent de rendre l’univers figuré par le jeu plus vivant et plus immersif. Ils peuvent aussi être l’occasion de cacher des passages ou des objets secrets.

1. Charger une image

   load.js

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

2. Créer des composants

   component.js

   function swing(p) {
     const param = {
       delay: 0.4,
       amplitude: 4,
       speed: 1,
       on: true,
       ...p
     }
     const offset_mult = 0.5
     return {
       id: "swing",
       require: ["rotate"],
       swingAmp: 0,
       add() {
         if (param.on) this.swingAmp = 1;
       },
       update() {
         const offset = this.pos.x + this.pos.y
         const timer = time() * param.speed + offset * offset_mult
         this.angle = wave(-param.amplitude, param.amplitude, timer) * this.swingAmp
       },
       swingSwitch(b) {
         tween(this.swingAmp, b ? 1 : 0, param.delay, (v) => (this.swingAmp = v))
       },
     }
   }

3. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "b": () => [ // décoration arrière plan
         sprite("bush"),
         area(),
         anchor("bot"),
         swing(),
         offscreen({ hide: true }),
         rotate(),
         scale(1),
         z(-1),
       ],
   
       "B": () => [ // décoration premier plan
         sprite("bush"),
         area(),
         anchor("bot"),
         swing(),
         offscreen({ hide: true }),
         rotate(),
         scale(1.25),
         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 }),
       ],
   
     },
   }

4. Placer les objets

   level.js

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

Paramètres

example

config.js

swing({
  delay: 0.4,
  amplitude: 4,
  speed: 1,
  on: true
}),

Ressources

• bush.png