Animations

pour Andy

Les animations peuvent permettre au jeu d'avoir un rendu plus dynamique, ils peuvent aussi aider le joueur à interpréter les différents comportements du personnage.

Charger une image

load.js

function loadAssets(){
  
  for ( const s of PNG ) loadSprite( s , "assets/sprites/"+s+".png" )
  for ( const s of JPG ) loadSprite( s , "assets/sprites/"+s+".jpg" )
  for ( const s of MP3 ) loadSound ( s , "assets/sounds/" +s+".mp3" )
  for ( const s of WAV ) loadSound ( s , "assets/sounds/" +s+".wav" )
  
  loadSpriteAtlas( "assets/sprites/bean-atlas.png" , {
      "bean-atlas": {
          x: 0, y: 0,
          width: 244, height: 53,
          sliceX: 4,
          anims: {
            run:   0,
            sleep: 1,
            jump:  2,
            worry: 3,
          },
      },
    }) ;

  loadSpriteAtlas( "assets/sprites/splash.png" , {
    "splash": {
        x: 0, y: 0,
        width: 384, height: 64,
        sliceX: 6,
        anims: { explode: { from: 0, to: 5 ,}, },
    },
  })
  
}

Créer un nouveau composant

component.js


function animator( ) {
  
  // permet d'animer le personnage
  
  const sleep_anim_delay   = 2
  const fall_anim_delay    = 0.4
  const hurt_anim_duration = 0.4
  
  let lastDist = 0 , lastGround = 0 , lastMove = 0
  let hurt = false 
  
  return {
    
    add() {  
      this.on( "hurt" , () => this.ouch() )
    },
    
    ouch() {
      hurt = true 
      wait( hurt_anim_duration , () => hurt = false )
    },
    
    update() {  
      
      if ( this.isJumping() || this.onLadder || lastDist!=this.distance) lastMove   = time()
      if ( this.isJumping() || this.isGrounded() || this.onLadder )      lastGround = time()
      
      const idle = this.isItYet( lastMove   , sleep_anim_delay )
      const slip = this.isItYet( lastGround , fall_anim_delay  )
      
      if      ( slip || hurt )     this.play( "worry" )
      else if ( this.isJumping() ) this.play( "jump"  )
      else if ( idle )             this.play( "sleep" )
      else                         this.play( "run"   )
      
      lastDist = this.distance
      
    },
    
    isItYet(t,d){ return time() - t > d }
    
} }

Changer l'image

level.js

"#": () => [ // player

  sprite("bean"),

  sprite("bean-atlas"),

  platformerController(),
  health(1),
  character(),
  area(),
  anchor("bot"),
  body(),
],

Modifier un symbole

level.js
levelConf

"#": () => [ // player

  animator(),

  sprite("bean-atlas"),
  platformerController(),
  health(1),
  character(),
  area(),
  anchor("bot"),
  body(),
],