html5变换图层色,用HTML5实现色彩循环（Old School Color Cycling with HTML5）

还有人记得90年代的色彩循环(Color cycling)么？这是8位视频游戏时代常用的技术，通过色板的移位实现有趣的动画效果。那时的显卡一次只能渲染256个颜色，所以可以把颜色排布成色板。但是程序员可以随意调整色板，屏幕上的颜色会迅速做出相应改变。这个技术效率很高，反应很快。由此开始了色彩循环的时代。

多数游戏使用这个技术来展现水、火或者其他动画的环境效果。不过遗憾的是，很多画面看起来很糟糕。因为设计者只是把场景描绘了一次，就拣选了一些颜色让它们循环变动。从技术上讲，这确实是“色彩循环”，但是效果确实不咋地。就好像这个游戏(《S.P.Y. - 特别计划Y(S.P.Y.: Special Project Y)》)里面的水，你可以看看。

然而，有一名艺术家把这个技术应用到了一个全新的高度，创造出令人叹为观止的色彩循环场景。马克·J·法拉利(Mark J. Ferrari)，他绘制了卢卡斯(LucasArts)的《LOOM》中所有的原创背景，以及《猴岛的秘密(The Secret of Monkey Island)》中的部分场景。通过他所独创的色彩循环方式，营造出了让你难以置信的环境效果。有雨、雪、海浪、烟雾、云、烟、瀑布、溪流、湖泊还有好多好多。所有这些效果都仅仅是一张256色板的平面图像完成的，没有使用任何图层或alpha通道。

遗憾的是，在90年代末，色彩循环已经用不上了，被3D渲染、32位“真彩色”这样的新技术所替代。然而，最近几年，随着手游和页游的兴起，2D像素风格又有卷土重来之势。我觉得是时候该利用 HTML5 的 Canvas元素 这样的开放网络技术再次引入色彩循环了。

这是一个全8位色彩循环引擎的演示，在 HTML5 Canvas 中实时渲染。我使用了马克原创的35张640x480的杰作，相应的添加了一些环境音效。希望你能喜欢，源代码是免费的，你可以应用在自己的项目中(文末有下载链接)。

马克·J·法拉利 对常见问题的回答

马克慷慨的拿出了一些时间来回答关于他色彩循环作品的常见问题。请前往这里阅读：《Q & A with Mark J. Ferrari》

混合移位循环(BlendShift Cycling)

熟悉色彩循环的朋友可能会发现这个引擎的色板有点儿“不一样”。许多年前我就有一个想法，通过将一个颜色“淡入”到另一个颜色来提升色彩循环的效果。这将在保持速度不变的情况下产生出一堆中间帧，使动画更加流畅，并令人产生场景中有更多颜色的错觉。我叫它“混合移位循环”。可能有人在我之前发明了它，但我本人真的没见过。

通过以下操作，你可以真切的看到这种效果。放慢动画循环的速度(点击“Show Options”，然后选择 ¼ 或者 ½)，再通过点击“CYCLE MODE”的“Standard”或“Blend”来切换混合移位(BlendShift)的开关。有没有看到不同？Standard模式下，颜色的移位是一步一步的，但使用混合移位的情况下整个过程是平滑的。如果我20年前就发明了这个把戏，那可就牛逼了。

优化

为了在浏览器中获得高速的帧率，我在引擎的实现中遇到点儿小麻烦。 在32位RGB的画布上渲染一张640x480 索引图像，相当于每帧要扫描并绘制30万7千200个像素。这个数组非常庞大，通过JavaScript遍历它，有些浏览器根本跟不上。为了克服这一点，我在图片第一次载入的时候对其预处理，提取出那些会涉及到动画的像素(就是色板中循环的那部分)。这些像素的X/Y偏移量都保存在一个独立的小数组中，然后只需要刷新这部分会变动的像素就行了。优化的效果很明显，在我的 iPhone 3GS 和 iPad 上跑起来的速度我很满意。

Amiga IFF / LBM 文件

马克的这些场景都是在DOS下用Deluxe Paint创建的Amiga IFF / ILBM文件。为此，我不得不写一个转换程序，分析这些文件，提取出像素、色板以及所有的动画信息，转而输出成JavaScript可以理解的数据。数据以JSON格式保存，通过gzip压缩交付给浏览器处理。最终每个场景的数据是100K左右，还不错(我配的多数音效都比这个大，呵呵)。至于那个转换程序，我是用C++写的，你要是感兴趣，可以在源码包里找到它。

浏览器支持情况

色彩循环引擎在如下浏览器/平台的表现情况：

Safari 4+ Mac/PC完美运行

Chrome 5+ Mac/PC完美运行

Firefox 3.5+ Mac/PC完美运行

Opera 10.6+ Mac/PC完美运行

iPhone with iOS 4+完美运行

iPad with iOS 3.2+完美运行

Internet Explorer 6, 7, 8无法工作

Internet Explorer 9完美运行

源代码下载

这是我的色彩循环引擎的 JavaScript 和 C++ 源码。遵照 LGPL v3.0 协议发行。压缩包中有一张测试用的 LBM 图像，已经转换成JSON格式。该插画是有版权的，不允许随意使用。