PixiJS V5 教學 (38) - TexturePacker

前言

通常來講大多遊戲的素材都會將許多圖片放在一張大圖中，然後透過一個工具去生成 json 減少載入次數。

TexturePacker

TexturePacker 是一款專門為了處理遊戲素材而出現的開發工具，下載點在這裡，TexturePacker 拆解後其實是 Texture(材質) + Packer(打包)，好處是可以將一整張圖檔幫我們會出一個 json 檔案，省下我們自己計算位子等行為。

下載後我們就可以先打開 TexturePacker (選免費版就好) 然後放置 Play，稍後才會使用

接下來在官方網站這裡有提供一個範例圖檔

從官方網站下載的圖檔可能是 .webp 的副檔名，這邊可以使用這個網站來轉換

我這邊直接提供我拆開好的範例圖檔，這樣子等一下才能夠練習。

匯入圖檔

接下來就是要剛剛的連續圖匯入到 TexturePacker，匯入圖檔得方式是點上方 「Add sprites」

然後匯入範例圖檔

匯入完畢之後其實可以全選整個圖檔，然後按下預覽，你就可以看到圖片會動，我這邊就不展示了。

接下來就是按下發布精靈表即可，但是這邊建議有一個地方要調整一下，就是右側需要選擇框架，由於我們是使用 PixiJS 所以記得改調整這區塊

確定沒問題後就按下發布精靈，此時就會生成精靈表（也就是所謂的雪碧圖）以及 json

接下來其他動作就沒有太大的差異，我這邊就不再多介紹程式碼相關直接附上成果(由於 JSON 檔案沒地方只能貼近去 codepen)

完整程式碼一樣也附在這裡

const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 512,
  height: 512,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

const animals = {
  ... // JSON 太長所以忽略
}

const loader = new PIXI.Loader();
loader
  .add('run',animals.meta.image)
  .load((loader, resource)=> {
  init(resource);
})

function init(resource) {
  const gameImg = resource;
  const textureArray = [];
  for(let i in animals.frames) {
    let frame = animals.frames[i].frame;
    let rectangle = new PIXI.Rectangle(frame.x, frame.y, frame.w, frame.h);
    let Newtexture = new PIXI.Texture(gameImg.run.texture, rectangle);
    // const sprite = new PIXI.Sprite(Newtexture);
    textureArray.push(Newtexture);
  }
  let animatedSprite = new PIXI.AnimatedSprite(textureArray);
  app.stage.addChild(animatedSprite);
  // 控制播放速度
  animatedSprite.animationSpeed = 0.2;
  animatedSprite.play();
}

TexturePacker 中文化

另外 TexturePacker 是有中文化的，只需要點一下上方 「Preferences」，然後底下有一個 「Languge」將它改成 「Chinese」，然後重啟 TexturePacker 就可以囉~

參考文獻

• TexturePacker
• 教你使用TexturePacker工具对素材打包