Ajouter une animation

Téléverser un fichier

Répertoireassets/
- Répertoireshaders/
  - …
- Répertoiresounds/
  - …
- Répertoiresprites/
  - atlas.png
- Répertoirestyle/
  - …

Charger le fichier

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

const LEVEL_CONFIG = {
  tileWidth: 64,
  tileHeight: 64,
  backgroundColor: "afe1ff",
  gravity: 3200,
  tiles: {
    "#": () => [ // player 1
      sprite("atlas", {
        width: 64,
        height: 64,
        anim: "idle",
      }),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
      coloring(),
      animator(),
    ],
  },
}

Lancer une animation

function events() {
  return {
    add() {
      // double saut
      on('double jump', 'player', (obj, p) => {
        play('wooosh');
        tween(
          360 * -p.facing,
          0,
          0.3,
          (v) => (obj.angle = v),
          easings.easeOutSine
        );
        obj.play('jump', {
          speed: 4,
          onEnd: () => obj.play('idle'),
        });
      });

      // personnages
      on('respawn', 'alive', (obj) => (obj.flipY = false));
      on('hurt', 'alive', (obj) => {
        play('hit');
        colorShiftFx(obj, { color: 'ff9b9b' });
      });
      on('death', 'alive', (obj) => {
        obj.flipY = true;
        wait(0.2, () => {
          if (!obj.isAlive) {
            obj.hidden = true;
            obj.collisionIgnore = ['*'];
            obj.isStatic = true;
          }
        });
      });

      // joueur
      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) => {
        play('wooosh');
        obj.play('jump', {
          speed: 4,
          onEnd: () => obj.play('idle'),
        });
      });
      on('drop', 'player', (obj) => {
        play('off');
        obj.play('worry');
      });
      on('hurt', 'player', (obj) => {
        obj.play('worry', {
          speed: 2,
          onEnd: () => obj.play('idle'),
        });
      });
    },
  };
}