Bloc évanescent

Fanny

Les blocs évanescents n’aparaissent que lorsqu’un personnage s’en rapproche.

1. Charger une image

   load.js

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

2. Créer un composant

   component.js

   function vanishing(p) {
     const param = {
       invisibleDistance: 240,
       visibleDistance: 60,
       tag: "alive",
       ...p
     }
     return {
       require: ["opacity"],
       id: "invisible",
       update() {
         let op = 1
         for (const e of get(param.tag, { recursive: true })) {
           const d = (e.pos.dist(this.pos) - param.invisibleDistance)
           const calcul = 1 - clamp(0, 1, d / param.visibleDistance)
           op = Math.min(op, calcul)
         }
         this.opacity = op
       }
     }
   }

3. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "*": () => [ // text
         sprite("invisible"),
         area(),
         body({ isStatic: true }),
         anchor("bot"),
         offscreen({ hide: true }),
         vanishing(),
         opacity(),
       ],
   
       "#": () => [ // 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: `
   
               *
           **
                   ***
             **
   
                 ***
             #
           *****
   
       `,
     },
   
   ]

Paramètres

example

config.js

vanishing({
  invisibleDistance: 240,
  visibleDistance: 60,
  tag: "alive"
}),

Ressources

• invisible.png