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

时间:2022-11-04 20:44:22

上一篇我們放了一個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。

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