Claire's Blog

方法一、使用TexturePacker 軟體官網：http://www.codeandweb.com/texturepacker 範例圖檔下載：woman 首先，要先把圖檔整理成多個png圖檔，若是連續的圖檔，則需要在後面加0001~~XXXX之類的數字，固定是四個數字。若是單一圖檔則可以不用加。到時在取圖檔時，例如本範例是woman0001~woman0028，則只需要用woman當前置詞就可以取出全部的動態圖檔了 var woman:MovieClip = new MovieClip(atlas.getTextures("woman"),30); 而在操作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 file attached) in case you might want to try it…

上一篇：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去判別是否為透明圖層。 這邊有一個已寫好的類別：AlphaMovieClip，已經寫好將透明圖層的所有hitTest事件設為無效。若有這個需求的人可以使用此類別來應用。下面是一個我寫的簡單應用範例，可點此下載原始檔：StarlingTest StarlingTest.as package { import flash.display.Sprite; import starling.core.Starling; [SWF(frameRate="60",Width="800",Height="600")] public class StarlingTest extends Sprite {…

上一篇：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 | / | 2 – 3 在這個物件裡面，可以看到一個叫做mVertexData的屬性。在Starling Framework簡介的地方曾經說過，Starling是基於Stage3D而建的，關於3D渲染基礎原理請見此：3D渲染基礎原理，VertexData官方介紹。所謂3D其實是一組3維的坐標，經由矩陣轉換，將之投影到2D螢幕上，計算其在2D畫面上的2D坐標，如下圖所示： 在Starling裡面，因為是2D遊戲，則是使用正交投影的方式，直接去掉z軸的值，來將頂點坐標從3維轉至2維。但操作原理不變，這邊的則是要輸入四邊型的頂點數據。正交投影示意如下圖： 下面是產生寬高各為200,200的方塊的簡單範例： package { import starling.display.Quad; import…