2012年1月19日 星期四

再次介紹TexturePacker

上次介紹Starling Framework的時候介紹了TexturePacker這個工具,用來產生MovieClip需要的Sprite Sheet圖檔與Data file。開始用這個工具主要是因為他是官方推薦的,所以轉出來的格式絕對沒有問題,使用了幾次之後,發現它支援了一堆格式,而且也有好幾個優點,值得跟大家再介紹一下。

TexturePacker有提供免費的Essential版本,基本功能可以正常使用,進階功能也可以測試,但在輸出的時候圖片會被做些"處理"。所以如果免費版本用起來覺得不錯,可以去支持一下,購買完整版。Windows/Mac/Linux系統的都有。TexturePacker的界面很簡單:
上方是工具列,左方是詳細設定,中間是預覽圖,右邊是Sprite,可以把各種圖擋跟swf檔拖曳進來,TexturePacker就會幫我們把圖檔與資料處理完畢。

如果我們要把swf轉成Sprite Sheet,打開Flash IDE,我們必須把動畫做在主時間軸上,如果包成MovieClip就只會被TexturePacker當成一個Frame。如果我們想把好幾個動畫整合起來輸出成一張Sprite Sheet,最好的做法是把各個動畫做在不同的fla裡,然後分別輸出swf檔,例如:stand.swf,walk.swf,run.swf等等。接著就一個一個拉進TexturePacker裡:
這樣的話到時候輸出的Data File裡面,SubTexture的名稱會幫我們以檔名來作區別,之後程式才有辦法把需要的Textur過濾出來。

當我們把Sprite都拉進來後,中間自動產生預覽圖,左邊的設定,最重要的是先選Data Format:
之前我們使用了Sparrow,也相容Starling的格式,其它還有一些有趣的格式,例如cocos2d,甚至css也可以(將所有網頁用到的圖檔整合在一張Sprite Sheet,再用css顯示部分圖檔,可以大量減少request次數)。

當然也有一些大神開發出來的免費工具,將swf轉成Sprite Sheet,例如gskinner的Zoë,還有Bit-101的SWFSheet,不過因為使用目的不同,輸出的格式也不太一樣,因此也不是說誰比較好,而是要依照目的來選擇工具。

仔細觀察TexturePacker產生的圖擋,有幾個很棒的細節TexturePacker都幫我們處理好了。首先,我們的Sprite不需要固定大小,也不用按照任何的排序,TexturePacker會盡量幫我們塞到最小。同時為了支援手機的OpenGL ES2,TexturePacker可以自動幫我們把Sprite Sheet的寬高設定為2的次方數,只要把Allow free sizes取消勾選就可以了。如果不是手機的用途,就可以把這個選項勾起來,TexturePacker會幫我們把多餘的空白像素去掉。另外還有一點,在使用swf轉檔時,如果Texture發現某幾個影格內容一模一樣,輸出的圖像只會用同一格,不管是Tween的過程或是關鍵影格都可以判斷出來。如此一來,最後輸出的圖檔就可以小很多,這是一些固定Sprite寬高與順序排列的工具沒辦法達到的優點。



2 則留言:

  1. hi 板板
    請問你對於flixel+starling有什麼看法
    是否可行?
    或是starling+其他2d game engine(比如as3isolib)

    回覆刪除
  2. To 恰屁:
    要看這些game engine後續的版本是否要支援Starling
    簡單講就是要有人去把這些game engine底層的Display Object 與Event等等都改成Starling版
    fixel聽說是有計劃,但目前還沒有改版
    可以隨時注意他們的官網或是到Starling論壇搜尋關鍵字看看

    回覆刪除