许多类型的游戏，用户体验都依赖于终端可拥有的屏幕像素和移动物体有多快。当让大量的DisplayObject对象动起来时，如MovieClip或Sprite对象，Adobe Flash Player可能在表现上会大大折扣。Flash Player必须遍历显示对象树并为每个基于向量的DisplayObject计算渲染输出，这样会消耗CPU周期成为真正的瓶颈，尤其是低端机。
许多屏幕动画游戏都是预先载入一张位图，这种技术被称为blitting(块传输)。块传输虽不能解决所有性能问题，但它能使动画运行平滑，统一大多数机器上动画帧频。Blitting术语来自于BitBLT为Xerox Alto计算机日常中创建。BitBLT发音为“bit blit”，主张bit-block (image) transfer图像基于位块传输，是一种采用数张位图并合并成一张位图的技术。在Flash Player中复制位图像素到一张渲染图中比分别地渲染每个DisplayObject更为快速。
在本文中，我描述了软件位块传输技术并提供示例代码，因此你可以在ActionScript中应用它。
要求
为了满足本文条件，你需要下列软件和文件。
预备知识
本文假定你已熟悉Flash Builder 4 和 ActionScript 3项目工作的知识。
介绍sprite sheet
一个游戏由许多图形元件组成，例如赛道上的车或森林中的一棵树。在本文中，这些元件都是位图。一组位图放在一个单独的图像文件中称为sprite sheet。例如，一个sprite sheet可能包含一个角色行走动画的所有帧。这个词衍生于sprite，在计算机图形世界中，指的是一张图像或一个大场景中集成的动画。虽然位块传输技术可以使用不同来源的位图数据，但在本文中重点放在sprite sheet。
一个sprite sheet由什么构成？
一个sprite sheet可以对不同大小的位图进行组合。将所有图形元素组装到一个大的图像文件中会减少加载时间（打开和读取一个包含100帧的较大文件比打开读取100个小文件更为快速）并提供压缩的好处。特别是sprite sheet持有同样大小形成一个序列的位图或围绕一个特定游戏元素动画。例如，本文中使用的sprite sheet有五列四行，每格40*40像素，每个都包含着一个brown collector褐色元素（见图1）。
图1 sprite sheet示例显示了20个单元格，每格为40*40像素
设置ActionScript项目
在你运行示例代码前，你将需要在Flash Builder 4按照以下步骤设置项目。
1. 下载并解压示例文件
2. 选择File > New > ActionScript Project来创建项目
3. 输入ActionScriptBlitting作为项目名称并点击Finish
4. 从示例文件中复制下列文件和文件到项目默认包中：ActionScriptBlittingPart1.as, ActionScriptBlittingPart2.as, ActionScriptBlittingPart3.as, ActionScriptBlittingPart4.as和spritesheets。Spritesheets文件夹中包含了用于ActionScript示例的PNG文件。
5. 在Package Explorer中，右键点击ActionScriptBlitting项目在弹出菜单上选择Properties。
6. 在Properties属性对话框中点击ActionScript Applications。
7. 点击Add，选择ActionScriptBlittingPart1.as，并点击OK。
8. 将ActionScriptBlittingPart2.as，ActionScriptBlittingPart3.as, 和 ActionScriptBlittingPart4.as重复第7步。
9. 点击OK
现在Flash Builder 4中示例代码就设置好了，你就可以运行该示例。
用ActionScript嵌入一个sprite sheet
在ActionScript中你可以通过使用Embed元数据标签嵌入图像。（更多信息请查看Embedding metadata with Flash）一旦它们被嵌入，你可创建类的实例并附加到显示列表，如ActionScriptBlittingPart1.as：
- ActionScriptBlittingPart1.as
-
- package
- {
- import flash.display.Sprite;
- [SWF(width=480, height=320, frameRate=24, backgroundColor=0xE2E2E2)]
- public class ActionScriptBlittingPart1 extends Sprite
- {
- public function ActionScriptBlittingPart1()
- {
- addChild(new BrownCollector());
- }
- [Embed(source="spritesheets/browncollector.png")]
- public var BrownCollector:Class;
- }
- }
复制代码
要运行第一个示例，请参照下列步骤：
在Package Explorer中，在ActionScriptBlittingPart1.as文件上点击右键选择Run Application。
当浏览器打开时，你会看到所有单元格都有PNG图像（browncollector.png），效果见图1.
关闭浏览器窗口。
Blitting a sprite sheet
第二步，你将要用到Flash Player API的Bitmap 和 BitmapData，从sprite sheet复制一个单元格（或帧）到屏幕上，而这个操作可以通过BitmapData.copyPixels()方法来完成，复制输入位图数据的像素到正在制作的位图实例上。在ActionScript中纳入blitting，copyPixels()方法还提供参数来定义要复制输入位图的区域以及如何定义和合并alpha像素。
- ActionScriptBlittingPart2.as
-
- package
- {
- import flash.display.Bitmap;
- import flash.display.BitmapData;
- import flash.display.Sprite;
- import flash.geom.Point;
- import flash.geom.Rectangle;
- [SWF(width=480, height=320, frameRate=24, backgroundColor=0xE2E2E2)]
- public class ActionScriptBlittingPart2 extends Sprite
- {
- public function ActionScriptBlittingPart2()
- {
- // Create input bitmap instance
- spritesheet = (new BrownCollector() as Bitmap).bitmapData;
-
- // Add a Bitmap to the display list that will copyPixels() to.
- canvas = new BitmapData(480, 320, true, 0xFFFFFF);
- addChild(new Bitmap(canvas));
- rect = new Rectangle(0, 0, 40,40); // 1st Tile
- //** Section 1 ** //
- // rect = new Rectangle(40, 0, 40, 40); // 2nd Tile
- // rect = new Rectangle(80, 0, 40, 40); // 3rd Tile
- // ...
- // rect = new Rectangle(160, 120, 40, 40); // 20th Tile
- canvas.copyPixels(spritesheet, rect, new Point(0, 0));
- //** END Section 1 **/
-
- /** Section 2 ** //
- for (var i:int = 0; i < 20; i++)
- {
- rect.x = (i % 5) * 40;
- rect.y = int(i / 5) * 40;
- canvas.copyPixels(spritesheet, rect, new Point(i*10, 0));
- // Section 3:
- // canvas.copyPixels(spritesheet, rect,
- // new Point(i*10, 0), null, null, true);
- }
- //** END Section 2 **/
- }
-
- [Embed(source="spritesheets/browncollector.png")]
- public var BrownCollector:Class;
- public var canvas:BitmapData;
- public var spritesheet:BitmapData;
- public var rect:Rectangle;
- }
- }
复制代码
在Package Explorer中的ActionScriptBlittingPart2.as文件上点击右键并选择Run Application。你将会看到来自sprite sheet的第一个单无格显示在浏览器中（见图2）。
图2 ActionScriptBlittingPart2输出（利用Section 1代码） |