Blocs en mouvement continu

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

Charger une image

load.js

const PNG = [

  "cloud" ,

  "grass",
]

Créer un composant

component.js

// Ajoutes ici tes propres composants


function movingCycle(p) {
  // permet à un objet de déplacer dans une direction puis de retourner à sa position initiale
  const param = {
    direction: vec2(1, 0),
    speed: 100,
    distance: 300,
    frequence: 3,
    fadeInDelay: 0.6,
    fadeOutDelay: 0.6,
    gridSize: 64,
    ...p
  }
  return {
    require: ["sprite", "opacity", "scale"],
    startPos: null,
    animationStarted: false,
    teleportStarted: false,
    direction: vec2(param.direction).unit(),
    init() {
      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))
      init = true
    },
    update() {
      this.move(this.direction.scale(param.speed))
      if (this.teleportStarted) {
        this.teleportStarted = false
        this.pos = this.startPos
        this.scaleTo(1);
      }
      if (!this.startPos) {
        this.startPos = this.pos
        this.init()
      }
      if (this.pos.dist(this.startPos) > param.distance && !this.animationStarted) {
        this.fadeOut(param.fadeOutDelay)
        this.animationStarted = true
        wait(param.fadeOutDelay, () => {
          this.opacity = 1
          this.fadeIn(param.fadeInDelay)
          this.animationStarted = false
          this.teleportStarted = true
          this.scaleTo(0);
        })
      }
    },
  }
}

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


    "(": () => [ // 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
      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

const LEVELS = [
  
  // liste des niveaux du jeu

  {
    map: `

                 ===
       )             
                     
                   ( 
                     
       )             
                     
                   ( 
            #        
      ===============
      
    `,
  },
  
];

movingCycle

levelConf.js
tiles :

movingCycle({

  direction: vec2(1, 0),

  speed: 100,

  distance: 300,

  frequence: 3,

  fadeInDelay: 0.6,

  fadeOutDelay: 0.6,

  gridSize: 64,

}),