Sprite

在電腦圖學中，Sprite 泛指遊戲場景中所有的二維的圖像，例如：角色、敵人、道具等等，如果我們一一將這些圖用 Image 的方式加載近來，遊戲會花非常多時間在讀取，因為 Sprite 的數量實在太多了。由於這些圖像通常都不大，我們可以將這些圖像集合起來，成為一張大圖，減少讀取的次數，而這張圖就被稱作 Sprite sheet。

在 Corona SDK 中，Image 與 Sprite 函式庫都支持從 Sprite sheet 中抽取單張圖像並顯示出來的功能。不同的是，Sprite 函式庫除了支持顯示靜態圖片，還包含了動畫的處理。舉例來說，一張 Sprite sheet 內包含角色所有走路的 Sprite，使用 Sprite 函式庫可以將這些圖從 Sprite 抽取出來，變成一個連續的動畫。

為了要從 Sprite sheet 抽取圖像，我們必須要先有 Sprite sheet 的定義檔。定義檔必須明確的表示每個 Sprite 在 Sprite sheet 中的位置，以下範例中即定義了每個走路動畫影格在 Sprite sheet 中的位置：

local SheetInfo = {}

SheetInfo.sheet =
{
    frames = {

        {
            -- p1_walk01
            x=369,
            y=1,
            width=68,
            height=95,

            sourceX = 4,
            sourceY = 0,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk02
            x=439,
            y=1,
            width=68,
            height=95,

            sourceX = 4,
            sourceY = 0,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk03
            x=579,
            y=1,
            width=72,
            height=93,

            sourceX = 0,
            sourceY = 0,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk04
            x=1,
            y=1,
            width=72,
            height=95,

            sourceX = 0,
            sourceY = 0,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk05
            x=75,
            y=1,
            width=72,
            height=95,

            sourceX = 0,
            sourceY = 1,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk06
            x=149,
            y=1,
            width=72,
            height=95,

            sourceX = 0,
            sourceY = 2,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk07
            x=223,
            y=1,
            width=72,
            height=95,

            sourceX = 0,
            sourceY = 2,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk08
            x=653,
            y=1,
            width=68,
            height=93,

            sourceX = 2,
            sourceY = 4,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk09
            x=723,
            y=1,
            width=68,
            height=93,

            sourceX = 2,
            sourceY = 4,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk10
            x=297,
            y=1,
            width=70,
            height=95,

            sourceX = 1,
            sourceY = 2,
            sourceWidth = 72,
            sourceHeight = 97
        },
        {
            -- p1_walk11
            x=509,
            y=1,
            width=68,
            height=95,

            sourceX = 3,
            sourceY = 1,
            sourceWidth = 72,
            sourceHeight = 97
        },
    },

    sheetContentWidth = 792,
    sheetContentHeight = 97
}

SheetInfo.frameIndex =
{

    ["p1_walk01"] = 1,
    ["p1_walk02"] = 2,
    ["p1_walk03"] = 3,
    ["p1_walk04"] = 4,
    ["p1_walk05"] = 5,
    ["p1_walk06"] = 6,
    ["p1_walk07"] = 7,
    ["p1_walk08"] = 8,
    ["p1_walk09"] = 9,
    ["p1_walk10"] = 10,
    ["p1_walk11"] = 11,
}

function SheetInfo:getSheet()
    return self.sheet;
end

function SheetInfo:getFrameIndex(name)
    return self.frameIndex[name];
end

return SheetInfo

為了方便程式碼的維護，這邊建議讀者讓每個 Sprite sheet 都有自己的定義檔，而不是將他們都寫在同一份檔案。而透過這樣的定義檔，我們才可以用少量且易讀的程式碼顯示遊戲動畫：

local sheetInfo = require("corona-basic")
local myImageSheet = graphics.newImageSheet( "corona-basic.png", sheetInfo:getSheet() )

ocal sequenceData =

   {
       name="walking",
       frames = {
             sheetInfo:getFrameIndex("p1_walk01"),
            sheetInfo:getFrameIndex("p1_walk02"),
            sheetInfo:getFrameIndex("p1_walk03"),
            sheetInfo:getFrameIndex("p1_walk04"),
            sheetInfo:getFrameIndex("p1_walk05"),
            sheetInfo:getFrameIndex("p1_walk06"),
            sheetInfo:getFrameIndex("p1_walk07"),
            sheetInfo:getFrameIndex("p1_walk08"),
            sheetInfo:getFrameIndex("p1_walk09"),
            sheetInfo:getFrameIndex("p1_walk10"),
            sheetInfo:getFrameIndex("p1_walk11"),
        },
        time = 500
    }
}

local sprite = display.newSprite( myImageSheet , sequenceData )
sprite.x = display.contentCenterX
sprite.y = display.contentCenterY
sprite:setSequence("walking")
sprite:play()

定義檔可以手動產生，也可以使用一些自動化方案，例如提供的範例便是使用 Texture Packer 產生的。