追求速度的渲染

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

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

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

一、Flash 渲染方式

传统渲染

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

优点

缺点

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

二、位块传输 (Blitting)

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

精灵表 (Sprite Sheet)

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

位块传输解说

步骤

  1. 创建预渲染的动画用精灵表
  2. 添加单个位图数据画布(BitmapData canvas)到显示列表中
  3. 复制背景到画布或者擦除
  4. 复制任意游戏精灵到画布
  5. 在游戏主循环中重复 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 也可以使用变换和混合模式)

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

全局位块传输

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

脏位块传输

局部块传输

位图骨架

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

选择哪一种技术?

运行时 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 框架