在‘Flash’分類底下的文章

Starling簡報分享

Starling from Claire Chang Starling簡介 基於Stage3D技術來實作 在Flash Player 11之後的版本才能支援此技術 使用GPU做圖形的運算,讓Flash的效能能夠到之前的1000倍(官方說法)! 易學,使用跟Flash native API類似的類別,方法,架構等,讓原本熟悉Flash的開發者可以很快的上手可發布到多種平台(包括 iOS andAndroid及各種瀏覽器)   3D畫面運作原理 Flash原有的坐標系統:Global Point和Local Point 3D世界的坐標系統:世界坐標到相機坐標的轉換 3D透視變換方法 正交投影 透視投影 比較圖 Stage3D的渲染過程 VertexShader 主要作用就是3D流程中的前半段操作(對頂點進行一系列的矩陣變換) FragmentShader:對這些變換後的頂點(及流程中的光柵化部分)進行渲染 過去主要的3D技術 使用GPU的3D引擎:硬件加速(hardware acceleration) DirectX OpenGL 其他Flash3D引擎:軟件模式(softwar […]

繼續閱讀...

產生TextureAtlas素材的方式

方法一、使用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& […]

繼續閱讀...

Starling的Display Objects介紹(五)

上一篇: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,因此 […]

繼續閱讀...

Starling的Display Objects介紹(四)

上一篇: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官方介紹。所 […]

繼續閱讀...

Starling的Display Objects介紹(三)

上一篇: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:Ev […]

繼續閱讀...

Starling的Display Objects介紹(二)

上一篇: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() { addEventListener(Event.ADDED_TO_STAGE, onAdded); } private function onAdded (e:Event):void { // create the TextField object var l […]

繼續閱讀...

Starling的Display Objects介紹(一)

上一篇: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 mStarling:Starling; public function Startup() { // 建立Starling物件 mStarling = new Starling(Game, stage); // start i […]

繼續閱讀...

Starling Framework簡介

下一篇: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畫面是由一個個三角型為基礎,去建構整個畫面。 […]

繼續閱讀...

Stage3D運作原理

本文為此文章的中文重點翻譯:How Stage3D works 3D技術的突破 在過去幾年中,開發人員已經用FLASH創造了許多3D工具,如Papervision3D,Away3D和Alternativa3D,以及所有類似的3D引擎,顯示Flash對即時3D渲染的強烈需求。 過去Flash 3D的渲染是在不使用3D硬件加速的情況下進行的。 事實上,所有在Flash Player 11之前版本的3D渲染是依靠CPU的完成,我稱之為軟件模式(software mode)。 軟件模式是緩慢的,不能用來呈現細緻的3D場景。 到目前為止,軟件模式不能渲染出我們今天3D遊戲中常見的高級的圖形效果。 隨著Flash Player 11的發布,新的可能性已被實現。 開發人員可以利用3D硬件(顯卡)加速,而不是僅僅依靠計算機的CPU渲染。在新的渲染模式中Flash可以使用一個被稱為圖形處理單元(GPU)的副處理器。 GPU是設計完全用來圖形渲染的物理硬件。Stage3D API的公佈對Flash開發者是一個重大的事件。 在Flash中使用3D加速,使許多以前不能實現的Flash遊戲和Flash應用成為可 […]

繼續閱讀...

hasEventListener()與willTrigger()區別

承上一篇介紹Event事件流的基本概念 AS3的事件傳遞機制(Event、dispatchEvent及addEventListener) 再來介紹相關的檢查函數。 hasEventListener()方法: 檢查 EventDispatcher 對象是否為有註冊這個事件的監聽器。 willTrigger()方法: 檢查是否用此 EventDispatcher 對象或其父容器是否有註冊這個事件的監聽器 hasEventListener() 與 willTrigger()的區別是:hasEventListener() 只檢查它所屬的對象 而 willTrigger() 檢查對象以及對象的父容器是否有註冊這個事件(不管capture的值)。 假如像下面這樣的物件階層來說 今天我們對stage註冊事件 stage.addEventListener(MouseEvent.CLICK, stageClick); 則檢查box的willTrigger及hasEventListener trace(box.willTrigger(MouseEvent.CLICK)); trace(box.hasEve […]

繼續閱讀...