方法一、使用TexturePacker 軟體官網：http://www.codeandweb.com/texturepacker 範例圖檔下載：woman 首先，要先把圖檔整理成多個png圖檔，若是連續的圖檔，則需要在後面加0001~~XXXX之類的數字，固定是四個數字。若是單一圖檔則可以不用加。到時在取圖檔時，例如本範例是woman0001~woman0028，則只需要用woman當前置詞就可以取出全部的動態圖檔了 而在操作TexturePacker時，最重要的是Data Format要選擇Sparrow/Starling。 索取TexturePacker免費序號 免費序號申請單：http://www.codeandweb.com/request-free-license 首先要說一下這套軟體的開發者真的很用心，當時看到有Blog說如果是有部落格的開發者，可以寫信去申請免費序號。我寫了申請表後，他回信了這封信給我： Hi Claire, Here’s your license key for TexturePacker: TP-xxxxxxxxxxxxxxxx I’ve added a license for PhysicsEditor (see…

上一篇：Starling的Display Objects介紹（四） 下一篇：產生TextureAtlas素材的方式 這篇會介紹starling.display.MovieClip以及starling.animation.Juggler MovieClip物件介紹 官方手冊在此：http://doc.starling-framework.org/core/starling/display/MovieClip.html 在Starling裡面的MovieClip和原生的MovieClip差異蠻大的，列舉說明如下： 每一個MovieClip都可設定不同的fps（需在new MovieClip時指定）：這是因為一般來說在Starling裡的frameRate都會設定的很高，但動畫可能不會有這麼多圖片可跑，因此每一個MovieClip 由一連串的連續圖檔組成：MovieClip是由一連串的動畫圖片（TextureAtlas）輪流播放。 MovieClip裡面無法有任何物件：在Starling裡的MovieClip並不是繼承DisplayObjectContainer，而是繼承於Image，因此無法addChild()。我們可以想像MovieClip在Starling裡是一個Image下面放著一張很大的png，然後有一個方型遮罩，不停的變換顯示的區塊。 動畫效果必需由Juggler驅動：在Starling裡所有的動畫物件都必需實作IAnimatable這個介面。而所有的動畫效果則統一由Juggler驅動（另外還包括Tween、DelayedCall）。 沒有frameLabel的概念（這部份有些Starling extension有加上去此功能） 當isComplete等於true時會停止動畫的播放 順便介紹兩個好用的method。第一個為setFrameDuration()，可以另外再設定某個影格的停留時間，影格數從0開始。而setFrameSound()可以設定播放到某影格時播放一個聲音檔。 連續圖檔的產生方式請見此文章：產生TextureAtlas的方式 Juggler物件介紹 官方手冊在此：http://doc.starling-framework.org/core/starling/animation/Juggler.html 介紹在此：http://grayliao.blogspot.tw/2011/11/starling-framework6jugglertweendelaycal.html Juggle是個簡單的Class，用來控制動畫的進行。他負責管理經由add()加進來的實現IAnimatable介面的物件，然後當Juggler的advanceTime()被呼叫時，它會負責去呼叫這些IAnimatable的advanceTime()，讓動畫進行下去；而當某個IAnimatable到達complete狀態時，則會被Juggler踢出去。我們就只要負責每個frame去呼叫Juggler的advanceTime()就好。而Starling class裡有個預設的juggler，當Starling.current正在運行時，Starling.juggler在每個frame時會自動被呼叫advanceTime()。通常我們把遊戲裡的動畫加到Starling.juggler裡，而一些特殊的動畫，例如遊戲暫停時要撥放的動畫，再加到另一個我們新增的Juggler，然後每個frame去呼叫它的advanceTime()。這裡講的每個frame，我們是使用EnterFrameEvent.ENTER_FRAME，而不是Event.ENTER_FRAME，因為EnterFrameEvent可以取得passedTime，這個passTime是指跟上一次事件發生經過的時間，可以傳給Juggle的advanceTime()的第一個參數。用經過時間來播放動畫，這樣就不會受frame數不穩定而影響動畫撥放的時間。 而要實現IAnimatable介面，只要實作advanceTime()這個方法，並且要設定一個complete條件，當達到這個條件時將自己的isComplete設為true，這樣就可以自動被Juggle移除。 簡單的MovieClip範例 因為在Starling裡面，不論是MovieClip或是Button，都是正方形的。若要去判別透明，將透明的Touch事件設為無效，都需要去覆寫原有的類別裡的hitTest函數，以最原始的BitmapData的hitTest去判別是否為透明圖層。…

