Mouvement alterné

Les plateformes en mouvement permettent d’introduire une dimension de timing dans les déplacements du joueur. Le mouvement alternatif de ces plateformes peut permettent au joueur de pouvoir prédir leur position et de planifier ces mouvements en conséquences. Avec un peu de créativité, l’utilisation des plateformes peut permettre une grande variété de défi pour le joueur.

1. Charger une image

   load.js

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

2. Créer un composant

   component.js

   function movingBackAndForth(p) {
     const param = {
       direction: vec2(1, 0),
       speed: 100,
       switchDelay: 1,
       ...p
     }
     return {
       direction: vec2(param.direction).unit(),
       facing: 1,
       add() {
         this.onCollide("stopper", () => {
           tween(
             this.direction,
             this.direction.scale(-1),
             param.switchDelay,
             (v) => (this.direction = v),
             easings.easeOutSine
           )
           this.trigger("U-turn")
         })
       },
       update() {
         this.move(this.direction.scale(param.speed))
         if (this.direction.len() > 0.1) this.facing = this.direction.unit().x
       },
     }
   }

3. Déclarer un objet

   config.js

   const LEVEL_CONFIG = {
   
     // paramètres du niveau
   
     tileWidth: 64,
     tileHeight: 64,
     backgroundColor: "afe1ff",
     gravity: 3200,
   
     tiles: {
   
       "<": () => [ // plateforme en mouvement <-
         sprite("plate"),
         pos(0, -64),
         movingBackAndForth({ direction: vec2(-1, 0) }),
         body({ isStatic: true }),
         offscreen({ hide: true }),
         area(),
         anchor("top"),
       ],
   
       ">": () => [ // plateforme en mouvement ->
         sprite("plate"),
         pos(0, -64),
         movingBackAndForth({ direction: vec2(1, 0) }),
         body({ isStatic: true }),
         offscreen({ hide: true }),
         area(),
         anchor("top"),
       ],
   
       "^": () => [ // plateforme en mouvement ^
         sprite("plate"),
         pos(0, -64),
         movingBackAndForth({ direction: vec2(0, -1) }),
         body({ isStatic: true }),
         offscreen({ hide: true }),
         area(),
         anchor("top"),
       ],
   
       "v": () => [ // plateforme en mouvement v
         sprite("plate"),
         pos(0, -64),
         movingBackAndForth({ direction: vec2(0, 1) }),
         body({ isStatic: true }),
         offscreen({ hide: true }),
         area(),
         anchor("top"),
       ],
   
       "x": () => [ // stopper
         rect(64, 64),
         opacity(0),
         area(),
         anchor("bot"),
         "stopper"
       ],
   
       "#": () => [ // 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: `
   
   
                   x   < x
                 x         x
   
              #  ^
             ===           v  ===
   
                 x         x
                   x >   x
   
   
       `,
     },
   
   ]

Paramètres

example

config.js

movingBackAndForth({
  direction: vec2(1, 0),
  speed: 100,
  switchDelay: 1
}),

Ressources

• plate.png