用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格式。该插画是有版权的,不允许随意使用。