HTML5游戏Contre Jour幕后开发技术揭秘
“Contre Jour”是一款“让游戏与互动艺术的界限变得模糊”的视频游戏。Contre Jour由Maksym (Max) Hryniv推出，在iOS上大获追捧，因其创新的游戏设置、奇幻的艺术风格以及动人的背景音乐而享誉世界。自 IE10 推出后，Microsoft就一直在寻找适当的机会来展示其应用于全新浏览器的更新的 JavaScript 引擎和高级多点触控功能。
Contre Jour灵敏的触控功能、独特的游戏设置和对多媒体的深入要求恰好提供了 Microsoft 所需的这种挑战。通过与 Max 以及网站开发机构 Clarity Consulting 的合作，Internet Explorer 仅使用 HTML5 和 JavaScript 便将 Contre Jour 导入了浏览器。导入过程耗时6个多月。将Contre Jour导入网页的成功之举拓展了我们以往所认知的可能性极限-它证明了 HTML5 作为一种可行平台，已经为促进网页休闲游戏的发展做好了准备。以下技术分析对在浏览器中赋予 Petite 灵动的生命力所面临的挑战及其解决方案进行了深入的阐述。希望您能喜欢。
该项目的目标是展示 Internet Explorer10 是如何通过将 Contre Jour 导入 HTML5 来缩小基于浏览器的游戏与原生游戏间的差距的。我们从一开始就设立了一个目标-我们会在不牺牲Contre Jour深度的前提下缩短这一差距。我们深知将面临巨大的挑战。无论从代码方面，还是从媒体方面看，Contre Jour 都是非常强大的。该游戏拥有80,000行 Objective-C 代码、数以百计的图像资源以及数量更多的配置文件。
迄今为止，最大的挑战是将 Objective-C 代码转换为 JavaScript。Objective-C 代码具有高度的面向对象性，而 JavaScript 对于像封装、多态和继承这样的概念的原生支持，即使在最好的情况下，也是稀疏的。此外，由于两种语言存在差异，所以无法实现直接的逐行导入。我们逐一检查 Objective-C 代码、评估每个部分，从而确定每个部分与其他部分相连的方式，并且还设计了一种方法以忠实地在 JavaScript 中实施每个部分。正如游戏开发一如既往的那样，从一开始效果就是必不可少的。我们曾担心对屏幕中的许多元素（包括环境）进行跟踪和移动可能会给浏览器带来负担。HTML5 虽然简化了绘图操作，但我们也需要认识到这样一个事实：绘图将成为与效果相关的最昂贵的操作。有关我们所使用的提升效果的诀窍，请参阅以下部分。
将场景逻辑引入 JavaScript 是一个巨大的挑战。对用户触摸场景时场景移动和改变形状的方式 以 及场 景与 游 戏 英 雄 的互 动 方 式 进 行 模 拟，这 需 要 大 量 的 物 理 逻 辑。为了渲染 Contre Jour 的粘土状场景，我们使用了 Box2D (http://code.google.com/p/box2dweb) 的改进的 JavaScript 端口，这与 iOS 版本使用的物理引擎相同。这使得我们在管理物理对象、创建接点和解决冲突方面基本实现了功能上的一致性。场景由许多不同的单个 Box2D 物体组成，从而具有了改变形状的能力。因为在场景中的每一个子物体间绘制了一条二次曲线 ( www.w3schools.com/html5/canvas_quadraticcurveto.asp ) ，所以绘制场景时，视觉呈现非常流畅。这虽然能赋予场景粘土般的质感，但也让相关的渲染处理变得非常昂贵。
场景的物理原理
Contre Jour 最鲜明的特色是让用户与周围环境互动并控制周围环境（而不是控制游戏中的英雄角色） 。在 Contre Jour 中，玩家通过手指操作使粘土般的场景改变形状，这是在屏幕上移动该游戏的英雄角色 Petite 的主要方式之一。
将场景逻辑引入 JavaScript 是一个巨大的挑战。对用户触摸场景时场景移动和改变形状的方式 以 及场 景与 游 戏 英 雄 的互 动 方 式 进 行 模 拟，这 需 要 大 量 的 物 理 逻 辑。为了渲染 Contre Jour 的粘土状场景，我们使用了 Box2D (http://code.google.com/p/box2dweb) 的改进的 JavaScript 端口，这与 iOS 版本使用的物理引擎相同。这使得我们在管理物理对象、创建接点和解决冲突方面基本实现了功能上的一致性。场景由许多不同的单个 Box2D 物体组成，从而具有了改变形状的能力。因为在场景中的每一个子物体间绘制了一条二次曲线 ( www.w3schools.com/html5/canvas_quadraticcurveto.asp ) ，所以绘制场景时，视觉呈现非常流畅。这虽然能赋予场景粘土般的质感，但也让相关的渲染处理变得非常昂贵。
Snot 纹理
绘制绳索结果是端口最复杂的部分之一，因为还没有一种方法能直观而可靠地将纹理通过画布 API 应用于几何图形，而这对于类似 OpenGL 的游戏语言来说，却很常见。与其他游戏不同，Contre Jour 的许多游戏元素采用画布 API （而非 sprite 图像）进行程序性绘制。例如，通过动态方式绘制的静态绳索包含条纹图案，这使得我们无法轻易地 将纹理应用于其中。为绘制此类绳索，我们需要遵循以下步骤:- 根据绳索的长度，将绳索分成多个部分。
- 将每部分分成两个单独的层 - 顶层和底层。
- 针对每部分的顶层和底层，根据该部分的点来计算单独的转换并根据相关值来绘制纹理相应半部分。
粒子和游戏详情
因为填充屏幕的许多移动粒子都是动态的，所以我们必须仔细留意渲染效果。从编码的角度看，草、灰尘和苍蝇这些子画面需要频繁更新和绘制，以营造出游戏灵动的氛围。从而让玩家完全融入具有丰富细节的环境，获得充满惊喜的愉悦体验。但是，如果处理不当，这些细节最后可能会成为干扰因素，而非额外优势。 为解决 Contre Jour 的复杂环境带来的效果问题，我们将环境粒子保持在单独的画布上。此外，我们在粒子引擎中使用了基元丢帧逻辑以确保流畅的玩家体验。也就是说，粒子逐帧批量更新，但绘制粒子的频率要低得多。这样一来，我们既确保了 Contre Jour 充满丰富视觉细节的环境，又避免了效果上的影响。Snot
该游戏中的绳索 （又名 snot） 实际上是由四种不同的独立图像 （头部、眼睛、眼球和尾巴） 组成，这些图像通过至少四条 Bezier 曲线和两条直线相连接。在 Box2D 物理引擎中通过将物体与接点相连创建出这些 snot。 绳索体创建后，我们需要对绳索体进行定位。借助这些位置，我们生成画布路径并基于物体位置为其添加二次曲线。路径生成完毕后，我们用纯黑色描边并执行填充操作。
多层画布方法
如前所述，要想在基于浏览器的复杂游戏中获得良好效果，将多种游戏元素与多种 HTML5 画布元素融合是至关重要的。 借助此方法，我们能够有选择性地以不同的比率来更新和绘制屏幕的不同部分。更新和绘制场景的花费不低，所以我们需要对其渲染时间和方式进行谨慎选择。场景的每层在其所属的 HTML5 画布上渲染，与其他游戏元素分离。这样做很有必要，由此我们能通过跟踪每个场景部分并检测用户是否对其进行过改动来确保场景的改变不受游戏中其他元素的影响。 每当用户拖动或移动场景时，我们会标记受影响的场景层，并且只对该场景层的特定画布进行更新和重新绘制。如果我们将场景置于单一的 HTML5 画布，那么场景的持续渲染将会使效果差到无法接受的程度。 如果想了解如何在复杂场景中实现优质效果，您可以参阅题为画布效果的文章 : www.html5rocks.com/en/tutorials/canvas/performance 提示：并不是所有的游戏元素都需要以相同的频率进行更新和绘制。通过将游戏的各部分分散于多层画布，您可以更加轻松地在游戏循环中以不同的频率绘制大量元素。但也不能太过极端。如果您将太多的画布相互重叠，那么效果会受到影响。
从 Objective-C 到 Javascript
我们在初期遇到的主要挑战之一是将 Contre Jour 的深层对象层次结构从原始 iOS 代码导入 JavaScript 。为此，我们在需要使用继承的地方，采用了 John Resig 的“ 简单 JavaScript 继承”模式。 这让我们能够使用来自 Contre Jour 的 Open-C 架构的大量代码，其数量超乎我们的预期。该游戏中具有共 基极行为的部分（例如，粒子系统）较容易实施，因为我们采用的 “ 继承”层次结构可以避免每次都从头开始写入所有代码。如果没有此类模式，即使有可能将游戏导入 HTML ，也会非常困难。这样一来，我们最后将必须重写该游戏的大部分内容。得益于 “ 简单 JavaScript 继承” 模式，我们节省了大量的时间和资源。CSS3
CSS 动画效果（www.w3schools.com/css3/css3_animations.asp）和过渡效果（www.w3schools.com/css3/css3_transitions.asp）在该游戏的菜单和非游戏设置元素的开发方面发挥了巨大作用。大多数的 CSS 过渡发生在屏幕过渡或游戏事件中，例如显示/ 隐藏“ 暂停” 菜单、在等级间过渡或在等级和等级选择器间过渡。在诸如 Internet Explorer 10 的浏览器中，对屏幕中的每一个像素都进行了硬件加速。这意味着什么？这意味着您无需添加任何代码，就能够实现高保真、高性能的效果。这有助于我们将一些渲染工作从已经不堪重负的画布上转移到 DOM 和 CSS 布局引擎。 此外，我们使用 CSS3 Media Query 来按比例调节格点以支持不同的屏幕分辩率。CSS3 Media Query 使开发人员能使用条件来影响风格的应用范围。例如，我们借助 media query 将比例变换应用于外部 DIV 容器，从而为较小的屏幕按比例缩小格点。 提示：使用 Media Query (http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/) 来进行按比例调节使得我们摆脱了创建和支持多种尺寸图像的负担。这是一种重要的优化 - 因为我们已经有数以百计的图像需要管理，而维护不同的图像集会产生额外的负担。
多点触控
多点触控支持的实施是该游戏中为数不多的使用到特定于浏览器的代码的地方之一。得益于 Internet Explorer 10 对触控事件监听器的内置支持，实施多点触控是开发中最容易的部分之一。让人高兴的是它们非常有效。对开发人员而言，这是件好事，因为这使得我们可以集中精力应对项目中那些更具有挑战性的部分。 从编码的角度看，我们花费了一些时间编写主触控模块，该模块包含特定于浏览器的触控支持和触控事件处理。该模块跟 踪触控事件（无论何种浏览器平台）并将其 送 入游戏引擎进行处理。此外，游戏元素可“ 订阅” 特定的触控实例以通过触控的“ 开始触控” 来接收通知，并且移动和结束触控事件生命周期。这使得游戏中场景等元素能够轻松地跨浏览器平台对触控事件作出响应。 以下是与触控事件监听器相关的代码示例：function inferInputModel() {
if (window.navigator.msPointerEnabled) {
return 'pointer';
} else if (window.ontouchstart !== undefined) {
return 'touch';
} else {
return 'unknown';
}
}
switch (inferInputModel()) {
case 'pointer':
element.addEventListener('MSPointerDown', msStart);
element.addEventListener('MSPointerOut', msStop);
document.addEventListener('MSPointerUp', msStop);
document.addEventListener('MSPointerCancel', msStop);
document.addEventListener('MSHoldVisual', preventDefault);
break;
case 'touch':
element.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchStop);
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop);
break;
default:
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop);
break;
}
元曲三百首官方版
天安门导游安卓版
M超轻浏览器安卓版
星舞广场舞官方版
初衣安卓版
优惠快报官方版
MAKA安卓版
宝宝脑力潜能大开发官方版
破解游戏王安卓版
奇迹暖暖掌游宝安卓版
UCG电子杂志安卓版
疾如迅狐官方版
立方大冒险官方版
考考你官方版
游戏盒子安卓版
游魔玩官方版