80,000 行 Objective-C 代码：将 Contre Jour 的多点触控物理效果带入 HTML5 浏览器

HTML5 合作伙伴

5.00/5 (2投票s)

2013年2月7日

CPOL

8分钟阅读

19797

将 Contre Jour 带到 Web 端，突破了我们自己的想象极限——证明了 HTML5 已经为休闲 Web 游戏做好准备，成为一个可行的平台。以下的技术解析，将深入介绍在将该游戏带入浏览器过程中所面临的挑战和取得的解决方案。

30 天开发一个 Windows 8 应用

“Contre Jour”是一款“模糊了互动艺术与游戏界限”的视频游戏。这款游戏在 iOS 上广受欢迎，由 Maksym (Max) Hryniv 创作，因其创新的玩法、迷人的艺术风格和引人入胜的配乐而闻名世界。随着 Internet Explorer 10 的推出，微软希望借此机会展示其新浏览器中更新的 JavaScript 引擎和先进的多点触控功能。

Contre Jour 灵敏的触控操作、独特的游戏玩法以及密集的媒体需求，恰好是微软所寻求的挑战。Internet Explorer 与 Max 和定制开发公司 Clarity Consulting 联手，仅使用 HTML5 和 JavaScript 将 Contre Jour 带入了浏览器。该项目耗时六个月，将 Contre Jour 带到 Web 端，突破了我们自己的想象极限——证明了 HTML5 已经为休闲 Web 游戏做好准备，成为一个可行的平台。以下的技术解析，将深入介绍在将 Petit 带入浏览器过程中所面临的挑战和取得的解决方案。希望您喜欢。

概述

该项目的目标是展示 Internet Explorer 10 如何通过将 Contre Jour 移植到 HTML5，来缩小浏览器游戏与原生游戏之间的差距。我们从一开始就设定了一个目标，即在移植过程中不牺牲 Contre Jour 的任何深度。我们知道这将面临巨大挑战。Contre Jour 在代码和媒体方面都非常庞大。它拥有超过 80,000 行 Objective-C 代码，数百个图像资源，以及更多的配置文件。

到目前为止，最大的挑战是将 Objective-C 代码转换为 JavaScript。Objective-C 代码是高度面向对象的，而 JavaScript 对诸如封装、多态和继承等概念的原生支持充其量只能算稀疏。此外，两种语言之间的差异使得直接逐行移植成为不可能。我们详细审查了 Objective-C 代码，评估了每个组件，确定了它与其他组件的关系，并 devising 了一种在 JavaScript 中忠实实现每个组件的方法。

从一开始，和所有游戏开发一样，性能是必须的。我们担心在屏幕上跟踪和移动许多元素，包括环境，可能会给浏览器带来负担。HTML5 使绘图变得简单，但我们需要认识到，就性能而言，绘图将是我们最耗费的操作。请参阅下面的“幕后”部分，了解我们使用的一些性能技巧。

地面物理

Contre Jour 的一个决定性特点是用户如何与周围世界互动和操作，而不是操作游戏的主角。在 Contre Jour 中，玩家用手指塑造类似粘土的地面，这是将游戏主角 Petit 移动到屏幕周围的主要方式之一。

用 JavaScript 编写地面逻辑是一个巨大的挑战。要模拟用户触摸它时它的移动和变形方式，以及它与游戏主角的互动方式，需要大量的物理计算逻辑。为了渲染 Contre Jour 类似粘土的地面，我们使用了 Box2D 的修改版 JavaScript 移植，这与 iOS 版本使用的物理引擎相同。这为我们提供了管理物理对象、创建关节和处理碰撞的几乎相同的功能。

地面由许多独立的 Box2D 实体组成，这使其能够被塑形。当它被绘制出来时，之所以显得如此平滑，是因为在每个子实体之间绘制了一个二次曲线。这赋予了地面粘土般的质感，但也使得渲染成本非常高。

Objective-C 到 Javascript

早期我们面临的一个关键挑战是将 Contre Jour 的深层对象层次结构从原始 iOS 代码迁移到 JavaScript。为了帮助实现这一点，我们在需要继承的地方使用了 John Resig 的“简单的 JavaScript 继承”模式。

