2012年8月15日 星期三

Starling 批次加速

Starling 模仿Flash 傳統畫家算法顯示列表, 渲染方式以Stage3D 硬體加速. 開發人員透過MovieClip 形式建立結構, 並獲得Stage3D 的強大速度. 若大家對渲染速度有更高要求, 可以使用QuadBatch 批次渲染. 者作以Sprite Sheets 格式播放企鵝動畫, 分別以MovieClip 和QuadBatch 形式測試以下範例:

請按 [觀看] MovieClip 效能範例
請按 [觀看] QuadBatch 效能範例

在使用QuadBatch 時, 我們需要以下手法編寫:
  • Event.ADDED_TO_STAGE 時, 建立Image 作為渲染時的圖案庫和建立QuadBatch:
    private function init(event:Event):void{
      ......
      addEventListener(Event.ENTER_FRAME, enterFrameHandler);
      
      // <----- create textures
      var texture:Texture = Texture.fromBitmap(new AtlasTexture());
      var xml:XML = XML(new AtlasXML());
      var atlas:TextureAtlas = new TextureAtlas(texture, xml);
      var textures:Vector.<Texture> = atlas.getTextures("penguin");
      
      // <----- define variable
      _images = new Vector.<Image>;
      _mcData = new Vector.<MCData>;
      
      // <----- create images
      for(var i:int=0; i<textures.length; i++){
        _images[i] = new Image(textures[i]);
        _images[i].scaleX = TEXTURE_SCALE;
        _images[i].scaleY = TEXTURE_SCALE;
      }
      
      // <----- define container
      _quadBatch = new QuadBatch();
      this.addChild(_quadBatch);
      ......
    }
    

  • 當用戶按下螢幕, 增加100 隻企鵝, 並把位置記在自定的MCData 物件中:
    private function addPenguins():void{
      // <----- find max width & height
      var maxWidth:int = this.stage.stageWidth;
      var maxHeight:int = this.stage.stageHeight;
      
      // <----- move to random position
      for(var i:int=0; i<100; i++){
        var mcData:MCData = new MCData();
        mcData.x = maxWidth*Math.random()-TEXTURE_HALF_WIDTH;
        mcData.y = maxHeight*Math.random()-TEXTURE_HALF_HEIGHT;
        mcData.currentFrame = 0;
        _mcData.push(mcData);
      }
      ......
    }
    

  • 在每次發動Event.ENTER_FRAME 時, 重新渲染一次QuadBatch: (每1 秒60 次渲染)
    private function enterFrameHandler(event:Event):void{
      // <----- reset QuadBatch
      _quadBatch.reset();
      
      // <----- create image
      var image:Image;
      
      // <----- add image to QuadBatch
      for(var i:int=0; i<_mcData.length; i++){
        image = _images[(++_mcData[i].currentFrame)%TEXTURE_TOTAL_FRAMES];
        image.x = _mcData[i].x;
        image.y = _mcData[i].y;
        _quadBatch.addImage(image);
      }
    }
    

範例可於iPhone, iPad 及Android 測試效能. 觀察每個硬體對Starling 渲染的能力.
Starling 的QuadBatch 批次渲染速度, 明顯比MovieClip 形式更為高速, 但使用上較為複雜.
大家可以 [下載] 範例試試看.

參考資料: http://www.starlinglib.com/wiki/News:2DAnimationsOptimization

沒有留言: