PixiJS能使用的素材

承上一篇文章，我們排好的UI介面，其最終的產出是一個fla檔案，但是這樣的檔案pixiJS是無法使用的。
因此我們必需要整理素材並匯出pixiJS可以使用的素材。

那麼，pixiJS可以使用那些素材呢？最基本的是單張的圖檔，但是因為HTTP/1.1在載入檔案是每個檔案都需額外處理request和response header，會讓下載的速度變慢。並且GPU在處理圖檔上，因GPU擅長矩陣處理，而同一張圖去做截取亦為一種矩陣處理，可以使用到GPU加速的優勢。因此在製作遊戲時，我們偏好使用SpriteSheet。SpriteSheet指的是很多張圖檔被整併到一大張圖檔裡。

如下圖這個動畫：

是由10張圖所構成的，那麼SpriteSheet會將這10張圖打包成一個png檔案。

並會產生一個json檔案，來設定每一個畫面要截取的範圍，其檔案內容如下：

{"frames": {
"0":
{
	"frame": {"x":0,"y":0,"w":109,"h":74},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":1,"y":0,"w":110,"h":74},
	"sourceSize": {"w":110,"h":74}
}
//...
"meta": {
	"app": "Adobe Animate",
	"version": "15.1.1.13",
	"image": "Character_Laugh.png",
	"format": "RGBA8888",
	"size": {"w":256,"h":512},
	"scale": "1"
}
}

在json裡的”0″，是代表這張圖片的id，之後我們要在pixi去取某個spritesheet的某一張圖，會需要使用到這個id來辨視我們要取的圖。在adobe animate裡，動畫的id他會自動幫我們從0~N這樣以流水號編下去。

另外，在pixiJS裡，某些設備沒辦法處理比4096更大的圖片。
有關於這部份的瀏覽器支援，請見：WebGL Stats

由上圖可看出現在尚有許多設備無法支援4096以上的尺寸的圖檔，這點在包圖時要注意一下

除了以上單張圖檔和SpriteSheet之外，PixiJS還可以使用spine的圖檔，不過由於spine的圖檔編輯軟體要價不斐，因此這次的小作品就先跳過了！

從Adobe Animate匯出動畫連續圖

要從Adobe Animate匯出圖檔，首先要先打開元件庫，然後點擊該動畫元件，按下右鍵，最下方會有一個Generate Sprite Sheet。

接著會跳出一個設定頁面，我們選擇Algorithm為Basic，Data format為JSON，然後按下Export就可以了。

從Adobe Animate匯出圖片集

如果要匯出多個圖檔至一個圖片集，則在元件庫先整理過元件的名稱，預設adobe animate會以元件庫的名稱做為在json內的識別id。
接著一次選擇多個要匯出的圖檔，點右鍵，選擇Generate Sprite Sheet

左邊可以看到將要輸出的sprite sheet裡會有那些圖檔，圖檔的id為何，選項的部份與動畫匯出相同。

音效下載

我是在這邊尋找適合的音效：小森平的免費下載音效

最後打包好的素材集

請按此下載：assets