引进Starling（一）

作者的话：本系列为Starling的引进教程，原文《Introducing Starling - rev 1.2.6》。前两章系转帖，原文地址：http://www.adobe.com/cn/devnet/flashplayer/articles/introducing_Starling.html。从第三部分起，为本人独立翻译，争取一周内发表完成。

什么是Starling

Starling是一个使用ActionScript 3开发的，基于Stage3D API的面向2D图像的开发框架。Starling主要是为游戏开发而设计，但是它也同样可以应用于其他的用况。Stargling可以使你很快速的编写的GPU加速应用程序，而无需接触底层的Stage3D API。

为什么选择Starling

大部分程序员想利用GPU加速（通过Stage 3D）而又不想编写如此高级的框架以及深入底层的Stage3D API。Starling被设计成完全遵循 ActionScript API 规则并将低级 Stage3D APIs 的复杂性抽象化以及允许每一个人方便和直观的进行编程。

很显然Starling是面向ActionScript3开发人员的，特别是那些2D游戏开发人员；当然你需要对AS3有基础的理解。通过Starling的设计，它也同样可以被应用于其他的用例，例如UI编程。这说明，任何一个东西都可以被设计的尽可能直观，如同JAVA和Net的程序员总是希望快速的得到代码异常终止的提示。

哲学

直观

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）：

图1. Stage3D (Molehill) 分层位于 Starling 之上 

Starling 重新创建了很多 Flash 开发人员熟知的 APIs 。 下图列举了通过 Starling 暴露的图形元素 APIs（参见图2）。

图2. Starling支持DisplayObject继承

在 3D GPU APIs 基础上可以创建 2D 内容，这看起来有点奇怪。 当涉及 Stage3D APIs 时，很多人认为这些 APIs 是严格地限制在 3D 内容中的。 实际上这是名称造成的误解：如果它叫做 Stage3D ，那么你怎么可以使用它创建 2D 元素呢？下图说明了关于使用 drawTriangles API 绘制 MovieClip 能力的问题（参见图3）。

图3. 可以使用 drawTriangles API 创建2D影片剪辑吗？ 

GPU 具有较高的效率并能快速地绘制三角形。 通过使用 drawTriangles API ，你可以绘制两个三角形，然后选取一种纹理并且使用UV映射将它应用到三角形中。 这样可以创建了一个带有纹理的四边形，它代表一个 sprite 。 通过更新每一个帧上的三角形的纹理，最后的结果就是一个 MovieClip 。

幸好我们没有必要通过这些细节使用 Starling 。 你只需要提供帧数，将它们提供给一个 Starling MovieClip ，这就是所有需要做的（参见图4）。

图4. 使用 drawTriangles API 和一个带有纹理的四边形，你可以创建一个2D图形 

为了更好地了解 Starling 如何降低复杂性，检查你必须写入的代码以便于用低级的 Stage3D APIs 显示简单的带有纹理的四边形。

// create the vertices
var 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 vertices
var vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(4, 5);

// upload the vertices
vertexbuffer.uploadFromVector(vertices, 0, 4);

// create the buffer to upload the indices
var indexbuffer:IndexBuffer3D = context3D.createIndexBuffer(6);

// upload the indices
indexbuffer.uploadFromVector (Vector.<uint>([0, 1, 2, 2, 3, 0]), 0, 6);

// create the bitmap texture
var bitmap:Bitmap = new TextureBitmap();

// create the texture bitmap to upload the bitmap
var texture:Texture = context3D.createTexture(bitmap.bitmapData.width,

bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false);

// upload the bitmap

texture.uploadFromBitmapData(bitmap.bitmapData);

// create the mini assembler
var vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();

// assemble the vertex shader
vertexShaderAssembler.assemble( Context3DProgramType.VERTEX,

"m44 op, va0, vc0\n" + // pos to clipspace
"mov v0, va1" // copy uv
);

// assemble the fragment shader
fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT,
"tex ft1, v0, fs0 <2d,linear, nomip>;\n" +
"mov oc, ft1"
);

// create the shader program
var program:Program3D = context3D.createProgram();

// upload the vertex and fragment shaders
program.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode);

// clear the buffer
context3D.clear ( 1, 1, 1, 1 );

// set the vertex buffer
context3D.setVertexBufferAt(0, vertexbuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
context3D.setVertexBufferAt(1, vertexbuffer, 3, Context3DVertexBufferFormat.FLOAT_2);

// set the texture
context3D.setTextureAt( 0, texture );

// set the shaders program
context3D.setProgram( program );

// create a 3D matrix 
var m:Matrix3D = new Matrix3D();

// apply rotation to the matrix to rotate vertices along the Z axis
m.appendRotation(getTimer()/50, Vector3D.Z_AXIS);

// set the program constants (matrix here)
context3D.setProgramConstantsFromMatrix(Co
ntext3DProgramType.VERTEX, 0, m, true);

// draw the triangles
context3D.drawTriangles( indexBuffer);

// present the pixels to the screen
context3D.present();

上述范例中的代码创建了一个正方形的2D实例（参见图5）：

图5. 使用drawTriangles API 和一个带有纹理的四边形创建一个2D对象的结果

上述范例中所示的代码无疑是非常复杂的。 那是访问低级 APIs 需要付出的代价。 从另一方面说，你可以控制很多方面，但是它需要大量的代码来设置一切。

通过 Starling，你可以编写如下代码替换上述代码：

// create a Texture object out of an embedded bitmap
var texture:Texture = Texture.fromBitmap ( new embeddedBitmap() );

// create an Image object our of the Texture
var image:Image = new Image(texture);

// set the properties
quad.pivotX = 50;
quad.pivotY = 50;
quad.x = 300;
quad.y = 150;
quad.rotation = Math.PI/4;

// display it
addChild(quad);

作为一个熟知如何使用 Flash APIs 的 ActionScript 3 开发人员，你可以立即使用这些已暴露的 APIs 开始工作，与此同时 Stage3D APIs 的所有复杂部分都可以在后台进行处理。

如果你使用重绘区域（redraw regions）功能进行试验，在 Starling 将在 Stage3D 上，而不是在预期的传统显示列表上渲染一切。 如下的截图说明了这种行为。 该四边形在每一帧上旋转，重绘区域（redraw regions）只显示FTP计数器，而不是 Stage3D 的内容（参见图6）：

图6. 使用Stage3D渲染内容的范例

需要记住在使用 Stage 3D 构架时，通过 GPU 可以完全地渲染并合成相应的内容。 因此，在 GPU 上运行的用于显示列表的重绘区域（redraw regions）功能不能使用。

分层限制

当你使用 Starling（以及Stage 3D）时，记住开发内容有一个限制。 正如之前所述，Stage3D 完全是嵌入在 Flash Player 中的全新的渲染构架。 GPU 表层放置在显示列表之下，这意味着任何在显示列表中运行的内容将放置到 Stage3D 内容之上。 在编写这篇文章时，运行在显示列表里的内容仍然不能放置在 Stage3D 分层之下（参见图7）。

图7. 使用Stage3D渲染内容的堆叠顺序

此外，还要注意 Stage3D 对象不是透明的。 如果这是可能的，那么你可以使用 Stage Video技术（Flash Player 10.2引入的功能）播放视频，同时可以用通过 Stage3D 渲染的内容覆盖视频。 希望未来的 Flash Player 版本支持这一功能。