Spritesheet PRG04 2021 - 2022

Uitgewerkte code

Een spritesheet is een enkele afbeelding waarin alle frames van een animatie zitten.

DEMO

Om spritesheets in te lezen gebruik je een JSON file waarin staat welke bronafbeelding je gebruikt en waar de frames zich precies bevinden in die afbeelding.

{
  "frames": {
    "Explosion_Sequence_A 1.png": {
      "frame": {
        "x": 244,
        "y": 1454,
        "w": 240,
        "h": 240
      }
    },
    "Explosion_Sequence_A 2.png": {
      "frame": {
        "x": 244,
        "y": 970,
        "w": 240,
        "h": 240
      }
    }
  },
  "meta": {
    "image": "explosion.png"
  }
}

Je kan de Texture Packer software gebruiken om van je losse afbeeldingen een spritesheet met JSON file te maken.

Als je al een plaatje hebt waar alle sprites in één PNG file staan, maar je hebt geen JSON file, dan zal je deze eerst weer uit elkaar moeten halen. Anders kan Texture Packer de JSON file niet genereren. Je kan met Photoshop Auto Slice snel een PNG onderverdelen in losse afbeeldingen.

Spritesheets zijn niet alleen handig voor animaties. Je kan het ook gebruiken om alle afbeeldingen uit je game in één enkele PNG file op te slaan. Dit is meer efficiënt qua geheugen van je grafische kaart.

Inladen Spritesheet

De PixiJS Loader heeft een speciale functie die herkent dat je een spritesheet JSON file inlaadt. Je hoeft niet zelf de PNG file in te laden. De loader gaat automatisch textures uitknippen uit de PNG file.

class Game {
  explosionTextures: PIXI.Texture[] = [];

  constructor() {
    this.pixi.loader.add("spritesheet", "explosion.json");
    this.pixi.loader.load(() => this.doneLoading());
  }

  doneLoading() {
    // frames opslaan in een array
    for (let i = 0; i < 26; i++) {
      const texture = PIXI.Texture.from(`Explosion_Sequence_A ${i + 1}.png`);
      this.explosionTextures.push(texture);
    }
  }
}

De animatie tonen

Omdat we de textures in een array hebben opgeslagen, kan je op elk gewenst moment een animatie aanmaken met die textures!

class Game {
  createExplosion() {
    const kaboom = new PIXI.AnimatedSprite(this.explosionTextures);
    kaboom.x = 100;
    kaboom.y = 100;
    kaboom.anchor.set(0.5);
    kaboom.play();
    this.pixi.stage.addChild(kaboom);
  }
}

Meerdere animaties in 1 spritesheet

Op basis van de spritesheet kan je meerdere arrays aanmaken waar de verschillende animaties inzitten.

Game.ts

createCatFrames() {
    // create an array of textures from an image path
    let idleAnimation: PIXI.Texture[] = []
    let jumpAnimation: PIXI.Texture[] = []
    for (let i = 1; i <= 10; i++) {
        // frame 1 tot en met 10 is de idle animation
        idleAnimation.push(PIXI.Texture.from(`poes_${i}.png`))
    }
    for (let i = 11; i <= 30; i++) {
        // frame 11 tot en met 30 is de jump animation
        jumpAnimation.push(PIXI.Texture.from(`poes_${i}.png`))
    }
}

JumpCat.ts

Alle array's (met alle animaties) geef je aan de kat. En de idleAnimation geef je aan de super(). Dit is dan de startanimatie.

class JumpCat extends PIXI.AnimatedSprite {
  constructor(idleAnimation: PIXI.Texture[], jumpAnimation: PIXI.Texture[]) {
    super(idleAnimation)
  }
}

let myJumpingCat = new JumpCat(idleAnimation, jumpAnimation)

Na een bepaalde actie kan je dan de animatie frames wisselen via this.textures = ...:

class JumpCat extends PIXI.AnimatedSprite {

  idleAnimation:PIXI.Texture[]
  jumpAnimation:PIXI.Texture[]

  constructor(idleAnimation: PIXI.Texture[], jumpAnimation: PIXI.Texture[]) {
    super(idleAnimation)
    
    this.idleAnimation = idleAnimation
    this.jumpAnimation = jumpAnimation
  }
  
  // als je springt, verander je de frames voor de animatie
  jump(){
    this.textures = jumpAnimation
    this.play()
  }
}

💀 Live server

De pixi loader werkt niet samen met het import statement voor JSON files. Ook is het niet handig dat je live server steeds een andere bestandsnaam aan je spritesheet geeft. Om dit op te lossen gebruiken we een static map in het project. Deze map staat buiten de src map.

Je kan deze statische bestanden telkens handmatig in je docs map zetten als je je game wil publiceren. Hier is echter ook een plugin voor:

npm install parcel-reporter-static-files-copy -D

Om de plugin te activeren maak je een .parcelrc bestand, daarin staat:

{
  "extends": ["@parcel/config-default"],
  "reporters": ["...", "parcel-reporter-static-files-copy"]
}

Completed code

https://github.com/HR-CMGT/PRG04-pixi-spritesheet-completed

Links

• ANIMATED DRAWINGS: Leuke tool om van een tekening een animatie te maken.
• PixiJS Explosion Example
• Voorbeeldproject met Object Oriented Explosion en .parcelrc bestand
• Texture Packer
• Spritesheet files voor Link en Explosion
• Static folder copy plugin