这使我们能够使用 Contre Jour 的 Open-C 架构中的大量代码，比我们预期的要多。游戏中共享通用基础行为的组件，例如粒子系统，更容易实现，因为我们有一个“继承”层次结构，可以让我们避免从头开始编写所有内容。没有这样的模式，将游戏移植到 HTML5 将非常困难，甚至不可能。我们最终将不得不重写游戏的大部分内容。幸运的是，使用简单的 JavaScript 继承模式为我们节省了大量时间和资源。

CSS3

CSS 动画和过渡在菜单和非游戏元素的开发中发挥了重要作用。大多数 CSS 过渡发生在屏幕切换或游戏事件期间，例如显示/隐藏暂停菜单、关卡之间的切换，或关卡与关卡选择器之间的切换。在 Internet Explorer 10 等浏览器中，屏幕上的每个像素都经过硬件加速。这意味着什么？这意味着您无需编写任何额外的代码，就可以创建高保真、高性能的效果。这有助于我们将一些渲染工作从已经“受虐”的 canvas 转移到 DOM 和 CSS 布局引擎。

我们还使用 CSS3 媒体查询来缩放网站以支持多种屏幕分辨率。CSS3 媒体查询允许开发人员附加一个条件来影响样式适用的范围。例如，我们使用媒体查询对外部 DIV 容器应用了一个缩放变换，以便在较小的屏幕上缩小网站。

提示：使用媒体查询进行缩放，使我们不必创建和支持多种尺寸的图像。这是一个重要的优化——维护多套图像将带来额外的痛苦，因为我们已经有数百张图像需要管理。

多点触控

游戏中我们代码在不同浏览器中分支的少数领域之一是多点触控支持的实现。多点触控的实现是开发中最简单的部分之一，这要归功于 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;
}

查看原始代码 touchEventWireup 此 Gist 由 GitHub 提供。

从编码的角度来看，我们花了一些时间编写了一个主触摸模块，该模块封装了浏览器特定的触摸支持。该模块跟踪输入事件，而不考虑浏览器平台，并将它们冒泡到我们的游戏引擎进行处理。此外，游戏元素可以“订阅”特定的触摸或指针实例，以在其生命周期内接收更新通知。这使得游戏中的地面等元素能够轻松地跨浏览器平台响应触摸。

在此处下载 HTML5 游戏包

您是开发者吗？

如果您是一位对在 Web 上构建游戏感兴趣的 Web 开发人员，我们为您准备了
一个入门框架，您可以立即开始构建 HTML5 游戏。

该示例使用了我们为 Contre Jour 创建游戏循环的相同模式，并将帮助您开始编写 HTML5 游戏。它包含创建游戏循环的简单模式、入门游戏对象以及绘制到 canvas 的代码，所有这些都已准备就绪。代码文档齐全，将指导您完成创建基本游戏所需的步骤。您还可以在此处查看一些额外的开发者资源。

Internet Explorer GitHub 仓库 - 适用于中高级用户。我们的 GitHub 仓库汇总了我们过去几个月完成的大量出色工作，从使用 Atari 和 Cut The Rope 构建游戏，到开发与 Jasmine Villegas 合作的互动音乐视频。

我们未来何去何从？

我们将 Contre Jour 带到 Web 端这一事实，证明了一些事情，其中最重要的是 HTML5 浏览器游戏与原生平台游戏之间的界限正在模糊。虽然原生游戏在丰富性方面仍然优于浏览器游戏，但浏览器带来的广泛传播机会很有吸引力。随着 Windows 8 和 Internet Explorer 10 等技术的不断进步，HTML5 游戏的未来将更加光明。作为开发者，我们相信，由我们来重新定义人们对 Web 可能性的期望。我们希望 Contre Jour 能激发游戏社区突破界限，探索一切可能。您认为什么才是可能的？

本文由 Clarity Consulting 撰写。作为美国最早的 Microsoft 金牌认证合作伙伴之一，以及微软的中西部年度合作伙伴，Clarity Consulting 专注于 Microsoft 平台技术，包括 ASP.NET Web 应用程序、SharePoint、Silverlight、Surface、Windows Mobile 和 WPF 智能客户端。我们融合了突破性的用户体验设计与敏捷软件开发，为零售、制造、金融和法律等行业的客户提供服务。