2011年11月11日 星期五

一起來玩鳥 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;

  public class Main extends Sprite 
  {
    private var _starling:Starling;
  
    public function Main():void 
    {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void 
    {
      removeEventListener(Event.ADDED_TO_STAGE, init);
      // entry point
      Starling.multitouchEnabled = true;//允許多點觸控
      _starling = new Starling(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;
 
  public class Game0 extends Sprite 
  {
    private var _container:Sprite;
    private var _box:Sprite;
    private var _quad:Quad;
  
    public function Game0() 
    {
      super();
      addEventListener(Event.ADDED_TO_STAGE, init);//一樣有ADDED_TO_STAGE Event可用
    }
  
    private function init(e:Event):void
    {
      removeEventListener(Event.ADDED_TO_STAGE, init);
   
      _container = new Sprite();//為了確保內容都在Stats下方,另外在用一個容器來裝我們的元件
      addChild(_container);//加到場景上一樣是addChild
      addChild(new Stats());//加上Stats
   
      _box = new Sprite();//新增一個容器,等等要放入一個四邊形跟文字
      var quad:Quad = new Quad(200, 200, 0x000099);//新增一個基本的四邊形,設定基本顏色為藍色
      quad.setVertexColor(0, 0xFF0000);//左上點設為紅色
      quad.setVertexColor(1, 0x00FF00);//右上點設為綠色
      quad.setVertexColor(2, 0x0000FF);//左下點設為藍色
      quad.setVertexColor(3, 0x000000);//右下點設為黑色
      var text:TextField = new TextField(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可用
    }
  
    private function 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設定錯了。設定好就可以發佈來看了。

點我或圖看Demo

上一篇:一起來玩鳥 Starling Framework(0)簡介
下一篇:一起來玩鳥 Starling Framework(2)效能測試以及Image與Texture

沒有留言:

張貼留言