一起來玩鳥 Starling Framework（2）效能測試以及Image與Texture

上一篇我們放了一個Quad與TextField在舞台上慢慢轉。眼尖的可能會發現轉起來邊緣有點鋸齒，這可以透過設定Starling的反鋸齒來解決，在Main.as裡，新增了_starling之後，可以加上

_starling.antiAliasing = 2; 

後面的值可以是0到16間2的次方數(0, 1, 2, 4, 8, 16)，預設為0(沒有反鋸齒效果)，通常有需要的話也不會設大於2。設其他數值也可以跑，不過應該是自動取了最接近值。這一篇，我們就來測測Starling的效能有多強，另外介紹最基本的圖像Image與Texture。

我們來做個簡單的測試：在舞台上加入大量的物件，這裡先使用最簡單的Quad，然後隨時間不斷變換這些Quad的位置與角度，觀察大約可以加多少物件後還能維持高的fps。Main.as與上個範例一樣，就不重複介紹，只要把Starling的rootClass換成Game1就好。之後的練習大概也是這樣。我們先把Game1的程式碼列出來：

publicclassGame1extendsSprite
{
privatevar _container:Sprite;
privatevar _quads:Vector.＜Quad＞;//存放所有的Quad
privateconst QUAD_NUM:int=800;//Quad個數，調整這個數值來測試效能

publicfunctionGame1()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init);
}

privatefunction init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);

_container =newSprite();
addChild(_container);
addChild(newStats());
_quads =newVector.＜Quad＞();
var quad:Quad;
for(var i:int=0; i ＜ QUAD_NUM; i++)
{
quad =newQuad(20,20,uint(Math.random()*uint.MAX_VALUE));//長寬20x20，顏色亂數指定
quad.x =Math.random()* stage.stageWidth;//亂數產生座標
quad.y =Math.random()* stage.stageHeight;//亂數產生座標
quad.rotation = deg2rad(Math.random()*360);//亂數旋轉
_container.addChild(quad);//加到場景上
_quads.push(quad);//存放到Vector裡，方便等等變換位置角度
}

addEventListener(Event.ENTER_FRAME, onEnterFrame);//每次進入影格就改變所有Quad的位置與角度
stage.addEventListener(ResizeEvent.RESIZE, onResize);//stage監聽ResizeEvent.RESIZE，舞台大小改變時要改變Starling stage的大小與viewPort範圍
}

privatefunction onEnterFrame(e:Event):void
{
//改變所有Quad的大小與rotation
var quad:Quad;
for(var i:int=0; i ＜ QUAD_NUM; i++)
{
quad = _quads[i];
quad.x =Math.random()* stage.stageWidth;
quad.y =Math.random()* stage.stageHeight;
quad.rotation = deg2rad(Math.random()*360);
}
}

privatefunction onResize(e:ResizeEvent):void
{
stage.stageWidth = e.width;//必須手動改變stage的大小
stage.stageHeight = e.height;//必須手動改變stage的大小
Starling.current.viewPort =newRectangle(0,0, e.width, e.height);//改變viewPort的範圍
}
}

首先我們加了800個Quad到場景上，隨時間隨意變換位置與rotation。deg2rad是starling.utils裡的靜態方法，用來將角度轉為弧度，先反的也有rad2deg可以把弧度轉為角度。為了觀察舞台大小對效能的影響，我們對stage加上監聽舞台大小變化的事件。這裡比較不一樣的，第一，事件類型為ResizeEvent.RESIZE，這是因為ResizeEvent才有width跟height告訴我們現在flash的stage大小是多少。第二，我們必須依據這width與height來改變Starling stage的stageWidth與stageHeight，然後要改變Starling的viewPort。要取得現在正在運行的Starling的參照，可使用Starling.current。如果只改變stage的大小，Starling裡的元件會變形，render的範圍不變；如果改變viewPort大小，則元件會變形，render範圍會改變。只有同時改變兩個，元件才不會變形，同時render範圍隨著舞台大小而改變。

測試的結果，Quad數量與viewPort大小都會影響效能。在我電腦上測，1920x1080的螢幕(實際舞台高度會小一點)，大概800個Quad還可以維持在5x fps，偶而會掉到3x～4x。