Ajouter une feuille de sprite

Ressources

• sprite-atlas.psd

Téléverser un fichier

• Répertoireassets/

  • Répertoireshaders/

    • …
  • Répertoiresounds/

    • …
  • Répertoiresprites/

    • sprite-atlas.png
  • Répertoirestyle/

    • …

Configurer la feuille de sprite

load.js

loadSpriteAtlas("assets/sprites/sprite-sheet.png", {
    bean: {
      x: 0,
      y: 0,
      width: 244,
      height: 53,
      sliceX: 4,
      anims: {
        idle: { from: 0, to: 0 },
        run: { from: 0, to: 0 },
        sleep: { from: 1, to: 1 },
        jump: { from: 2, to: 2 },
        worry: { from: 3, to: 3 },
      },
    },
    bird: {
      x: 256,
      y: 0,
      width: 610,
      height: 53,
      sliceX: 5,
      anims: {
        idle: { from: 0, to: 0 },
        run: { from: 0, to: 0 },
        sleep: { from: 4, to: 4 },
        jump: { from: 1, to: 1 },
        fly: { from: 1, to: 2 },
        worry: { from: 3, to: 3 },
      },
    },
    clementine: {
      x: 864,
      y: 0,
      width: 244,
      height: 53,
      sliceX: 4,
      anims: {
        idle: { from: 0, to: 0 },
        run: { from: 0, to: 0 },
        sleep: { from: 1, to: 1 },
        jump: { from: 2, to: 2 },
        worry: { from: 3, to: 3 },
      },
    },
    splash: {
      x: 896,
      y: 64,
      width: 384,
      height: 64,
      sliceX: 6,
      anims: { explode: { from: 0, to: 5, speed: 30 } },
    },
    prune: {
      x: 1120,
      y: 0,
      width: 244,
      height: 53,
      sliceX: 4,
      anims: {
        idle: { from: 0, to: 0 },
        run: { from: 0, to: 0 },
        sleep: { from: 1, to: 1 },
        jump: { from: 2, to: 2 },
        worry: { from: 3, to: 3 },
      },
    },
    apple: { x: 0, y: 64, width: 50, height: 52 },
    ball: { x: 192, y: 64, width: 28, height: 28 },
    "cross-cursor": { x: 192, y: 96, width: 26, height: 26 },
    bullet: { x: 224, y: 64, width: 28, height: 28 },
    btfly: { x: 256, y: 64, width: 58, height: 47 },
    cloud: { x: 320, y: 64, width: 64, height: 39 },
    coin: { x: 384, y: 64, width: 27, height: 34 },
    door: { x: 416, y: 64, width: 64, height: 64 },
    ghosty: { x: 480, y: 64, width: 52, height: 60 },
    grape: { x: 542, y: 64, width: 37, height: 53 },
    gun: { x: 608, y: 64, width: 43, height: 27 },
    key: { x: 608, y: 96, width: 56, height: 30 },
    kat: { x: 672, y: 64, width: 61, height: 58 },
    ladder: { x: 736, y: 64, width: 63, height: 64 },
    marroc: { x: 800, y: 64, width: 73, height: 54 },
    grass: { x: 0, y: 128, width: 64, height: 64 },
    invisible: { x: 0, y: 192, width: 64, height: 64 },
    sand: { x: 64, y: 128, width: 64, height: 64 },
    snowy: { x: 64, y: 192, width: 64, height: 64 },
    steel: { x: 128, y: 128, width: 64, height: 64 },
    sticky: { x: 128, y: 192, width: 64, height: 64 },
    stone: { x: 192, y: 128, width: 64, height: 64 },
    icy: { x: 192, y: 192, width: 64, height: 64 },
    bush: { x: 256, y: 128, width: 95, height: 114 },
    flag: { x: 352, y: 128, width: 52, height: 73 },
    "large-plate": { x: 416, y: 128, width: 192, height: 30 },
    plate: { x: 416, y: 160, width: 117, height: 30 },
    pineapple: { x: 416, y: 192, width: 33, height: 49 },
    turnip: { x: 544, y: 160, width: 61, height: 73 },
    portal: { x: 608, y: 128, width: 50, height: 58 },
    spike: { x: 672, y: 128, width: 64, height: 21 },
    radish: { x: 672, y: 160, width: 61, height: 73 },
    mushroom: { x: 736, y: 128, width: 51, height: 49 },
    locker: { x: 736, y: 160, width: 32, height: 33 },
    paper: { x: 800, y: 128, width: 54, height: 57 },
    sun: { x: 864, y: 128, width: 58, height: 54 },
    sword: { x: 928, y: 128, width: 29, height: 61 },
    watermelon: { x: 1152, y: 128, width: 60, height: 35 },
  });