追求速度的渲染

2011-10-06 17:34

看了下 Lee 的 FOTB 演讲幻灯片 - Render for Speed，这个演讲涵盖了业界 Flash 开发者所采用的大部分渲染技术。因为我没有听到他的演讲，只好适当地补充说明（蓝字部分）

原文：Render for Speed
作者：Lee Brimelow
翻译及整理：dreamana.com

传统的渲染 (Traditional rendering)
位块传输技术 (Blitting)
全局位块传输 (Full stage blitting)
局部位块传输 (Partical blitting)
脏位块传输 (Dirty blitting)
位图骨架 (Bitmap armatures)
影片剪辑缓存 (MovieClip caching)
移动设备渲染 (Mobile rendering)
Stage3D
新 2D 框架

【免责声明】没有完美的渲染方式。选择合适的一个来试验，也可以基于提到的各种方式。

一、Flash 渲染方式

传统渲染

这里的“传统渲染”是指：将 FlashIDE 制作的图形、动画，以传统的 MovieClip 对象作为“容器”，不经过额外的处理而直接添加到显示列表中进行渲染

优点

开发最容易
运行时矢量可以平滑缩放
非动画的矢量元件 (MovieClip/Sprite) 可以使用“缓存成位图”(cacheAsBitmap)

缺点

MovieClip 和 Sprite 需要很多开销
大量动画对象时会变慢
占用更多内存

[提示] 只要适当运用 cacheAsBitmap，大部分 Flash 游戏可以跑得很好。

二、位块传输 (Blitting)

Blitting 术语来自于 BitBLT 为 Xerox Alto 计算机日常中创建。BitBLT 发音为“bit blit”，主张 bit-block (image) transfer 图像基于位块传输，是一种采用数张位图并合并成一张位图的技术。在 Flash Player 中复制位图像素到一张渲染图中比分别地渲染每个 DisplayObject 更为快速。

精灵表 (Sprite Sheet)

为了简化精灵管理，更重要的是为了改善性能，通常在一个图像里存储一个以上的精灵。包含一个以上精灵的图像就叫做精灵表。你可能会看到有关精灵表的另外一个不同的术语，在处理 OpenGL ES 时，精灵表通常被称为纹理组合 (Texture Atlas)

位块传输解说

步骤

创建预渲染的动画用精灵表
添加单个位图数据画布（BitmapData canvas）到显示列表中
复制背景到画布或者擦除
复制任意游戏精灵到画布
在游戏主循环中重复 3 到 4 步

[提示] 在多次调用 copyPixel 之前务必使用 bitmapData.lock() 以方式不必要的更新，然后以 bitmapData.unlock() 结束

copyPixels vs draw

copyPixels 只能简单地将一个矩形区域的像素复制到另一处，但不能实现其他旋转、缩放及颜色变化等操作，因此是更为快速的 API。如果想以速度最优但又想使用旋转、缩放等操作，可以先对要复制的图像进行预处理，比如预先生成一个原图像旋转了各种角度的精灵表。

更好性能

bitmapData.copyPixels(spritesheet, spriteRect, new Point())

更灵活性

bitmapData.draw(spritesheet, matrix, colortransform, blendmode, rect);

(Sprite 也可以使用变换和混合模式)

[提示] 如果你的游戏是全部使用位块传输，你可以设置舞台质量为低。

全局位块传输

单 bitmapData 画布在显示列表上
所有精灵都是传输到这张单画布上
呈现大量动画精灵时有优势

[HTML5] 使用 HTML5 的 canvas 创建游戏同样也是位块传输技术。canvas 标签类似 Flash 的 bitmapData 对象

脏位块传输

储存上一帧的矩形
然后只重绘背景的脏区域

局部块传输

每一个精灵传输到独立的 bitmapData 里
Bitmap 对象可以容易变换（transform）
灵活性和性能之间可以很好地平衡

位图骨架

为了不需要每一帧都给动画模型绘制单独的画面，骨架模型是画好一系列身体部分，然后就像你的骨架一样移动关联的各部分。

选择哪一种技术？

全局位块传输 -当需要频繁重绘整个画面的时是最好的选择。比如 Canabalt 游戏中的快速运动卷轴（背景）。
局部位块传输 -当不需要频繁重绘整个画面的时是最好的选择。而且可以更容易做变换不需要预旋转的精灵表。
骨架模型 -需要大量自定义化角色时是好的选择。PRG 游戏就是其中的例子。

运行时 MovieClip 缓存

在运行时对 MovieClip 预处理成精灵表。小道消息，未来 FlashIDE 将支持导出精灵表格式。

var s:snake = new snake();
var frame:Array = [];
var totalFrames:int = s.totalFrames;
for(var i:int=1; i {
    var bmd:BitmapData = new BitmapData(s.width, s.height);
    s.gotoAndStop(i);
    bmd.draw(s);
    frame.push(bmd);
}

基于位块传输的游戏引擎（基于 Flash 平台）

Flixel

FlashPunk

PushButtonEngine

…

建议选择一个进行了解

三、AIR 移动设备渲染

CPU 模式

GPU 模式

…

移动平台的应用开发更需要注意优化，适当运用上面提到的一些技巧可以同样可以得到一定的效率提升。

后面这些都是基于新的低层 API 的 GPU 加速渲染方式，现在就先不补充了，今后会深入探讨

四、Stage3D 渲染

…

五、基于 Stage3D 的 2D 框架

…