SpriteSheetClip 的高效能渲染

關於2D 渲染部分, 我們大多選擇以Stage3D 為基礎的Starling 圖像引擎, 其效能必然是最好. 若大家希望簡單製作, 又要求達到一個理想的渲染效果, SpriteSheetClip 相信是個好選擇, 它比傳統MovieClip 效能高很多.

SpriteSheetClip 運作原理十分簡單, 它是繼承Bitmap 類別, 建立時記錄Sprite Sheet 的內容. 當播放時更換相對的BitmapData 內容, 達到連續播放效果.

請按 [觀看] 範例

以下是使用方法:

1. 準備一份Sprite Sheet 格式檔案的PNG 與JSON:

   [Embed("assets/Animation.png")]
   public var AnimationImage:Class;
    
   [Embed("assets/Animation.json", mimeType="application/octet-stream")]
   public var AnimationData:Class;
   

   
   
2. 透過SpriteSheetClip 產生實體:

   var mc:SpriteSheetClip = new SpriteSheetClip(AnimationImage, AnimationData);
   mc.gotoAndPlay("someLabel");
   this.addChild(mc);
   

   
   
3. 設定實體位置(x, y), 縮放(scaleX, scaleY), 旋轉(rotation) 或透明度(alpha):

   mc.x = 10;
   mc.y = 10;
   mc.scaleX = 0.5;
   mc.scaleY = 0.5;
   mc.rotation = 90;
   mc.alpha = 0.8;
   

   
   
4. 於Event.ENTER_FRAME 呼叫step() 功能, 手動觸發播放:

   this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
   ...
   function onEnterFrame(event:Event):void {
         mc.step();
   }

在沒有Stage3D 硬體加速幫助下, 純粹更換BitmapData 能給出高效能渲染, 這個既簡單又實用的手法, 確實令人驚訝喔.

參考資料: http://blog.domlib.com/articles/291

後記:
由於SpriteSheetClip 依賴Zoe 產生相關的PNG 與JSON. 若Zoe 產生內容有所更改, SpriteSheetClip 需要作出相應的改動, 它們之間沒有統一的標準.