Posted on Leave a comment

[13- 遊戲製作] 素材處理

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

Leave a Reply