Blocs invisibles

pour Fanny

Les blocs invisible n'aparaissent que lorsqu'un personnage s'en rapproche.

Charger une image

load.js

const PNG = [

  "invisible",

  "grass",
]

Créer un composant

component.js

// Ajoutes ici tes propres composants


function invisible(p) {
  const param = {
    invisibleDistance: 240,
    visibleDistance: 60,
    tag:"alive",
    ...p
  }
  return {
    require: ["opacity"],
    id: "invisible",  
    update() {
      const viewers = get(param.tag, { recursive: true })
      let op = 1 ;
      for (const e of viewers) {
        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;
    }
  }
}

Déclarer un symbole

levelConf.js

const LEVEL_CONFIG = {

  // paramètres du niveau

  tileWidth: 64,
  tileHeight: 64,
  backgroundColor: "afe1ff",
  gravity: 3200,

  tiles: {
    
    // listes des objets à placer dans les niveaux


    "*": () => [ // block invisible
      sprite("invisible"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
      invisible(),
      opacity(),
    ],

    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
      coloring(),
      animator(),
    ],
    
    "=": () => [ // block
      sprite("grass"),
      area(),
      body({ isStatic: true }),
      anchor("bot"),
      offscreen({ hide: true }),
    ],

  },

}

Placer les objets

level.js

const LEVELS = [
  
  // liste des niveaux du jeu
  {
    map: `

            *      
       **          
               *** 
         **        
                   
              ***  
         #         
       ***** 
            
    `,
  },
  
];

invisible

levelConf.js
tiles :

invisible({

  invisibleDistance: 240,

  visibleDistance: 60,

  tag:"alive",

}),