跳到主要內容

ActionScript3.0 Starling用法

starling適用於連續貼圖,將所有動態單張的圖檔合成一張PNG圖檔,在使用XML去讀取該時間的該張圖。

要如何將許多的連續圖檔合成一張PNG圖呢?!
就是他"TexturePackerGUI",這軟體很棒,他可以直接匯出兩種檔案「PNG  &  XML」讓程式可以直接讀取。在這套軟體中可以調整PNG的大小和縮放比例等等。

接著,如左圖,我們將會出的檔案放到FlashDevelop中的bin-assets裡面命名為leaf01.png與xml檔。

注意:在左圖中,lib資料夾中有一個怪里怪氣的檔案叫做starling.swc這一定要放進去,否則會無法使用starling這個工具。這個檔案就像是我們自己製作的類別檔一樣,放進FlashDevelop後,記得將他add到library中,才能夠使用喔!!!

在src檔案中,我在Main.as放入Game2.as這個檔案,所以主要控制starling的檔案為Game2.as,我貼上主要控制starling的程式碼:



 
private var _container:Sprite;
[Embed(source = "/assets/leaf01_.xml", mimeType="application/octet-stream")]
private static const SpriteSheetXML:Class;//embed Sprite sheet data file
[Embed(source = "/assets/leaf01_.png")]

_container = new Sprite();
addChild(_container);
addChild(new Stats());
 
var bitmap:Bitmap = new SpriteSheet();
var texture:Texture = Texture.fromBitmap(bitmap);
//將Sprite sheet轉成Texture
var xml:XML = XML(new SpriteSheetXML());
//產生一個Sprite sheet data的XML
var textureAtlas:TextureAtlas = new TextureAtlas(texture,xml);
//新增一個TextureAtlas,把texture與 xml傳進去
var frame:Vector. = textureAtlas.getTextures("");
//將textureAtlas裡名稱為"movieClip.swf/"開頭的SubTexture取出來
var movieClip:MovieClip = new MovieClip(frame,24);
//新增一個MovieClip,第一個參數傳入剛產生的frame,第二個參數設定fps
movieClip.x = 100;
//設定movieClip座標
movieClip.y = 100;
//設定movieClip座標
movieClip.setFrameDuration(0, 0.5);
//我們可以設定某個frame的停留時間,frame數由0開始
_container.addChild(movieClip);
//將movieClip加到場景上
Starling.juggler.add(movieClip);
//最後別忘了加到Starling.juggler開始播放 

而在Main.as中,記得import Game2.as外部檔
 private var _starling:Starling;
 _starling = new Starling(Game2, stage);
//新增一個Starling
 _starling.start();
//讓Starling開始跑

大致上是這樣囉!!
但是,假如連續圖檔的像素太大,硬把圖檔縮小,一定會破壞到他圖的解析度,所以假如要做連續圖檔的作品,也可以嘗試使用把連續圖檔丟到Flash裡面逐格置入,轉換成影片片段,再將影片片段匯出為SWC給FlashDevelop使用,只是要注意記憶體的問題,放太多可能會爆炸喔,沒有清乾淨也會爆炸。所以之後有機會來寫寫連續圖檔清理記憶體的部分。









留言