iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
3
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 12

[PixiJS - Day-12] PIXI.extras.AnimatedSprite

本篇介紹的是 PIXI.extras.AnimatedSprite 類別


PIXI.extras.AnimatedSprite 是個會動的 Sprite 類別,
可想像成逐格動畫,產生逐格影像的方式:

  • 讀取不同的圖片後組合成連續圖片使用,使用的方法是: PIXI.Texture.fromImage()

  • 讀取一張 sprite 圖片,搭配定義 sprite 圖片影格資訊的 JSON 檔,使用的方法是: PIXI.Texture.fromFrame()
    (類似 CSS Sprite 裡 CSS background-sizebackground-position 的關係)

  • 其他,產生方式參考 PIXI.Texture 說明


PIXI.extras.AnimatedSprite 官方文件:
http://pixijs.download/dev/docs/PIXI.extras.AnimatedSprite.html

文件裡的範例:

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.fromImage(alienImages[i]);
     textureArray.push(texture); // 把素材放進素材陣列裡
};

let mc = new PIXI.AnimatedSprite(textureArray); // 建立 AnimatedSprite 實體

文件上的範例使用不同的圖片檔

一些屬性或方法裡有趣的部分:

預設不會自動 play:
要跑的話要下 play()

playing():
回傳是否正在播放

animationSpeed:
可控制播放速度,預設是 1,可以是小於 1 的小數或負數

gotoAndPlay() 與 gotoAndStop():
從某個影格開始播 / 停在某個影格
註:第一個影格是 0

totalFrames:
回傳共有幾個影格

loop:
預設為 true,執行 play() 後會一直重複播放

onLoop:
重複放時呼叫

onComplete:
loop 設定為 false 且跑到最後一個影格時會呼叫


官方範例有兩個:
BASICS: AnimatedSprite
http://pixijs.io/examples/#/basics/spritesheet.js
alt

DEMOS: AnimatedSprite
http://pixijs.io/examples/#/demos/animatedsprite-demo.js
alt

兩個 Demo 實際上差異不多,需要注意的是:

  • 都先使用 PIXI.loader 讀取 AnimatedSprite 定義的 JSON 檔
PIXI.loader
    .add('spritesheet', 'required/assets/mc.json')
    // mc.json 檔定義了 sprite 圖各個影格的資料
    .load(onAssetsLoaded);
  • 使用的 JSON 檔也差不多,擷取 JSON 檔片段如下:
{"frames": {

"rollSequence0000.png":
{
    "frame": {"x":483,"y":692,"w":169,"h":226},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":3,"y":4,"w":169,"h":226},
    "sourceSize": {"w":175,"h":240}
},
"rollSequence0001.png":
{
    "frame": {"x":468,"y":2,"w":169,"h":226},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":3,"y":4,"w":169,"h":226},
    "sourceSize": {"w":175,"h":240}
}
...
},
"meta": {
    "app": "http://www.texturepacker.com",
    "version": "1.0",
    "image": "fighter.png",
    "format": "RGBA8888",
    "size": {"w":1024,"h":1024},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:2f213a6b451f9f5719773418dfe80ae8$"
}
}

Sprite 圖的部分:
alt
比較兩個 Demo 使用的圖片:

  • 圖片皆排序過(非一長條)
  • 左圖每格的大小不太一樣,右圖則是固定大小,但每個影格都由 JSON 檔定義

手刻也可做出這張圖片與 JSON檔,
範例裡的圖是由 TexturePacker 軟體產生

TexturePacker
alt
官網 http://www.texturepacker.com

有分為 Pro 與 Free 版本可使用

實際使用上覺得相當方便


上一篇
[PixiJS - Day-11] PIXI.Text 與 PIXI.TextStyle
下一篇
[PixiJS - Day-13] PIXI.loaders.Loader
系列文
PixiJS,方便好用的 WebGL 內容產生工具31

尚未有邦友留言

立即登入留言