您所在位置：主题：揭晓《Contre Jour》HTML5技术幕后的真像
爱编程人
[专家分：10] 发布于 2012-12-06 23:38:00
“Contre Jour”是一款“让游戏与互动艺术的界限变得模糊”的视频游戏。Contre Jour 由 Maksym (Max) Hryniv 推出，在 iOS 上大获追捧，因其创新的游戏设置、奇幻的艺术风格以及动人的背景音乐而享誉世界。自 Internet Explorer 10 推出后，Microsoft 就一直在寻找适当的机会来展示其应用于全新浏览器的更新的 JavaScript 引擎和高级多点触控功能。www .contrejour.ie
Contre Jour 灵敏的触控功能、独特的游戏设置和对多媒体的深入要求恰好提供了 Microsoft 所需的这种挑战。通过与 Max 以及网站开发机构 Clarity Consulting 的合作，Internet Explorer 仅使用 HTML5 和 JavaScript 便将 Contre Jour 导入了浏览器。导入过程耗时 6 个多月。将 Contre Jour 导入网页的成功之举拓展了我们以往所认知的可能性极限 - 它证明了 HTML5 作为一种可行平台，已经为促进网页休闲游戏的发展做好了准备。以下技术分析对在浏览器中赋予 Petite 灵动的生命力所面临的挑战及其解决方案进行了深入的阐述。希望您能喜欢。
项目概述
该项目的目标是展示 Internet Explorer 10 是如何通过将 Contre Jour 导入 HTML5 来缩小基于浏览器的游戏与原生游戏间的差距的。我们从一开始就设立了一个目标 - 我们会在不牺牲 Contre Jour 深度的前提下缩短这一差距。我们深知将面临巨大的挑战。无论从代码方面，还是从媒体方面看，Contre Jour 都是非常强大的。该游戏拥有 80,000 行 Objective-C 代码、数以百计的图像资源以及数量更多的配置文件。
迄今为止，最大的挑战是将 Objective-C 代码转换为 JavaScript。Objective-C 代码具有高度的面向对象性，而 JavaScript 对于像封装、多形性和继承这样的概念的原生支持，即使在最好的情况下，也是稀疏的。此外，由于两种语言存在差异，所以无法实现直接的逐行导入。我们逐一检查 Objective-C 代码、评估每个部分，从而确定每个部分与其他部分相连的方式，并且还设计了一种方法以忠实地在 JavaScript 中实施每个部分。
正如游戏开发一如既往的那样，从一开始效果就是必不可少的。我们曾担心对屏幕中的许多元素（包括环境）进行跟踪和移动可能会给浏览器带来负担。HTML5 虽然简化了绘图操作，但我们也需要认识到这样一个事实：绘图将成为与效果相关的最昂贵的操作。有关我们所使用的提升效果的诀窍，请参阅以下“深入了解”部分。
HTML5 技术 从 Objective-C 到 Javascript
我们在初期遇到的主要挑战之一是将 Contre Jour 的深层对象层次结构从原始 iOS 代码导入 JavaScript。为此，我们在需要使用继承的地方，采用了 John Resig 的“简单 JavaScript 继承”模式。
这让我们能够使用来自 Contre Jour 的 Open-C 架构的大量代码，其数量超乎我们的预期。该游戏中具有共同基础行为的部分（例如，粒子系统）较容易实施，因为我们采用的“继承”层次结构可以避免每次都从头开始写入所有代码。如果没有此类模式，即使有可能将游戏导入 HTML，也会非常困难。这样一来，我们最后将必须重写该游戏的大部分内容。得益于“简单 JavaScript 继承”模式，我们节省了大量的时间和资源。
CSS3
CSS 动画效果和过渡效果在该游戏的菜单和非游戏设置元素的开发方面发挥了巨大作用。大多数的 CSS 过渡发生在屏幕过渡或游戏事件中，例如显示/隐藏“暂停”菜单、在等级间过渡或在等级和等级选择器间过渡。在诸如 Internet Explorer 10 的浏览器中，对屏幕中的每一个像素都进行了硬件加速。这意味着什么？这意味着您无需添加任何代码，就能够实现高保真、高性能的效果。这有助于我们将一些渲染工作从已经不堪重负的画布上转移到 DOM 和 CSS 布局引擎。
此外，我们使用 CSS3 Media Query 来按比例调节格点以支持不同的屏幕分辩率。CSS3 Media Query 使开发人员能使用条件来影响风格的应用范围。例如，我们借助 media query 将比例变换应用于外部 DIV 容器，从而为较小的屏幕按比例缩小格点。
提示：使用 Media Query 来进行按比例调节使得我们摆脱了创建和支持多种尺寸图像的负担。这是一种重要的优化 - 因为我们已经有数以百计的图像需要管理，而维护不同的图像集会产生额外的负担。
多点触控
多点触控支持的实施是该游戏中为数不多的使用到特定于浏览器的代码的地方之一。得益于 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;
}
您是开发人员吗？
如果您是一位对创建网页游戏感兴趣的网页开发人员，我们为您整理了
一套初用者框架（http:/ /ww w.contrejour.ie/downloads/HTML5GameKit.zip ），您可以立即使用该框架来创建 HTML5 游戏。
该范例采用与我们创建 Contre Jour 游戏循环时相同的模式，它将会帮助您开始编写 HTML5 游戏。该范例包含用于创建游戏循环、初用者游戏对象和绘图至画布的代码的简单模式，模式中所有内容设置就绪。相关代码记录齐全。通过这些代码，您可以了解到创建一个基本游戏所需的步骤。此外，您还可以查看以下其他的开发人员资源：
Internet Explorer GitHub 知识库（https:/ /github.co m/InternetExplorer ） - 适用于中级到高级用户。GitHub 知识库收集了我们在过去的几个月做出的大量成果，包括与 Atari 合作创建的游戏、 和 Cut The Rope（“割绳子”游戏）以及 Jasmine Villegas 的互动音乐视频的开发。
我们由此得到的启示是什么？
Contre Jour 网页游戏的成功至少证明了 HTML5 浏览器游戏与原生平台游戏间的界限正变得模糊。尽管与浏览器游戏相比，原生游戏在丰富性方面仍占据优势，但浏览器游戏追赶这一优势的潜力极具吸引力。在 Windows 8、Internet Explorer 10 等技术的持续推动下，HTML5 游戏的未来将会更加光明。作为开发人员，我们相信我们可以改变人们对网页潜力的期望值。我们希望 Contre Jour 能启发游戏社区超越极限，探索未知的可能性。您是如何看待这种可能性呢？
