PixiJS V5 教學 (38) - TexturePacker
前言
通常來講大多遊戲的素材都會將許多圖片放在一張大圖中,然後透過一個工具去生成 json 減少載入次數。
TexturePacker
TexturePacker 是一款專門為了處理遊戲素材而出現的開發工具,下載點在這裡,TexturePacker 拆解後其實是 Texture(材質) + Packer(打包),好處是可以將一整張圖檔幫我們會出一個 json 檔案,省下我們自己計算位子等行為。
下載後我們就可以先打開 TexturePacker (選免費版就好) 然後放置 Play,稍後才會使用
接下來在官方網站這裡有提供一個範例圖檔
從官方網站下載的圖檔可能是 .webp 的副檔名,這邊可以使用這個網站來轉換
我這邊直接提供我拆開好的範例圖檔,這樣子等一下才能夠練習。
匯入圖檔
接下來就是要剛剛的連續圖匯入到 TexturePacker,匯入圖檔得方式是點上方 「Add sprites」
然後匯入範例圖檔
匯入完畢之後其實可以全選整個圖檔,然後按下預覽,你就可以看到圖片會動,我這邊就不展示了。
接下來就是按下發布精靈表即可,但是這邊建議有一個地方要調整一下,就是右側需要選擇框架,由於我們是使用 PixiJS 所以記得改調整這區塊
確定沒問題後就按下發布精靈,此時就會生成精靈表(也就是所謂的雪碧圖)以及 json
接下來其他動作就沒有太大的差異,我這邊就不再多介紹程式碼相關直接附上成果(由於 JSON 檔案沒地方只能貼近去 codepen)
完整程式碼一樣也附在這裡
1 | const app = new PIXI.Application({ |
TexturePacker 中文化
另外 TexturePacker 是有中文化的,只需要點一下上方 「Preferences」,然後底下有一個 「Languge」將它改成 「Chinese」,然後重啟 TexturePacker 就可以囉~