É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" ,
  "bean"  ,
]

Créer un composant

component.js

// Ajoutes ici tes propres composants

function swing( amp = 4 , speed = 1 ) {
  
  // balance l'orientation d'un objet
  
  const offset_mult = 0.5 ;
  
  return {
    
    id:"swing",
    require: [ "rotate","sprite" ] ,
    
    update() {
      const k = this.pos.x + this.pos.y ;
      const t = time() * speed + k * offset_mult
      this.angle = wave(-amp,amp,t) 
    },
    
} }

Déclarer un symbole

level.js

const levelConf = {
  
  // paramètres du niveau
  
  tileWidth: 64,
  tileHeight: 64,

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

    "B": () => [ // décoration premier plan
      sprite("bush"), 
      area(), 
      anchor("bot"), 
      swing(),
      offscreen({ hide: true }),
      rotate(),
      scale(1),
      z(1),
      pos(0,0),
    ],
    "b": () => [ // décoration arrière plan
      sprite("bush"), 
      area(), 
      anchor("bot"), 
      swing(),
      offscreen({ hide: true }),
      rotate(),
      scale(1),
      pos(0,0),
      z(-1),
    ],
    "#": () => [ // player
      sprite("bean"),
      platformerController(),
      health(1),
      character(),
      area(),
      anchor("bot"),
      body(),
    ],
    
    "=": () => [ // bloc
      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
  
    [
      " ===       " ,
      "       =   " ,
      "  #  l L l " ,
      "===========" ,
    ],
    
  ];

l'échelle

Le composant scale permet de modifier la taille de l'élément de décor choisi ( 1 pour la taille d'origine ).

scale( 1.3 )

la position horizontale

Le composant pos permet de modifier l'emplacement de l'élément de décor par rapport à sa position dans le niveau en nombre de pixels. Le premier paramètre permet de modifier la position horizontale ( -1 ou moins pour déplacer vers le haut, 1 ou plus pour déplacer vers le bas ).

pos( 0 )

la position verticale

Le composant pos permet de modifier l'emplacement de l'élément de décor par rapport à sa position dans le niveau en nombre de pixels. Le deuxième paramètre permet de modifier la position verticale ( -1ou moins pour déplacer vers la gauche, 1 ou plus pour déplacer vers la droite ).

pos( 0 , 4 )

l'amplutide du mouvement

Le premier paramètre du composant swing permet de régler l'amplitude du mouvement de l'élément de décor. Plus le nombre est élevé plus le mouvement aura d'amplitude.

swing( 4 )

la vitesse du mouvement

Le deuxième paramètre du composant swing permet de régler la vitesse du mouvement de l'élément de décor. Plus le nombre est élevé plus le mouvement sera rapide.

swing( 4 , 1 )

le niveau de superposition

Le composant z permet de régler le niveau de superposition de l'élément de décor ( -1 ou moins par s'afficher derrière le joueur, 1 ou plus par s'afficher devant ). Si plusieurs objets sont sur le même plan, c'est celui qui a été placé le plus bas, puis le plus à droite qui s'affichera devant ( ordre dans lequel ils ont été déclarés dans le niveau ).

z( -1 )