由於手上有個案子會使用到大量的動畫，之前與客戶配合時為了方便客戶製作，素材都是採用 Flash 或 PhotoShop 輸出 TexturePacker 可打包格式做 sprite sheet 使用。不過為了打包需要輸出大量的 swf，雖然可以使用 Flash 製作 app 用動畫已經簡化的很多步驟，但是某程度上還是有點不便，於是簡單研究了一下 Flash CS6+ 的內建輸出 Sprite Sheet 功能，並分析其輸出的 JSON-Array 格式給 CoronaSDK 使用。
不過嚴格說起來， Flash 打包 Sprite Sheet 的算法並沒有很好，尤其是有些時候，判定整個 MovieClip 範圍的長寬會有錯誤，這時候就是調整一下 MovieClip 後重新打包，也許就會正確，但是其判定規則因為沒有多加研究，所以目前不明，請有發現的朋友們告知一下，謝謝。
How to use?
在 FlashCS6+ 內製作動畫的 MovieClip 後，打開 Libaray(元件庫)，點選你需要輸出的動畫 MovieClip 或圖片 Clip 後，按滑鼠右鍵，點選 Generate Sprite Sheet… ，其他設定如下， FlSprite 目前僅支援 JSON-Array 格式輸出。左邊視窗所列的名稱清單，將在 CoronaSDK 中使用。
)
Converts JSON file to UTF–8 encoding.
這點很重要，由於 Flash 輸出的 json 檔案是 UTF–16 編碼，這時候需要將其轉檔成 UTF–8 否則 Lua 的檔案讀入時會呈現中斷的亂碼，解析就會失敗。很多文字編輯器都有這類功能，如 Sublime Text，就可以在下拉是功能表 File 中找到 Save with Encoding 將檔案轉存成 UTF–8。不然參考一下線上轉換器：UTF–16 to UTF–8 online converter
Usage:
local FLSprite = require "FLSprite"
-- FLSprite.load( jsonPath [,optional: system path ][, optional: isPreload boolean ] )
-- local sheetInfo = FLSprite.load("demo.json")
-- isPreload=true, preload texture in memory
local sheetInfo = FLSprite.load("demo.json", true)
local sheet = sheetInfo:getImageSheet()
New Image
-- newImage
local girl = display.newImage( sheet, sheetInfo:getFrameIndex("Character Horn Girl.png" ))
girl.x = 100; girl.y = 100
New ImageRect
-- newImageRect
local frameIndex, frameData = sheetInfo:getFrameData("Character Horn Girl.png")
local girl1 = display.newImageRect( sheet, frameIndex, frameData.width, frameData.height )
girl1.x = 180; girl1.y = 100
Sprite
-- sprite
local data = sheetInfo:getSequenceData("ppl01_act1")
-- rewrite loopCount, default is loop
data.loopCount = 3
-- rewrite loopDirection
data.loopDirection = "bounce"
local sp = display.newSprite( sheet , data )
sp.x = 180; sp.y = 240
sp:play()
-- sprite for all actions
local index = 2
local data1 = sheetInfo:getSequenceData()
local sp1 = display.newSprite( sheet , data1 )
sp1.x = 120; sp1.y = 320
sp1:play()
local function swapSheet()
sp1:setSequence( "ppl01_act"..index )
index = index==2 and 1 or 2
sp1:play()
end
timer.performWithDelay( 2000, swapSheet, 0 )
Clear cache
-- remove all groups and then...
FLSprite.clear("demo.json")
--clear all caches
FLSprite.clear()
Comments
Post a Comment