Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Starling

1,114 views

Published on

  • Be the first to comment

Starling

  1. 1. STARLING Claire Chang
  2. 2. 基於Stage3D技術來實作 在Flash Player 11之後的版本才能支援此技術 使用GPU做圖形的運算,讓Flash的效能能夠到之前的1000倍(官方說 法)! 易學,使用跟Flash native API類似
 的類別,方法,架構等,讓原本
 熟悉Flash的開發者可以很快的上
 手 可發布到多種平台(包括 iOS and
 Android及各種瀏覽器)
  3. 3. Flash原有的坐標系統:Global Point和Local Point 3D世界的坐標系統:世界坐標到相機坐標的轉換
 
 
 
 
 
 

  4. 4. 正交投影 透視投影 比較圖
  5. 5. VertexShader 主要作用就是3D流程中的前半段操作(對頂點 進行一系列的矩陣變換) FragmentShader:對這些變換後的頂點(及流程中的光柵化 部分)進行渲染
  6. 6. 使用GPU的3D引擎:硬件加速(hardware acceleration) DirectX OpenGL 其他Flash3D引擎:軟件模式(software mode) Papervision3D Away3D Alternativa3D
  7. 7. 創建一個基於DirectX和OpenGL的3D應用程序不是一件容易的事 API是專門針對硬體的,項目的開發工作不得不包括對特定GPU性能的優化, 使項目能夠充分發揮硬件的強大能力。 Stage3D比原生API更抽象也離特定硬體更遙遠一點,因此Stage3D更容易使用。 原先的2D畫面和Stage3D對象可以共存。

  8. 8. 基於多平台API,Stage3D無法應用當下最先進的3D圖形渲 染特性 各個不同的GPU可能有其擅長的優勢,這些將不會被使用 到 Stage3D著色器代碼設計的將是比較簡單的程序,而不是 面向更先進的硬件和Shader Model的編碼 在某些平台上可能無法正常運作,但即使無法使用GPU硬 件加速,還是可以使用軟件模式來渲染畫面。
  9. 9. Quad Texture
  10. 10. 很像卻不一樣 無法與原生的畫面物件混合使用 不論在影格、圖形渲染方式、碰 撞偵測方式、事件傳遞方式等, 其實與原生程式,在根本上是完 全不一樣的東西 原生的flash所產生的畫面會永遠 的被放在starling之上
  11. 11. test.png test.xml
  12. 12. TexturePacker http://www.codeandweb.com/texturepacker 可申請開發者版權:http://www.codeandweb.com/request-free-license Flash CC
  13. 13. 都是由一個Starling物件,來創建整個Starling世界 Starling物件裡包括: Stage Juggler nativeOverlay
  14. 14. DisplayObject是一切畫面物件的祖先,繼承於EventDispatcher
 
 
 
 
 
 
 
 
 
 在Starling世界裡面的MovieClip,是沒有辦法使用addChild的,它只能像是一個動 畫影片一樣的單純被播放、控制位置、旋轉、或偵測碰撞,而無法在MovieClip 裡面加入其他的MovieClip DisplayObject可偵測多點觸控,設定物件坐標、與不同層DisplayObjectContent的坐 標轉換功能 做動畫影⽚片的放物件的容器
  15. 15. 最簡單的使用範例
  16. 16. 在Starling裡的TextField可以用兩種方式去嵌入特殊字型
  17. 17. 也就是一般內嵌字型的方式,將.ttf的文字檔案直接用embed的方式嵌入swf裡
  18. 18. If you need speed or fancy font effects, use a bitmap font instead. That is a font that has its glyphs rendered to a texture atlas. To use it, first register the font with the method registerBitmapFont, and then pass the font name to the corresponding property of the text field.
  19. 19. Glyph Designer(適用於Mac)
 
 
 
 BMFont(適用於Windows)
  20. 20. 只有兩個狀態的圖檔,也就是upState與downState,而沒有over的狀 態。 disabled樣式可以經由alphaWhenDisabled的屬性去設定Disabled時的圖 檔透明度。 按下Button會觸發的事件是Event.TRIGGERED 若是要偵測是否碰到透明區塊,則要使用原生的BitmapData.hitTest
  21. 21. flatten屬性:開啟了flatten,可在播放動畫時更加的順暢,但所有之後對畫面的alpha、rotation和位置的 改變都無法在畫面上被呈現。 Sprite一個專門用來放許多其他元件的標準容器,它可被偵聽下面這些事件 Event.ADDED: the object was added to a parent. Event.ADDED_TO_STAGE: the object was added to a parent that is connected to the stage, thus becoming visible now. Event.REMOVED: the object was removed from a parent. Event.REMOVED_FROM_STAGE: the object was removed from a parent that is connected to the stage, thus becoming invisible now. KeyboardEvent.KEY_DOWN: 當按下按鍵時觸發 KeyboardEvent.KEY_UP: 當離開按鍵時觸發 EnterFrameEvent.ENTER_FRAME: 影格前進時觸發事件,根據frameRate的設定來決定一秒觸發幾次 Event.FLATTEN: 當開啟或關閉flatten功能時會觸發事件
  22. 22. A Quad represents a rectangle with a uniform color or a color gradient. 每一個端點都可以設定一個顏色,會呈現線性漸層。 要顯示一個線性的漸變色,需要把一個色值設置給 頂點0和頂點1,然後另一個顏色給頂點2和頂點3。 頂點位置是這樣安排的:
 
 

  23. 23. 一個圖片(Image)其實就是一個四邊形上面映射了一個紋理(Texture) Image相當於Flash的Bitmap類的Starling版本。但是Starling是用Texture來代替 BitmapData來為圖像提供像素數據。 要顯示一個Texture,需要把它映射到一個四邊形上,而這就是Image這個 類所實現的功能。 一個"Image"是繼承自"Quad"的,我們可以在Quad上設置顏色,對於每個 像素來說,最終的顏色是根據紋理的顏色和四邊形的顏色相乘而來的。 這樣您就可以很容易用Quad的顏色改變一個紋理的色調 在不改變任何四邊形的頂點坐標的情況下,在一個圖片的內部移動紋理。 用此功能,可以以一個非常有效的方式,創建一個矩形遮罩
  24. 24. 與原生的MovieClip的差異點 每一個MovieClip都可設定不同的fps 由一連串的連續圖檔組成 MovieClip裡面無法再addChild() 動畫效果必需由Juggler驅動 沒有frameLabel的概念 當isComplete等於true時會自動將其於Juggler裡移除 setFrameDuration():可以另外再設定某個影格的停留時間 setFrameSound():可以設定播放到某影格時播放一個聲音檔
  25. 25. Juggle是個簡單的Class,用來控制動畫的進行。 他負責管理經由add()加進來的實現IAnimatable介面的物件, 然後當Juggler的advanceTime()被呼叫時,它會負責去呼叫 這些IAnimatable的advanceTime(),讓動畫進行下去 當某個IAnimatable到達complete狀態時,則會被Juggler踢出 去 Starling class裡有個預設的juggler,當Starling.current正在運 行時,Starling.juggler在每個frame時會自動被呼叫 advanceTime()
  26. 26. var touch:Touch = e.getTouch(this, TouchPhase.BEGAN);
 //針對BEGAN處理 var touch:Touch = e.getTouch(this, TouchPhase.ENDED);
 //針對ENDED處理 if (touch.tapCount == 2) 
 //使用touch.tapCount可知道短時間內點了幾次 var touch:Touch = e.getTouch(this, TouchPhase.MOVED); 
 //針對MOVE處理 var touch:Touch = e.getTouch(this, TouchPhase.HOVER);
 //針對HOVER處理
  27. 27. 要使用Multi-Touch,要先設定Starling Class的靜態屬性:
 Starling.multitouchEnabled = true; 在電腦上用滑鼠模擬Multi-Touch的功能,在我們產生Starling實體之 後,設定:
 _starling.simulateMultitouch = true; 取出多個touches的資訊
 var touches:Vector.<Touch> = e.getTouches(this);
  28. 28. Hungry Hero Game
 http://www.hungryherogame.com/ 一起來玩鳥 Starling Framework
 http://grayliao.blogspot.tw/2011/11/starling-framework0.html Tutorials « Hemanth Sharma
 http://www.hsharma.com/tutorials/ Starling wiki
 http://wiki.starling-framework.org/manual/start API reference
 http://doc.starling-framework.org/core/

×