上一篇：Starling的Display Objects介紹（三） 下一篇：Starling的Display Objects介紹（五） 這篇會介紹下圖裡的starling.display.Quad以及starling.display.Image Quad物件介紹 官方手冊在此：http://doc.starling-framework.org/core/starling/display/Quad.html A Quad represents a rectangle with a uniform color or a color gradient. 每一個端點都可以設定一個顏色，會呈現線性漸層。要顯示一個線性的漸變色，需要把一個色值設置給頂點0和頂點1，然後另一個顏色給頂點2和頂點3。 頂點位置是這樣安排的：: 0 – 1…

上一篇：Starling的Display Objects介紹（二） 下一篇：Starling的Display Objects介紹（四） 這篇會介紹下圖裡的starling.display.Button以及starling.display.Sprite Button物件介紹 官方手冊在此：http://doc.starling-framework.org/core/starling/display/Button.html 和Flash的SimpleButton的不同點，是它只有兩個狀態的圖檔，也就是upState與downState，而沒有over的狀態。它的disabled樣式可以經由alphaWhenDisabled的屬性去設定Disabled時的圖檔透明度。 另外，按下Button會觸發的事件是Event.TRIGGERED，因此若我們要監聽一個Button按下的事件，可用下面的方式去監聽： menuContainer.addEventListener(Event.TRIGGERED, onTriggered); private function onTriggered(e:Event):void { // outputs : [object Sprite] [object Button] trace ( e.currentTarget,…

上一篇：Starling的Display Objects介紹（一） 下一篇：Starling的Display Objects介紹（三） 這篇會介紹下圖裡的starling.text.TextField TextField物件介紹 官方手冊請見此：http://doc.starling-framework.org/core/starling/text/TextField.html 下面是一個最簡單的使用範例： package { import starling.display.Sprite; import starling.events.Event; import starling.text.TextField; public class Game extends Sprite { public function Game()…

上一篇：Starling Framework簡介 下一篇：Starling的Display Objects介紹（二） Starling framework啟動方式 所有使用Starling framework的應用程式的起始點，都是由一個Starling物件，來創建整個Starling世界（Starling物件說明可見此：Starling），下面是一個最簡單的範例： package{ import starling.core.Starling; import starling.display.Sprite; [SWF(width="1280", height="752", frameRate="60", backgroundColor="#000000")] public class Startup extends Sprite { private var…

下一篇：Starling的Display Objects介紹（一） Starling的技術基礎 Starling是基於Stage3D來實作的，因此在學習Starling之前，我建議應該要對Stage3D的特性有基礎的了解。有關於Stage3D的介紹可以看這篇文章：Stage3D運作原理。在這篇文章裡，我們可以知道Stage3D比起OpenGL及DirectX等傳統3D的APIs的優勢與劣勢。 Stage3D會依發佈平台的不同而使用不一樣的GPU運算引擎，例如在mac電腦上所使用的是OpenGL，而在Windows則會視電腦所使用的硬體設備去選擇所使用的基礎技術。值得一提的是，即使遇到不支援的硬體，Stage3D仍然可以使用軟件模式去做3D運算，只是會變得十分的緩慢。這邊有一個簡單的性能比較：Stage3D vs WebGL 性能較量 下圖是Starling的技術基礎示意圖： Starling運作模式 過去我們很容易因為Stage3D這個名字而誤會這是專門為3D而做的引擎，而不能使用在2D的技術上。3D引擎的運算與2D運算最大的差異點，在於3D畫面是由一個個三角型為基礎，去建構整個畫面。而2D的向量圖形，則是由多個頂點組合而成的複雜多邊型。 要將3D的技術使用在2D上，便是將圖片整理成png或jpg等圖片，然後將圖片視為兩個三角型去繪製物件，再加上貼材質的方式，將人物的圖片貼至範圍裡。這樣便可以利用GPU去執行它最擅長的三角型繪製以及材質貼圖的動作。   Starling簡單範例 這是一個最簡單的Starling Sample：StarlingTest StarlingTest.as package { import flash.display.Sprite; import starling.core.Starling; [SWF(frameRate="60",Width="800",Height="600")] public…