精靈表單

現在您了解精靈基礎，是時候來說明建立他們的更好方法了 - 精靈表單 類別。

精靈表單是一種媒體格式，用於更有效地下載和呈現精靈。雖然建立和使用起來有點複雜，但它們是優化專案的關鍵工具。

精靈表單的結構

精靈表單的基本概念是將一系列影像打包在一起，追蹤每個來源影像結束的位置，並使用結合的影像作為共用 BaseTexture，以產生精靈。

第一步是收集您要組合的影像。然後，精靈打包器會收集影像並建立一個新的結合影像。

在建立這個影像時，建立工具會追蹤每個來源影像儲存位置的矩形，接著寫出包含此資訊的 JSON 檔案。

將這兩個檔案傳給 SpriteSheet 建構函數後，SpriteSheet 物件會解析 JSON 檔案，並產生一系列 Texture 物件，每個來源影像一個，設定每個影像的來源矩形，根據 JSON 資料。每個材質使用相同的共用 BaseTexture 作為來源。

雙重效率

精靈表單用兩種方法幫助您的專案。

首先，透過加速載入流程。下載精靈表單的材質雖然需要移動相同（甚至略多）的位元組數，但他們會分組成單一檔案。這表示使用者的瀏覽器可以要求和下載遠少於相同數量的精靈檔案。檔案數目本身是下載速度的關鍵驅動力，因為每個要求需要往返網路伺服器，而瀏覽器在同時可下載的檔案數量方面有限。將專案從個別來源影像轉換為共用精靈表單可以將您的下載時間減半，而且品質不會降低。

其次，透過改善批次渲染。WebGL 渲染速度大約與繪製呼叫數量成比例。將多重精靈等批次處理成單一繪製呼叫是 PixiJS 能執行這麼快的秘密。最大化批次處理是一個複雜的主題，但當多個精靈共用一個共通 BaseTexture 時，會更可能將他們批次處理在一起，並在單一呼叫中渲染。

建立精靈表單

您可以使用第三方工具組裝精靈表單檔案。以下是兩個符合您需求的工具

ShoeBox：ShoeBox 是一個免費的 Adobe AIR 驅動的精靈打包實用程式，非常適合小專案或學習精靈圖集運作方式。

TexturePacker：TexturePacker 是更精良的工具，支援進階功能和工作流程。免費版本中具備所有為 PixiJS 打包精靈圖集所需的功能。它非常適合較大型專案、專業遊戲開發或需要更複雜磁磚對應功能的專案。

精靈圖集資料也可以手動或以程式方式建立，並提供給新的 AnimatedSprite。如果精靈已經包含在單一影像中，這可能會是較容易的選項。

// Create object to store sprite sheet data
const atlasData = {
    frames: {
        enemy1: {
            frame: { x: 0, y:0, w:32, h:32 },
            sourceSize: { w: 32, h: 32 },
            spriteSourceSize: { x: 0, y: 0, w: 32, h: 32 }
        },
        enemy2: {
            frame: { x: 32, y:0, w:32, h:32 },
            sourceSize: { w: 32, h: 32 },
            spriteSourceSize: { x: 0, y: 0, w: 32, h: 32 }
        },
    },
    meta: {
        image: 'images/spritesheet.png',
        format: 'RGBA8888',
        size: { w: 128, h: 32 },
        scale: 1
    },
    animations: {
        enemy: ['enemy1','enemy2'] //array of frames by name
    }
}


// Create the SpriteSheet from data and image
const spritesheet = new Spritesheet(
    Texture.from(atlasData.meta.image),
    atlasData
);

// Generate all the Textures asynchronously
await spritesheet.parse();

// spritesheet is ready to use!
const anim = new AnimatedSprite(spritesheet.animations.enemy);

// set the animation speed
anim.animationSpeed = 0.1666;
// play the animation on a loop
anim.play();
// add it to the stage to render
app.stage.addChild(anim);