【轉】Starling 2D框架簡介(一)

本系列是對Introducing Starling pdf的翻譯,下文是對adobe開發人員中心的一片日誌的轉載,地址爲http://www.adobe.com/cn/devnet/flashplayer/articles/introducing_Starling.html

Starling 是在 Stage3D APIs 基礎上開發的一種 ActionScript 3 2D 框架(可用於 Flash Player 11 和 Adobe AIR 3的桌面)。 Starling 是爲遊戲開發設計的,但是你可以將它應用於很多其它的應用程序。 在不必涉及低級 Stage3D APIs 情況下,Starling 使得編寫具有快速 GPU 加速功能的應用程序成爲可能。

大多數 Flash 開發人員希望利用這種能力提高 GPU 的加速功能(通過使用 Stage3D 技術),而不必編寫如此高級的框架和深入研究低級的 Stage3D APIs。 Starling 是完全基於 Flash Player APIs 而設計,並將 Stage3D(Molehill)複雜性抽象化。 因此每個人都能看到直觀的程序。

Starling 是爲 ActionScript 3開發人員而設計,尤其是這些涉及2D遊戲開發的人員。 在使用 ActionScript 3 之前,你必須基本瞭解它。由於 Starling 輕便、靈活並易於使用,你也可以將它應用於其它項目需求,例如 UI 編程。 這種框架要求設計得越直觀越好,因此任何 Java 或者.Net 開發人員都可以馬上開始使用它。

Starling使用概述

Starling 直觀並易於使用。Flash 和 Flex 開發人員能夠快速地瞭解它,因爲它遵循大多數 ActionScript 規則並將低級 Stage3D APIs 的複雜性抽象化。Starling 使用熟知的概念,例如DOM顯示列表、事件模型以及熟知的如 MovieClip、Sprite、TextField 等APIs,而不是依靠諸如頂點緩衝(vertices buffer)、透視矩陣(perspective matrices)、着色程序(shader programs)和組合字節碼(assembly bytecode)進行編碼。

Starling在很多領域都很輕便。 類的數量是有限的(大概有80k的代碼)。 除了Flash Player 11 或者 AIR 3(以及在未來的版本中使用的移動支持)之外,它沒有外部依賴。 這些因素使得你的應用程序很小並使你的工作流程簡單。

Starling能夠免費使用並富有朝氣。 它根據 Simplified BSD 許可獲得授權,因此你可以免費地使用它,即便是在商業應用程序中也是如此。 我們每天都在使用它並且我們依靠一個活躍的團隊不斷地完善它。

在後臺操作中,Starling 使用 Stage3D APIs —它們是在桌面上基於 OpenGL 和 DirectX ,在移動設備上基於 OpenGL ES2而運行的低級的 GPU APIs。 需要重點注意的是,Starling 是 Sparrow 的 ActionScript 3 端口,它等同於基於 OpenGL ES2 APIs 的ISO庫(參見圖1):

Starling 2D框架簡介(一) - 第1張  | 長流技術

圖1. Stage3D (Molehill) 分層位於 Starling 之上

 

Starling 重新創建了很多 Flash 開發人員熟知的 APIs 。 下圖列舉了通過 Starling 暴露的圖形元素 APIs(參見圖2)。

 

Starling 2D框架簡介(一) - 第2張  | 長流技術

圖2. Starling支持DisplayObject繼承

 

在 3D GPU APIs 基礎上可以創建 2D 內容,這看起來有點奇怪。 當涉及 Stage3D APIs 時,很多人認爲這些 APIs 是嚴格地限制在 3D 內容中的。 實際上這是名稱造成的誤解:如果它叫做 Stage3D ,那麼你怎麼可以使用它創建 2D 元素呢?下圖說明了關於使用 drawTriangles API 繪製 MovieClip 能力的問題(參見圖3)。

 

Starling 2D框架簡介(一) - 第3張  | 長流技術

圖3. 可以使用 drawTriangles API 創建2D影片剪輯嗎?

 

GPU 具有較高的效率並能快速地繪製三角形。 通過使用 drawTriangles API ,你可以繪製兩個三角形,然後選取一種紋理並且使用UV映射將它應用到三角形中。 這樣可以創建了一個帶有紋理的四邊形,它代表一個 sprite 。 通過更新每一個幀上的三角形的紋理,最後的結果就是一個 MovieClip 。

幸好我們沒有必要通過這些細節使用 Starling 。 你只需要提供幀數,將它們提供給一個 Starling MovieClip ,這就是所有需要做的(參見圖4)。

 

Starling 2D框架簡介(一) - 第4張  | 長流技術

圖4. 使用 drawTriangles API 和一個帶有紋理的四邊形,你可以創建一個2D圖形

 

爲了更好地瞭解 Starling 如何降低複雜性,檢查你必須寫入的代碼以便於用低級的 Stage3D APIs 顯示簡單的帶有紋理的四邊形。


// create the verticesvar vertices:Vector.<Number> = Vector.<Number>([-0.5,-0.5,0, 0, 0, // x, y, z, u, v-0.5, 0.5, 0, 0, 1,0.5, 0.5, 0, 1, 1,0.5, -0.5, 0, 1, 0]); 
// create the buffer to upload the verticesvar vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(4, 5); 
// upload the verticesvertexbuffer.uploadFromVector(vertices, 0, 4); 
// create the buffer to upload the indicesvar indexbuffer:IndexBuffer3D = context3D.createIndexBuffer(6); 
// upload the indicesindexbuffer.uploadFromVector (Vector.<uint>([0, 1, 2, 2, 3, 0]), 0, 6); 
// create the bitmap texturevar bitmap:Bitmap = new TextureBitmap(); 
// create the texture bitmap to upload the bitmapvar texture:Texture = context3D.createTexture(bitmap.bitmapData.width,
 
bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false); 
// upload the bitmap texture.uploadFromBitmapData(bitmap.bitmapData); 
// create the mini assemblervar vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler(); 
// assemble the vertex shadervertexShaderAssembler.assemble( Context3DProgramType.VERTEX,"m44 op, va0, vc0\n" + // pos to clipspace"mov v0, va1" // copy uv); 
// assemble the fragment shaderfragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT,"tex ft1, v0, fs0 <2d,linear, nomip>;\n" +"mov oc, ft1"); 
// create the shader programvar program:Program3D = context3D.createProgram(); 
// upload the vertex and fragment shadersprogram.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode); 
// clear the buffercontext3D.clear ( 1, 1, 1, 1 ); 
// set the vertex buffercontext3D.setVertexBufferAt(0, vertexbuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
context3D.setVertexBufferAt(1, vertexbuffer, 3, Context3DVertexBufferFormat.FLOAT_2); 
// set the texturecontext3D.setTextureAt( 0, texture ); 
// set the shaders programcontext3D.setProgram( program ); 
// create a 3D matrix var m:Matrix3D = new Matrix3D(); 
// apply rotation to the matrix to rotate vertices along the Z axism.appendRotation(getTimer()/50, Vector3D.Z_AXIS); 
// set the program constants (matrix here)context3D.setProgramConstantsFromMatrix(Co
ntext3DProgramType.VERTEX, 0, m, true); 
// draw the trianglescontext3D.drawTriangles( indexBuffer); 
// present the pixels to the screencontext3D.present();


[轉載自]

http://www.techsite.cn/?p=49


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章