Crée de la brume

Tu veux donner une ambiance caverneuse à ton niveau? Alors rien de tel qu'une bonne brume lugubre des marais.

Tout d'abord crée une nouvelle variable publique dans ton script sketch.js

let mist;

Puis, toujours dans le script view.js va dans la fonction initWindow() et rajoutes-y cette ligne

function initWindow(){
      
  let p = windowRatio(windowWidth,windowHeight);
      
  resizeCanvas(windowWidth, windowHeight);
  view = createGraphics(p.x, p.y ,WEBGL);
  
  light();
  
  mist = createGraphics(100, 100);

}

Ensuite, il nous faut créer une fonction qui génère la brume. Colle celle-ci quelque part dans le script game.js.

function mistDisplay() {
  
  const noiseScale = 0.02 ;
  const opacity = 120 ;
  const opacityBorder = 100 ;
  const detailX = 8 ;
  const detailY = 0.65 ;
  const speed = 0.0025 ; 
  const color = [1,1,1];

  let s = createVector( mist.width , mist.height );

  for (let y = 0 ; y <  s.y ; y ++ ) {
    
    let v = cos( ( y / s.y ) * TWO_PI ) * opacityBorder + opacity ;
    
    for (let x = 0 ; x <  s.x ; x ++) {
      
      let t = ( x + millis() * speed );
      let noiseVal = noise( t * noiseScale, y * noiseScale );
      
      mist.noiseDetail( detailX , detailY );
      mist.stroke( noiseVal  * v * color[0],noiseVal  * v * color[1],noiseVal  * v * color[2]);
      mist.point( x , y );
      
    }
  }
  
  blend(mist,0,0,s.x,s.y,0,0,width,height,SCREEN);
  
}

Parfait. N'hésite pas à changer les valeurs au début de la fonction si tu veux modifier l'effet. Mais avant ça affichons-le à l'écran!

Dans le script game.js trouve la fonction game() et rajoutes-y cette ligne.

function game(){
  
  background(0);
  
  viewDisplay();

  mistDisplay();

  inventoryDisplay();

  if (animation()) playerControl();
  
}