Skip to main content

[CoronaSDK] FLSprite: Flash Sprite Sheet Parser

由於手上有個案子會使用到大量的動畫,之前與客戶配合時為了方便客戶製作,素材都是採用 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

Popular posts from this blog

[Flex] PureMVC standard with Spring extensions

由於上次稍微玩了一下 Robotlegs 依賴注入(DI) 主導的 MVC 框架,而著名也使用依賴注入的 Java / Java EE 的 Spring framework 出了 for ActionScript 的版本,剛好在最近 Spring ActionScript 1.0 正式 release 了(想了解 Spring 是啥咪東東的話請自行找 google 大神),這個版本除了基本框架外,也包含了 Cairngorm 與 PureMVC 的外掛...想當然耳,就拿來測試一下用在 PureMVC 內的感覺囉!! 參考了 官方範例 中 PureMVC 唯二的範例原始檔,以下使用的是「設定檔依賴注入 facade 透過 addConfigSource() 的方式來 init 」:(其實除了 embed 外,都是外部載入) Online Demo with source code 工作環境:FlashBuilder, Flex SDK4 請下載 PureMVC Standard 版本 再下載 Spring ActionScript 最新版本後,除了 spring-actionscript-cairngorm 不需要外,都放到 /src 下(記得只需要 org 開始...),也別忘了lib 內的 swc 檔 copy 到 /libs 下 Spring 的 injection 並不像 Robotlegs 直接來個 [Inject] metadata 的自動化那樣方便,但是其冷血度(檔案的鬆偶程度)更勝後者!如果你要使用設定檔(applicationContext.xml) 來做注入的話,準備工作就挺多的...XD 依照 applicationContext.xml 內設定的方式分別寫入 constructor 或者是 setter 依賴注入(本範例統一使用 setter injection) 為了跟大家都沒關係所以都使用 interface 來處理,所以你會在範例中發現大家都有介面...(並沒有真的研究過 Spring,也許還有其他作法) 準備 compiler 時候要用的 classe。由於在 setter, getter 的寫法上都使用 interface,所以真正用到的 class 需要預先在輸出階段就打包到程式內。 基本上 PureMVC 類 class...

[543] 最近的 Erin 在做什麼?

最近 Erin 噗浪玩很大,都忘了要寫 blog... 自從四月初開始認真當 SOHO 後,每天都過著"醉生夢死"的生活...?? 目前的行程: 五六月 - 滿檔中... 七月( 每週一三晚間 ) - 授課 飛肯 ActionScript 3.0 & XML 資料庫整合應用班 (會準備什麼隱藏課程?你來了就知道...XD ) 七八九月 - 短期約聘面談中 十月 - 等你聯絡囉~~^^ 近期如果你有"不急的" Flex / AIR / Flash / Flash lite 相關的案子需要外發都可以直接與我聯絡!也接受短期約聘喔! 1 ) 如何聯絡 Erin? 寄 e-mail 是最快的喔!不然可以透過 blog 上的 Plugoo 視窗與我聯絡,再來就是噗浪...XD E-mail: erinylin [at] gmail [dot] com Plurk: http://www.plurk.com/erinlin 2 ) 為什麼不公開留 MSN...?? 嗯...因為 Erin 記憶不好,外加 MSN 一堆幾百年沒有聯絡的朋友名單...所以還是先透過 e-mail 聯絡一下再加入比較記得... 3 ) Erin 到底會什麼? 啊...這個問題就有點難回答了,Erin 古早以前是個美術設計師,也當過電腦兼職講師,後來轉職當互動工程師,現在主要是做 AS1/AS2/AS3 "都可以"的前端互動開發(程式為主)。凡舉 Flex / AIR / Flash / Flash lite 相關的案子都做過,整合過很多專案,動畫也製作過(人物設定+動畫製作),在手機產業界接觸了 UI 設計與 UE 研究,最近經手的案子有國外活動網站(AS3+pv3D)中文化,公司進銷存系統網路化(Flex)...所以 Erin 到底能做什麼?嗯...就等你來研究囉~~ 4 ) 為什麼沒有作品集可以看? 這個就要問問為什麼一堆公司都要你簽 NDA (保密協定) ,搞的 Erin 也懶得公開經手過的作品,所以想要看到 Erin 做過什麼,就請記得找 Erin 面談時要註明『請帶電腦』這四個字 =) 裏 1 ) 目前 Erin 缺什麼? 嗯...缺男人(咦?這才是這篇的重點嗎?)