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