一起來玩鳥 Starling Framework（1）一定要的Hello World！

雖然已經一堆Hello World的介紹文章跟影片了，但中文資料畢竟是比較少，所以不能免俗的來一篇中文版Hello World。首先開啟一個AS3.0專案，fps不用客氣，設為60，Starling很快的。當然要發佈的版本是Flash Player 11。使用FlashDevelop的需要打開Project->Properties，如下圖的地方加上：-swf-version=13設定輸出的swf版本：

 

FlashBuilder的使用者請參考官網的介紹影片。

接著來看程式碼。假設Document Class為Main.as，我們直接把程式碼列出來如下：

package pj
{
import flash.display.Sprite;
import flash.events.Event;
import pj.game0.Game0;//Hello world
import starling.core.Starling;

publicclassMainextendsSprite
{
privatevar _starling:Starling;

publicfunctionMain():void
{
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

privatefunction init(e:Event=null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
Starling.multitouchEnabled =true;//允許多點觸控
_starling =newStarling(Game0, stage);//新增一個Starling
_starling.simulateMultitouch =true;//允許多點觸控模擬，ctrl + 滑鼠拖曳可以叫出來
_starling.start();//讓Starling開始跑
}
}
}

程式碼很簡單，如果不設定多點觸控的話只要兩行！關於多點觸控的設定很簡單，我們這裡也用不到，所以先跳過，我們直接看新增一個Starling實體：

_starling = new Starling(Game0, stage);//新增一個Starling 

第一個參數是rootClass，直接給一個Class的名稱，這個Game0我們等等再去看。他的角色就像是Starling版的Document Class，所有Starling裡的Display Object都從他開始加。第二個傳入native的stage。後面還可以加第三個參數viewPort，給他一個Rectangle，用來設定Starling Render的範圍，預設為stage大小。第四個Stage3D通常用預設的就好。第五個renderMode預設為"auto"，我們可以設定成Context3DRenderMode.SOFTWARE來強迫電腦使用software render的情況下來看Starling的運行狀況。這可以幫助我們了解在較差的設備上運作時會是怎樣。基本上只有前兩個必填。接著我們就呼叫start()方法，就可以讓Starling開始了。當然這時候發佈會發生錯誤，因為Game0還沒寫。

接著來介紹Game0。開一個新的as檔，讓它繼承Sprite。注意，是Starling版的Sprite。從這裡面開始，我們用到的Display Object或Event都是Starling版的。列出程式碼來說明：

package pj.game0
{
import fr.kouma.starling.utils.Stats;//Starling版的Stats
import starling.display.Quad;
import starling.display.Sprite;
import starling.events.Event;
import starling.text.TextField;
import starling.utils.HAlign;
import starling.utils.VAlign;

publicclassGame0extendsSprite
{
privatevar _container:Sprite;
privatevar _box:Sprite;
privatevar _quad:Quad;

publicfunctionGame0()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init);//一樣有ADDED_TO_STAGE Event可用
}

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

_container =newSprite();//為了確保內容都在Stats下方，另外在用一個容器來裝我們的元件
addChild(_container);//加到場景上一樣是addChild
addChild(newStats());//加上Stats

_box =newSprite();//新增一個容器，等等要放入一個四邊形跟文字
var quad:Quad=newQuad(200,200,0x000099);//新增一個基本的四邊形，設定基本顏色為藍色
quad.setVertexColor(0,0xFF0000);//左上點設為紅色
quad.setVertexColor(1,0x00FF00);//右上點設為綠色
quad.setVertexColor(2,0x0000FF);//左下點設為藍色
quad.setVertexColor(3,0x000000);//右下點設為黑色
var text:TextField=newTextField(200,200,"哈囉, 世界！","新細明體",16,0xFFFFFF,true);
//新增一個文字框
text.hAlign =HAlign.CENTER;//水平置中
text.vAlign =VAlign.CENTER;//垂直置中
text.autoScale =true;//讓文字字級自動縮小以符合較小的寬高
_box.addChild(quad);//在_box內加入四邊形
_box.addChild(text);//在_box內加入文字
_box.pivotX =100;//設定_box的註冊點位置
_box.pivotY =100;//設定_box的註冊點位置
_box.x = stage.stageWidth >>1;//_box設定在舞台中央
_box.y = stage.stageHeight >>1;//_box設定在舞台中央
_container.addChild(_box);//_box加到_container裡面
addEventListener(Event.ENTER_FRAME, onEnterFrame);//一樣有ENTER_FRAME Event可用
}

privatefunction onEnterFrame(e:Event):void
{
_box.rotation +=0.01;//不斷旋轉_box，這裡加的量單位為弧度
}
}
}

幾乎每一行都加註解了。首先為了要了解Starling的效能，我們要裝一下Starling版的Stats。我們也可以在Main.as那邊加個native版的Stats。不過據說同時使用native與Starling的Display Object在Android上會讓fps只能到30，所以我們還是先裝一下Starling版的。
然後一開始一樣有ADDED_TO_STAGE事件讓我們知道是否被加到Starling stage上了，所以程式的開頭跟寫native API沒什麼差別，只要記得Import的是starling package底下的類別就好。
接著我們加個_container跟Stats到場景上。接著我們想放個方塊，裡面放個文字來看看。這一整個東西我們放在_box裡面，所以我們新增一個Quad，它是Starling裡很基本的一個Display Object，前一篇提過，Starling就是用兩個三角形拼成一個Quad，加上材質，來產生GPU 2D加速的效果。Quad只能指定顏色材質，也可以使用setVertexColor()來指定色個端點的顏色，然後會自動產生漸層。第一個參數vertexID為0~3，分別為左上，右上，左下，右下四個端點。第二個參數是顏色。
接著我們新增一個TextField，設定寬高為200，顯示文字為"哈囉，世界！"，我們一開始就說了，這篇要來個中文版的Hello World。設定字體為新細明體，字級16，最後一個true代表使用粗體。可以使用hAlign與vAlign來設定水平與垂直的對齊方式。autoScale設定為true可以讓文字內容超過原本寬高設定時，會自動縮小字級以符合原本的寬高位置。關於TextField的運作，Starling其實是開一個native的TextField然後依照Starling TextField的設定去改變這個native TextField，然後將它draw成材質給GPU使用，再貼到Starling裡面。而整個Starling會重複使用這一個native TextField，而不是一直開新的來使用。
四邊形跟文字都設定好了，我們就可以把它加到_box裡面。我們可以設定Sprite的註冊點，讓旋轉縮放等效果可以以_box的中心來變化，而不是左上角。然後將_box的位置設定到舞台的中央，加到_contaner裡面，這樣我們就看的到它了。
最後，我們加個ENTER_FRAME Event讓_box一直旋轉。在所有的Starling Display Object，rotation的單位都是以弧度來計算，這是因為Starling的堂哥Sparrow是以弧度來計算的關係。

最後，我們的html上面，要記得將wmode設定為"direct"，這是Flash Player 11新的幾個wmode之一。設定為"direct"才能看到Stage3D的效果。如果設定錯，Starling會在畫面上顯示一段訊息告訴你wmode設定錯了。設定好就可以發佈來看了。