用PIXI.JS做連續動圖SpriteShee

Heko

Published in

UniMarket

5 min readDec 26, 2022

SpriteSheet 是一種圖像資源，它包含了多張圖片，並將它們放在一張大圖中。你可以使用 SpriteSheet 來創建連續圖片動畫或者精簡圖像資源的使用。

在 Pixi.js 中，你可以使用 PIXI.Loader 和 PIXI.Spritesheet 來載入和使用 SpriteSheet。

首先，你需要使用 PIXI.Loader 來載入 SpriteSheet 資源：

let loader = new PIXI.Loader();
loader.baseUrl = 'images'; // 引入元素的路徑
loader.add('sheet.json').load(()=> {
  // 之後的code都放在這裡
});

sheet.json是用來記錄每一個影格在圖片上的座標，sheet.json的格式為：

{"frames": {

"anim_1.png":
{
 "frame": {"x":0,"y":0,"w":100,"h":100},
 "rotated": false,
 "trimmed": false,
 "spriteSourceSize": {"x":0,"y":0,"w":100,"h":100},
 "sourceSize": {"w":100,"h":100}
},
"anim_2.png":
{
 "frame": {"x":100,"y":0,"w":100,"h":100},
 "rotated": false,
 "trimmed": false,
 "spriteSourceSize": {"x":0,"y":0,"w":100,"h":100},
 "sourceSize": {"w":100,"h":100}
},
"anim_3.png":
{
 "frame": {"x":200,"y":0,"w":100,"h":100},
 "rotated": false,
 "trimmed": false,
 "spriteSourceSize": {"x":0,"y":0,"w":100,"h":100},
 "sourceSize": {"w":100,"h":100}
}},
"animations": {
 "anim": ["anim_1.png","anim_2.png","anim_3.png"]
},
"meta": {
 "app": "https://www.codeandweb.com/texturepacker",
 "version": "1.0",
 "image": "sheet.png",
 "format": "RGBA8888",
 "size": {"w":300,"h":100},
 "scale": "1",
 "smartupdate": "$TexturePacker:SmartUpdate:66e2f1fae4d3f0dd0c365f1fca1263e5:d5b7792482e00240d11a811c0cce130b:9c44ecd7e9a522007eaff2949095bc1d$"
}
}

這邊順便介紹一工具 TexturePacker可以讓你在製作SpriteSheet時更省力。使用上也很方便，只要把連續圖片按照序號命名好托拉進去並在Framework欄位選擇PixiJS，最後按下Publish sprite sheet就可以匯出成一張Sprite Sheet和一個json檔案。

接著後面就跟之前使用PIXI.AnimatedSprite一樣，製作貼圖格式的陣列並創建一個名為amin 的 AnimatedSprite使用剛才整理好的貼圖格式陣列作為它的紋理：

let textureArray = []; // 貼圖格式的陣列

for (let i = 1; i < 4; i++) {
  let mytexture = PIXI.Texture.from('anim_'+i+'.png'); // 把使用的圖片轉成貼圖格式
  textureArray.push(mytexture);
}

let anim = new PIXI.AnimatedSprite(textureArray);

定義連續動畫的尺寸、位置以及播放速度，播放動畫並添加到舞台上：

// 設置動畫的尺寸
anim.width = 100;
anim.height = 100;

// 設置動畫的中心點置中
anim.anchor.set(0.5)

// 設置動畫的起始位置
anim.x = 0;
anim.y = 0;

// 設置動畫的播放速度
anim.animationSpeed = 0.3;

// 播放動畫
anim.play();

// 將動畫添加到舞台上
app.stage.addChild(anim);

依然可以得到一個連續動圖。

用PIXI.JS做連續動圖SpriteShee

Written by Heko