PixiJS V5 教學 (24) - AnimatedSprite

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
Pixi 是一套很適合製作 2D 動畫的一個框架，那麼又該如何在 Pixi 撰寫動畫呢?

前言

Pixi 是一套很適合製作 2D 動畫的一個框架，那麼又該如何在 Pixi 撰寫動畫呢?

逐格動畫

在官方網站的 範例 我們可以看到 Pixi v5 後就將原本的 new PIXI.extras.AnimatedSprite 改使用 PIXI.AnimatedSprite 這個方法來達到逐格動畫的效果，主要會連續載入幾張圖片

1
let alienImages = ["image_sequence_01.png","image_sequence_02.png","image_sequence_03.png","image_sequence_04.png"];

然後再透過陣列取出來後再使用 PIXI.AnimatedSprite 來處理這些圖片

1
2
3
4
5
6
7
8
9
10
let alienImages = ["image_sequence_01.png","image_sequence_02.png","image_sequence_03.png","image_sequence_04.png"];
let textureArray = [];

for (let i=0; i < 4; i++)
{
  let texture = PIXI.Texture.from(alienImages[i]);
  textureArray.push(texture);
};

let animatedSprite = new PIXI.AnimatedSprite(textureArray);

實作逐格動畫

接下來我們試著實作一下逐格動畫的部分，這邊將會使用先前我在製作 KKBOX OPEN API 的 Hexfoot 吉祥物(疑?!) Logo

連結 (掛掉的話範例也會掛掉)

撰寫方式其實可以複製官方範例修改即可

1
2
3
4
5
6
7
8
9
10
11
function AnimatedHex(status) {
  let alienImages = ["https://i.imgur.com/xAVBpW0.png","https://i.imgur.com/gs9NiFX.png"];
  let textureArray = [];
  for (let i=0; i < alienImages.length; i++)
  {
    let texture = PIXI.Texture.from(alienImages[i]);
    textureArray.push(texture);
  };

  let animatedSprite = new PIXI.AnimatedSprite(textureArray);
}

當放上去之後你可能會發現「圖片呢?怎麼沒看到」或是「圖片沒有動啊？」，那是因為我們缺少了兩行程式碼

1
2
3
4
// 將逐格動畫加入到 container
app.stage.addChild(animatedSprite);
// 播放動畫
animatedSprite.play();

接下來你應該會發現這個逐格動畫跑超快，所以我們可以使用 PIXI.AnimatedSprite 的 animationSpeed 來調整速率

1
animatedSprite.animationSpeed = 0.05;

最後我們還可以做什麼?我們可以搭配 dat.GUI 來調整速率，底下就是調整結果囉

參考文獻