Mouvement continu

Léomyl

Les plateformes en mouvement permettent d’introduire une dimension de timing dans les déplacements du joueur. Le mouvement continu de ces plateformes leur permet de pouvoir être utilisées comme un moyen de déplacement pour le joueur ou comme un obstacle. La disparition de ces plateformes au bout d’un certain délai peut aussi permettre de susciter chez le joueur un sentiment d’urgence.

1. Charger une image

   load.js

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

2. Déclarer un objet

   config.js

   const TILE_CONFIG = {
   
     "(": () => [ // nuage en mouvement <-
       sprite("cloud"),
       body({ isStatic: true }),
       area({ scale: vec2(1, 0.4) }),
       offscreen({ hide: true }),
       anchor("bot"),
       movingCycle({ direction: vec2(-1, 0) }),
       opacity(),
       scale(),
       z(1),
     ],
   
     ")": () => [ // nuage en mouvement ->
       sprite("cloud", { flipX: true }),
       body({ isStatic: true }),
       area({ scale: vec2(1, 0.4) }),
       offscreen({ hide: true }),
       anchor("bot"),
       movingCycle({ direction: vec2(1, 0) }),
       opacity(),
       scale(),
       z(1),
     ],
   
     "#": () => [ // player 1
       sprite("bean"),
       platformerController(),
       jumpController(),
       sleep(),
       alive(),
       opacity(),
       scale(),
       health(1, 4),
       area(),
       body(),
       respawn(),
       falling(),
       rotate(),
       pos(0, -20),
       anchor("center"),
     ],
   
     "=": () => [ // block
       sprite("grass"),
       area({ collisionIgnore: ["agent"] }),
       body({ isStatic: true }),
       anchor("bot"),
       offscreen({ hide: true }),
       tile({ isObstacle: true }),
     ],
   
   }

3. Placer les objets

   level.js

   const LEVELS = [
   
     {
       map: `
   
                     ===
           )
   
                       (
   
           )
   
                       (
               #
               ===
   
       `,
     },
   
   ]

Paramètres

movingCycle()

example

config.js

movingCycle({
  direction: vec2(1, 0),
  speed: 100,
  distance: 300,
  frequence: 3,
  fadeInDelay: 0.6,
  fadeOutDelay: 0.6,
  respawnDelay: 0.2,
  gridSize: 64
}),

Ressources

• cloud.png