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

Créer un composant

component.js

// Ajoutes ici tes propres composants

function movingCycle( dirX = 1 , dirY = 0 , speed = 100 , dist = 300 ) {
  
  // déplace un objet dans une direction puis réinitialise sa position
  
  const frequence    = 3 
  const switch_delay = 1
  
  let startPos, init , anim , direction = vec2( dirX , dirY ).unit() 
  
  return {
    
    require: [ "sprite" ] ,
    
    init() {
      const gridSize = levelConf.tileHeight
      let v = dist/( this.pos.y / gridSize % frequence + 1)
      if ( direction.x > 0 ) this.flipX = true
      startPos = this.pos
      this.pos = this.pos.add( direction.scale(v) ) ;
      init = true       
    },
    
    update() {
      if (!init) this.init()
      this.move( direction.scale(speed) )
      if (this.pos.dist(startPos)>dist && !anim) this.disappear()
    },
    
    disappear() {
      wait( switch_delay , () => this.appear() ) 
      tween(
        1, -1, switch_delay*2, 
        (p) => this.opacity = Math.abs(p) , 
        easings.easeInOutQuart
      )
      anim = true
    },
    
    appear() {
      this.pos = startPos
      anim = false
    },
    
} }

Déclarer un symbole

level.js

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

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

    "(": () => [ // nuage en mouvement <-
      sprite( "cloud" ) ,
      body( { isStatic: true } ) ,
      area( {scale:vec2(1,0.4) }) ,
      anchor("bot") ,
      movingCycle(-1) ,
      z(1) ,
    ],
    ")": () => [ // nuage en mouvement ->
      sprite( "cloud" , { flipX : true } ) ,
      body( { isStatic: true } ) ,
      area( {scale:vec2(1,0.4) }) ,
      anchor("bot") ,
      movingCycle( 1) ,
      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

const LEVELS = [
  
  // liste des niveaux du jeu

  [
    "            ===" ,
    " )             " ,
    "               " ,
    "             ( " ,
    "               " ,
    " )             " ,
    "               " ,
    "             ( " ,
    "      #        " ,
    "===============" ,
  ],
  
];

la direction horizontale

Le premier paramètre du composant movingCycle permet de choisir la direction horizontale de la plateforme ( -1 pour la gauche, 0 pour garder la même position, 1 pour la droite ).

movingCycle( 0 ),

la direction verticale

Le deuxième paramètre du composant movingCycle permet de choisir la direction verticale de la plateforme ( -1 pour le haut, 0 pour garder la même position, 1 pour le bas ).

movingCycle( 0 , 1 ),

la vitesse de déplacement

Le troisième paramètre du composant movingCycle permet de déterminer la vitesse de déplacement de la plateforme Plus le nombre est élevé, plus la plateforme se déplacera rapidement.

movingCycle( 0, 1 , 100 ),

la distance

Le quatrième paramètre du composant movingCycle permet de déterminer la distance parcourue par la plateforme avant de se réinitialiser. Plus le nombre est élevé, plus la distance à parcourir sera grande.

movingCycle( 0, 1 , 100 , 300 ),

avec un personnage qui vole

Blocs en mouvement qui volent