Éléments de décor

pour 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.

Charger une image

load.js

const PNG = [

  "bush" ,

  "grass" ,
]

Créer un composant

component.js

// Ajoutes ici tes propres composants

function swing(p) {
  // permet à un objet de se balancer de gaiche à droite
  const param = {
    amplitude: 4,
    speed: 1,
    ...p
  }
  const offset_mult = 0.5
  return {
    id: "swing",
    require: ["rotate", "sprite"],
    update() {
      const k = this.pos.x + this.pos.y
      const t = time() * param.speed + k * offset_mult
      this.angle = wave(-param.amplitude, param.amplitude, t)
    },
  }
}

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

    "B": () => [ // décoration premier plan
      sprite("bush"),
      area(),
      anchor("bot"),
      swing(),
      offscreen({ hide: true }),
      rotate(),
      scale(1.25),
      z(1),
    ],
    "b": () => [ // décoration arrière plan
      sprite("bush"),
      area(),
      anchor("bot"),
      swing(),
      offscreen({ hide: true }),
      rotate(),
      scale(1),
      z(-1),
    ],
    "#": () => [ // 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

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

         ===       
              =   
          #  b B b 
        ===========

      `,
    }
    
  ];

scale

scale( 1.3 )

swing

levelConf.js
tiles :
swing({

  amplitude: 4,

  speed: 1,

}),