LimeJS指南6

# 绘图引擎

LimeJS的一个最重要的特性就是支持不同的渲染引擎。也许不应该叫LimeJS一个Canvas 游戏框架，因为Canvas只是它所支持的一个较低的技术。有画图能力的较低的方法集中在在命名空间*lime.Renderer*。不同的渲染可以在任何时候通过方法*setRenderer(renderer)*在任何Node之间切换。现在LimeJS中支持的渲染有*lime.Renderer.DOM*和*lime.Renderer.CANVAS*。

## 为什么需要许多渲染

也许你的第一个想法是Canvas如此酷并且有它一切都能搞定。也许某天我们会这么想，但是我们至少现在不这样。Canvas很好，而且它允许你做几乎任何事，但是由于它是基于位图，天生不能适合所有东西。你可能见过关于SVG和Canvas什么时候更合适的对比，对于DOM和Canvas也有可能。现在也没有一个稳定的浏览器具有硬件加速的Canvas工具。在移动设备中，这是很重要的，因为移动设备的CPU不如PC那么快速。

在HTML5中有很多革新的技术，Canvas只是其中一个。圆角、变形、移动和渐变是html5加入DOM的几样很酷的东西。每个设备/浏览器有一点不同的工具（表现明智，和有时API明智）。这的确是一件很好的事情，因为它帮助网页向前进行得更加快速，并使我们不被限制于一些固定的卡顿。但是当你想要为许多设备开发你的游戏而时限快到了的时候，你需要担心一些事情。比如说，现在的iOS4.2版本具备的Canvas元素的工具非常慢，另外它有GPU加速CSS变形。另一方面现在的非测试版本的PC浏览器没有硬件加速的CSS变形，但是因为它们有快速的CPU，它们可以用Canvas快速绘画。由于CSS变形和Canvas是非常不同的技术，如果你想要支持它们两个，你可能必须特意做两个游戏。幸好你有LimeJS让你以一条线做这件事。

## lime.Renderer.DOM

DOM渲染器渲染node，它像DIV元素一样画图，并且通过脚本改变它们的CSS属性以使它们看起来像是想要的效果。DOM渲染器是所有支持它的元素的默认的渲染器。

你应该经常使用DOM渲染器，当:

- 在iOS上
- node树相对简单而且不深
- 你的元素经常改变/进行动画
- 你的元素占据屏幕的大部分

Director和Scene的实例总是使用DOM渲染器，而且不能被切换成Canvas。

## lime.Renderer.CANVAS

Canvas渲染器制作单个Canvas元素，并且使用Canvas绘画方法画进它的2D内容。如果元素有子元素，它们将被画入同一个Canvas。如果下一帧任何元素改变，整个Canvas将被重新画一遍。如果Node以Canvas渲染器渲染的，你不能将纯DOM元素作为子元素加入这个Node中。

你应该经常使用Canvas渲染器，当：

- 你有一个相对稳定的树
- DOM渲染器的结果不令人满意
- 你能看到多组元素经常一起改变
- 你的设备有快速的CPU或者浏览器有硬件加速的Canvas工具
- 如果你使用IE9 beta（这还没有CSS变形）

多边形总是以Canvas渲染器绘制，行为无法以CSS制作。

## 将来的兼容性

关于为什么这个方法很重要还有一点。网页正快速前进，而且没有办法看到近几年里将会发生什么。可能会出现比现在更加好的技术。不看这一层面，我们可以在它们到来时就实施它们。游戏开发者不需要改变任何东西，仍然使用老版本浏览器/设备的用户能够继续使用老版本。

我们已经决定将来会有一个WebGL渲染器。它将特别类似于Canvas工具，但是东西将被画成WebGL绘画内容。所有困难的着色材料将被你遗弃。你只需要为你现在的元素调用*setRenderer()*方法。因为发展是对所有人敞开的，如果有必要，某些人也能制作一个SVG渲染器或者甚至VML。