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. Créer un composant

   component.js

   function movingCycle(p) {
     const param = {
       direction: vec2(1, 0),
       speed: 100,
       distance: 300,
       frequence: 3,
       fadeInDelay: 0.6,
       fadeOutDelay: 0.6,
       respawnDelay: 0.2,
       gridSize: 64,
       ...p
     }
     return {
       require: ["sprite", "opacity"],
       startPos: null,
       endCycle: false,
       direction: vec2(param.direction).unit(),
       add() {
         requestAnimationFrame(() => {
           this.startPos = this.pos
           let v = param.distance / (((this.pos.y / param.gridSize) % param.frequence) + 1)
           if (this.direction.x > 0) this.flipX = true
           this.pos = this.pos.add(this.direction.scale(v))
         })
         this.on("respawn", () => {
           this.collisionIgnore = this.collisionIgnore.filter(function (e) { return e != "body" })
         })
       },
       update() {
         this.move(this.direction.scale(param.speed))
         if (this.pos.dist(this.startPos) > param.distance && !this.endCycle) {
           this.fadeOut(param.fadeOutDelay)
           this.endCycle = true
           wait(param.fadeOutDelay, () => {
             this.collisionIgnore.push("body")
             wait(param.respawnDelay, () => {
               this.opacity = 1
               this.fadeIn(param.fadeInDelay)
               this.pos = this.startPos
               this.endCycle = false
               this.collisionIgnore = this.collisionIgnore.filter(function (e) { return e != "body" })
             })
           })
         }
       },
     }
   }

3. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "(": () => [ // 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(),
         alive(),
         opacity(),
         scale(),
         health(1, 4),
         area(),
         anchor("bot"),
         body(),
         respawn(),
         falling(),
       ],
   
       "=": () => [ // block
         sprite("grass"),
         area(),
         body({ isStatic: true }),
         anchor("bot"),
         offscreen({ hide: true }),
       ],
   
     },
   }

4. Placer les objets

   level.js

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

Paramètres

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