PixiJS V5 教學 (24) - AnimatedSprite

前言

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 來處理這些圖片

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

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

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

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);
}

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

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

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

1	`animatedSprite.animationSpeed = 0.05;`

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

PixiJS V5 教學 (24) - AnimatedSprite

前言

逐格動畫

實作逐格動畫

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

逐格動畫

實作逐格動畫

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

PixiJS V5 教學 (39) - 音樂

PixiJS V5 教學 (38) - TexturePacker

PixiJS V5 教學 (37) - 加入 stats.js

分享這篇文章

留言