一起來玩鳥 Starling Framework(1)一定要的Hello World!

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

一起來玩鳥 Starling Framework(1)一定要的Hello World! - randomclan - [Random]/v@ny
 

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設定錯了。設定好就可以發佈來看了。

一起來玩鳥 Starling Framework(1)一定要的Hello World! - randomclan - [Random]/v@ny

你可能感兴趣的:(Hello world)