Ajouter une feuille de sprite

Téléverser un fichier

• Répertoireassets/

  • Répertoireshaders/

    • …
  • Répertoiresounds/

    • …
  • Répertoiresprites/

    • atlas.png
  • Répertoirestyle/

    • …

Charger le fichier

load.js

function loadAtlas(){

  loadSpriteAtlas("assets/sprites/atlas.png", {
    "atlas": {
      x: 0, // position de départ horizontale
      y: 0, // position de départ verticale
      width: 144, // taille horizontale de l'atas
      height: 28, // taille verticale de l'atas
      sliceX: 9, // nombre de colonne dans l'atlas
      sliceY: 9, // nombre de lignes dans l'atlas
      anims: {
        idle: 0, // index de la sprite dans l'atlas
        run: {
          from: 1, // premier index de l'animation
          to: 3 , // dernier index de l'animation
          speed: 10, // vittess de l'animation
          loop: true, // animation en boucle
        },
      },
    },
  })

}

Utiliser l’image

config.js

const LEVEL_CONFIG = {

  tileWidth: 64,
  tileHeight: 64,
  backgroundColor: "afe1ff",
  gravity: 3200,
  tiles: {

    "#": () => [ // player 1
      sprite("atlas", {
        width: 64,
        height: 64,
      }),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
      coloring(),
      animator(),
    ],

  },
}

Lancer une animation

game.js

scene("game", () => {

  const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config }
  const map = LEVELS[CURRENT_LEVEL].map.split("\n")
  const level = addLevel(map, config)

  add([
    multiplayerCamera(),
  ])
  setGravity(config.gravity)
  setBackground(config.backgroundColor)

  // lasting animation
  on('eventName', 'objectTag', (obj) => obj.play('lastingAnimation'))
  // short animation
  on('eventName', 'objectTag', (obj) => obj.play('animation', {
    speed: 4, onEnd: () => obj.play('initialAnimation')
  })
  on('jump', 'player', () => play('wooosh'))
  on('drop', 'player', () => play('off'))
  on('respawn', 'player', (obj) => obj.play('idle'))
  on('sleep', 'player', (obj) => obj.play('sleep'))
  on('awake', 'player', (obj) => obj.play('idle'))
  on('jump', 'player', (obj) => obj.play('jump', { speed: 4, onEnd: () => obj.play('idle') }))
  on('drop', 'player', (obj) => obj.play('worry'))

}