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

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.AnimatedSpriteanimationSpeed 來調整速率

1
animatedSprite.animationSpeed = 0.05;

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

參考文獻

0%