用Starling渲染Sprite

本文中要研究的是如何通過Starling架構使用2D遊戲中Stage3D（比如使用者GPU），來給資源做動畫。視頻和文章在內容上幾乎完全相同（雖然主遊戲類的路徑稍微有所不同）。

[flash]http://player.youku.com/player.php/sid/XMzIxMTEzMzAw/v.swf[/flash]

在我的Vimeo中可以查看更多視頻

我想我有必要說明一下怎麼開始架構Starling，一個很明顯的切入點就是如何用Starling以及GPU（通過Stage3D）繪製動畫。幸好，Starling 把這些必要的繁瑣環節都封裝起來在幕後為你完成，你可以通過它直接和Stage3D互動。使用Starling的另一個好處就是它接入了一個你所熟悉的API，由於它緊緊遵循著相同的API，而此API用於指向傳統Flash Display列表的時候。MovieClip，Image，Sprite，Button等等。

現在開始

下面看看要怎麼開始用Starling新增內容和製作動畫。首先，你建立好一個支援Starling的ActionScript項目後（如果你不知道要怎麼做請查看這篇文章），第一件要做的就是建立一個Starling核心引擎的執行個體。 var _st:Starling = new Starling(AnimationExample, stage);
_st.start(); 複製代碼 可見建立Starling()執行個體時，你要給它提供兩個參數（它確實需要額外的參數但是目前我們會先跳過）。第一個參數是當Starling啟動並執行時候你要執行個體化的根類，在這裡是AnimationExample。第二個參數是你要附加到根類執行個體的儲存單元，在這裡我們只要指定stage執行個體就可以了。

以上都完成後，現在剩下的就是讓Starling實際運行了，你可以已經知道要怎麼做了。你只需要調用Starling執行個體的start()方法。由上面兩行代碼，你的遊戲文檔類已經完成了（至少有個樣本了），它應該跟下面代碼看起來很像： package
{
        import flash.display.Sprite;

        import starling.core.Starling;
        import com.flashgen.examples.AnimationExample;

        public class Starling101 extends Sprite
        {
                public function Starling101()
                {
                        var _st:Starling = new Starling(AnimationExample, stage);
                        _st.start();
                }
        }
} 複製代碼 建立遊戲文檔類

你可能會發現我漏掉了根類AnimationExample的建立，這個我們傳入到Starling()建構函式的類。由於我想覆蓋Starling一個特殊條件，就是說這個類必須要繼承Starling的實現介面DisplayObject類。現在就很明了了，這個不是Flash的DisplayObject類，它是一個同名的Starling實現介面。最常用的實現介面就是從Starling的Sprite類中擴充這個類——你可能會將Starling的DisplayObject類一併擴充。這樣你的基類AnimationExample如下： package com.flashgen.examples
{
        import starling.display.Sprite;

        public class AnimationExample extends Sprite
        {
                public function AnimationExample()
                {
                        super();
                }
        }
} 複製代碼 現在你要建立一個叫init()的方法。對於這個例子，你可以將絕大部分代碼放在這裡。沒有將代碼放到實際的類建構函式中，是因為我們想確保在其他東西進入進程之前這個類已經放到舞台上了。而這樣做，只需要在AnimationExample類建構函式中加入一個事件偵聽，等到這個類完整的添加到舞台上才執行。 public function AnimationExample()
{
        super();

        addEventListener(Event.ADDED_TO_STAGE, init);
} 複製代碼 需要反覆重申的是這個我們偵聽的事件不是flash.events.Event實現介面，而是Starling的實現介面，比如starling.events.Event。我知道對於確定類使用Starling的實現介面我有點囉嗦，但如果你碰巧用了Flash的實現介面可是會報錯的。

添加資源

與Flash相比，Starling跟平常使用的製作動畫方式有點不一樣，但是最主要的是它用了Texture Atlas和Sprite Sheet *來渲染可視內容和製作動畫。

Texture哈。Sprite什麼。。
Texture Atlas和Sprite Sheet非常相似，它們都以一個包含許多小映像的大映像為中心。但它們在主要包含的內容約制上是不一樣的。

Sprite Sheet一般只包括一個單獨Sprite類型的位元影像資訊——比方說一個士兵——包括它所需要的所有動畫幀。

Texture Atlas包含了一整個遊戲中所有需要的位元影像資訊，（或者如果這個遊戲每個單獨的關卡都特別龐大），包括Sprite、靜態資源等等。它還傾向於利用一個文字文件（一般是XML），或“Atlas”，來標出每個條目在大映像中的哪裡。通過在文字文件中使用資料可以很容易的摘錄你需要的條目；並且如果完成得比較迅速，你可以根據序列交換當前幀和下一幀，以此來製作動畫。

我已經建立了一個Sprite Sheet，並且用app調用了TexturePacker關聯了XML檔案。我不是想在這篇文章中追蹤怎麼使用app的細節——我會把這留到一篇專門的博文中。現在主要做的就是怎麼讓這兩部分（PNG圖表和XML文檔）相互關聯。因為我早先提到了XML文檔包含了一個對於圖表中每個條目的引用，並給每個sprite提供了x，y，width，height屬性： <TextureAtlas imagePath="Bilbo-walk.png">
    <SubTexture name="Bilbo0001" x="0" y="0" width="215" height="208" frameX="-33" frameY="0" frameWidth="295" frameHeight="212"/>
    <SubTexture name="Bilbo0002" x="215" y="0" width="215" height="208" frameX="-33" frameY="0" frameWidth="295" frameHeight="212"/>