生活中保 发表于 2012-12-13 01:33

深入了解《Contre Jour》HTML5网页游戏制作过程


本文截取CJ游戏网站中(http://www.contrejour.ie/)幕后一栏的一部分，主要讲述了该游戏的制作的5大技术手段。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_000.jpg

场景的物理原理

Contre Jour 最鲜明的特色是让用户与周围环境互动并控制周围环境（而不是控制游戏中的英雄角色）。在 Contre Jour 中，玩家通过手指操作使粘土般的场景改变形状，这是在屏幕上移动该游戏的英雄角色 Petite 的主要方式之一。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_001.jpg

将场景逻辑引入 JavaScript 是一个巨大的挑战。对用户触摸场景时场景移动和改变形状的方式以及场景与游戏英雄的互动方式进行模拟，这需要大量的物理逻辑。为了渲染 Contre Jour 的粘土状场景，我们使用了 Box2D 的改进的 JavaScript 端口，这与 iOS 版本使用的物理引擎相同。这使得我们在管理物理对象、创建接点和解决冲突方面基本实现了功能上的一致性。

场景由许多不同的单个 Box2D 物体组成，从而具有了改变形状的能力。因为在场景中的每一个子物体间绘制了一条二次曲线，所以绘制场景时，视觉呈现非常流畅。这虽然能赋予场景粘土般的质感，但也让相关的渲染处理变得非常昂贵。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_002.jpg

Snot 纹理

绘制绳索结果是端口最复杂的部分之一，因为还没有一种方法能直观而可靠地将纹理通过画布 API 应用于几何图形，而这对于类似 OpenGL 的游戏语言来说，却很常见。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_003.jpg

与其他游戏不同，Contre Jour 的许多游戏元素采用画布 API（而非 sprite 图像）进行程序性绘制。例如，通过动态方式绘制的静态绳索包含条纹图案，这使得我们无法轻易地将纹理应用于其中。为绘制此类绳索，我们需要遵循以下步骤：

1.根据绳索的长度，将绳索分成多个部分。
2.将每部分分成两个单独的层 - 顶层和底层。
3.针对每部分的顶层和底层，根据该部分的点来计算单独的转换并根据相关值来绘制纹理相应半部分。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_004.jpg

粒子和游戏详情

因为填充屏幕的许多移动粒子都是动态的，所以我们必须仔细留意渲染效果。从编码的角度看，草、灰尘和苍蝇这些子画面需要频繁更新和绘制，以营造出游戏灵动的氛围。从而让玩家完全融入具有丰富细节的环境，获得充满惊喜的愉悦体验。但是，如果处理不当，这些细节最后可能会成为干扰因素，而非额外优势。

为解决 Contre Jour 的复杂环境带来的效果问题，我们将环境粒子保持在单独的画布上。此外，我们在粒子引擎中使用了基元丢帧逻辑以确保流畅的玩家体验。也就是说，粒子逐帧批量更新，但绘制粒子的频率要低得多。这样一来，我们既确保了 Contre Jour 充满丰富视觉细节的环境，又避免了效果上的影响。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_005.jpg

Snot

该游戏中的绳索（又名 snot）实际上是由四种不同的独立图像（头部、眼睛、眼球和尾巴）组成，这些图像通过至少四条 Bezier 曲线和两条直线相连接。在 Box2D 物理引擎中通过将物体与接点相连创建出这些 snot。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_006.jpg

绳索体创建后，我们需要对绳索体进行定位。借助这些位置，我们生成画布路径并基于物体位置为其添加二次曲线。路径生成完毕后，我们用纯黑色描边并执行填充操作。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_007.jpg

多层画布方法

如前所述，要想在基于浏览器的复杂游戏中获得良好效果，将多种游戏元素与多种 HTML5 画布元素融合是至关重要的。

http://img170.poco.cn/mypoco/myphoto/20121213/00/52905338201212130037553528206565364_008.jpg

借助此方法，我们能够有选择性地以不同的比率来更新和绘制屏幕的不同部分。更新和绘制场景的花费不低，所以我们需要对其渲染时间和方式进行谨慎选择。场景的每层在其所属的 HTML5 画布上渲染，与其他游戏元素分离。这样做很有必要，由此我们能通过跟踪每个场景部分并检测用户是否对其进行过改动来确保场景的改变不受游戏中其他元素的影响。

每当用户拖动或移动场景时，我们会标记受影响的场景层，并且只对该场景层的特定画布进行更新和重新绘制。如果我们将场景置于单一的 HTML5 画布，那么场景的持续渲染将会使效果差到无法接受的程度。如果想了解如何在复杂场景中实现优质效果，您可以参阅题为画布效果的文章。

提示：并不是所有的游戏元素都需要以相同的频率进行更新和绘制。通过将游戏的各部分分散于多层画布，您可以更加轻松地在游戏循环中以不同的频率绘制大量元素。但也不能太过极端。如果您将太多的画布相互重叠，那么效果会受到影响。

看完这些你了解到多少，又启发了多少呢？

红色魔法书 发表于 2012-12-13 21:07

制作非常的复杂，难怪会有这么精彩的游戏让我们玩，太佩服了

q5862587 发表于 2012-12-15 09:11

现在的游戏制作里要是应用了HTML5技术 那么一切就简单多了{:5_297:}

蝶舞翩翩 发表于 2012-12-15 16:22

这说的是程序设计吗？

我爱景 发表于 2012-12-16 12:22

这贴子的专业技术太强了，有些看不明白

lmznet 发表于 2012-12-16 13:19

我了个去，碉堡了啦，HTML5的游戏还没有玩过呢

风雪梧桐 发表于 2012-12-17 16:29

这样的小游戏还真没怎么玩过呢

雨凤泪 发表于 2012-12-17 23:05

专业强帖，哈哈，这个懂的人一定要看滴

太幸福 发表于 2012-12-17 23:07

{:5_296:} 鄙视一下我自己

谁 叫我看不懂呢

不太真实 发表于 2012-12-17 23:10

我也看不懂。哈哈，专业性太强，楼主大哥，通俗一些的说给我们吧{:5_264:}

感到心动 发表于 2012-12-17 23:12

这游戏其实也是挺好玩的，以前玩过

皓雪落 发表于 2012-12-17 23:19

楼主很强啊，条理清楚。。。

toto1877 发表于 2013-1-7 09:35

这游戏其实也是挺好玩的，以前玩过

参天的树 发表于 2013-1-10 19:32

谢谢分享

toto1877 发表于 2013-1-11 14:25

楼主很强啊，条理清楚。。。
页: [1]
查看完整版本: 深入了解《Contre Jour》HTML5网页游戏制作过程