用PIXI.JS做連續動圖

Heko

Published in

UniMarket

Dec 26, 2022

你可以使用 PIXI.AnimatedSprite 類來創建播放序列圖像的動畫。使用PIXI.AnimatedSprite時，您可以指定要播放的圖像序列，並設置動畫的播放速度。

一樣先引入使用loader來載入想要使用的圖片：

let loader = new PIXI.Loader();
loader.baseUrl = 'images'; // 圖片的路徑
loader
  .add('anim_1.png')
  .add('anim_2.png')
  .add('anim_3.png');

這邊最好使用loader.load來確保圖片完成載入，可以使用以下代碼：

loader.load(()=> {
  // 之後的code都放在這裡
});

PIXI.AnimatedSprite的貼圖是使用一個陣列，所以我們先使用以下的代碼把我們需要使用的連續圖片轉成貼圖格式的陣列：

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

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

接著我們創建一個名為amin 的 AnimatedSprite，並使用剛才整理好的貼圖格式陣列作為它的紋理：

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做連續動圖

Written by Heko