简 介 Contre Jour 是 一 款 让 游 戏 与 互 动 艺 术 的 界 限 变 得 模 糊 的 视 频 游 戏 Contre Jour 由 Maksym (Max) Hryniv 推 出, 在 ios 上 大 获 追 捧, 因 其 创 新 的 游 戏 设 置 奇 幻 的 艺 术 风 格 以 及 动 人 的 背 景 音 乐 而 享 誉 世 界 自 Internet Explorer 10 推 出 后,Microsoft 就 一 直 在 寻 找 适 当 的 机 会 来 展 示 其 应 用 于 全 新 浏 览 器 的 更 新 的 JavaScript 引 擎 和 高 级 多 点 触 控 功 能 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 虽 然 简 化 了 绘 图 操 作, 但 我 们 也 需 要 认 识 到 这 样 一 个 事 实 : 绘 图 将 成 为 与 效 果 相 关 的 最 昂 贵 的 操 作 有 关 我 们 所 使 用 的 提 升 效 果 的 诀 窍, 请 参 阅 以 下 部 分 场 景 的 物 理 原 理 Contre Jour 最 鲜 明 的 特 色 是 让 用 户 与 周 围 环 境 互 动 并 控 制 周 围 环 境 ( 而 不 是 控 制 游 戏 中 的 英 雄 角 色 ) 在 Contre Jour 中, 玩 家 通 过 手 指 操 作 使 粘 土 般 的 场 景 改 变 形 状, 这 是 在 屏 幕 上 移 动 该 游 戏 的 英 雄 角 色 Petite 的 主 要 方 式 之 一 1
将 场 景 逻 辑 引 入 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 图 像 ) 进 行 程 序 性 绘 制 例 如, 通 过 动 态 方 式 绘 制 的 静 态 绳 索 包 含 条 纹 图 案, 这 使 得 我 们 无 法 轻 易 地 将 纹 理 应 用 于 其 中 为 绘 制 此 类 绳 索, 我 们 需 要 遵 循 以 下 步 骤 : 1. 根 据 绳 索 的 长 度, 将 绳 索 分 成 多 个 部 分 2. 将 每 部 分 分 成 两 个 单 独 的 层 - 顶 层 和 底 层 3 针 对 每 部 分 的 顶 层 和 底 层, 根 据 该 部 分 的 点 来 计 算 单 独 的 转 换 并 根 据 相 关 值 来 绘 制 纹 理 相 应 半 部 分 2
粒 子 和 游 戏 详 情 因 为 填 充 屏 幕 的 许 多 移 动 粒 子 都 是 动 态 的, 所 以 我 们 必 须 仔 细 留 意 渲 染 效 果 从 编 码 的 角 度 看, 草 灰 尘 和 苍 蝇 这 些 子 画 面 需 要 频 繁 更 新 和 绘 制, 以 营 造 出 游 戏 灵 动 的 氛 围 从 而 让 玩 家 完 全 融 入 具 有 丰 富 细 节 的 环 境, 获 得 充 满 惊 喜 的 愉 悦 体 验 但 是, 如 果 处 理 不 当, 这 些 细 节 最 后 可 能 会 成 为 干 扰 因 素, 而 非 额 外 优 势 为 解 决 Contre Jour 的 复 杂 环 境 带 来 的 效 果 问 题, 我 们 将 环 境 粒 子 保 持 在 单 独 的 画 布 上 此 外, 我 们 在 粒 子 引 擎 中 使 用 了 基 元 丢 帧 逻 辑 以 确 保 流 畅 的 玩 家 体 验 也 就 是 说, 粒 子 逐 帧 批 量 更 新, 但 绘 制 粒 子 的 频 率 要 低 得 多 这 样 一 来, 我 们 既 确 保 了 Contre Jour 充 满 丰 富 视 觉 细 节 的 环 境, 又 避 免 了 效 果 上 的 影 响 Snot 该 游 戏 中 的 绳 索 ( 又 名 snot) 实 际 上 是 由 四 种 不 同 的 独 立 图 像 ( 头 部 眼 睛 眼 球 和 尾 巴 ) 组 成, 这 些 图 像 通 过 至 少 四 条 Bezier 曲 线 和 两 条 直 线 相 连 接 在 Box2D 物 理 引 擎 中 通 过 将 物 体 与 接 点 相 连 创 建 出 这 些 snot 绳 索 体 创 建 后, 我 们 需 要 对 绳 索 体 进 行 定 位 借 助 这 些 位 置, 我 们 生 成 画 布 路 径 并 基 于 物 体 位 置 为 其 添 加 二 次 曲 线 路 径 生 成 完 毕 后, 我 们 用 纯 黑 色 描 边 并 执 行 填 充 操 作 3
多 层 画 布 方 法 如 前 所 述, 要 想 在 基 于 浏 览 器 的 复 杂 游 戏 中 获 得 良 好 效 果, 将 多 种 游 戏 元 素 与 多 种 HTML5 画 布 元 素 融 合 是 至 关 重 要 的 借 助 此 方 法, 我 们 能 够 有 选 择 性 地 以 不 同 的 比 率 来 更 新 和 绘 制 屏 幕 的 不 同 部 分 更 新 和 绘 制 场 景 的 花 费 不 低, 所 以 我 们 需 要 对 其 渲 染 时 间 和 方 式 进 行 谨 慎 选 择 场 景 的 每 层 在 其 所 属 的 HTML5 画 布 上 渲 染, 与 其 他 游 戏 元 素 分 离 这 样 做 很 有 必 要, 由 此 我 们 能 通 过 跟 踪 每 个 场 景 部 分 并 检 测 用 户 是 否 对 其 进 行 过 改 动 来 确 保 场 景 的 改 变 不 受 游 戏 中 其 他 元 素 的 影 响 每 当 用 户 拖 动 或 移 动 场 景 时, 我 们 会 标 记 受 影 响 的 场 景 层, 并 且 只 对 该 场 景 层 的 特 定 画 布 进 行 更 新 和 重 新 绘 制 如 果 我 们 将 场 景 置 于 单 一 的 HTML5 画 布, 那 么 场 景 的 持 续 渲 染 将 会 使 效 果 差 到 无 法 接 受 的 程 度 如 果 想 了 解 如 何 在 复 杂 场 景 中 实 现 优 质 效 果, 您 可 以 参 阅 题 为 画 布 效 果 的 文 章 : www.html5rocks.com/en/tutorials/canvas/performance 提 示 : 并 不 是 所 有 的 游 戏 元 素 都 需 要 以 相 同 的 频 率 进 行 更 新 和 绘 制 通 过 将 游 戏 的 各 部 分 分 散 于 多 层 画 布, 您 可 以 更 加 轻 松 地 在 游 戏 循 环 中 以 不 同 的 频 率 绘 制 大 量 元 素 但 也 不 能 太 过 极 端 如 果 您 将 太 多 的 画 布 相 互 重 叠, 那 么 效 果 会 受 到 影 响 4
从 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 布 局 引 擎 5
此 外, 我 们 使 用 CSS3 Media Query 来 按 比 例 调 节 格 点 以 支 持 不 同 的 屏 幕 分 辩 率 CSS3 Media Query 使 开 发 人 员 能 使 用 条 件 来 影 响 风 格 的 应 用 范 围 例 如, 我 们 借 助 media query 将 比 例 变 换 应 用 于 外 部 DIV 容 器, 从 而 为 较 小 的 屏 幕 按 比 例 缩 小 格 点 提 示 : 使 用 Media Query ( http://ie.microsoft.com/testdrive/html5/css3mediaqueries/ ) 来 进 行 按 比 例 调 节 使 得 我 们 摆 脱 了 创 建 和 支 持 多 种 尺 寸 图 像 的 负 担 这 是 一 种 重 要 的 优 化 - 因 为 我 们 已 经 有 数 以 百 计 的 图 像 需 要 管 理, 而 维 护 不 同 的 图 像 集 会 产 生 额 外 的 负 担 多 点 触 控 多 点 触 控 支 持 的 实 施 是 该 游 戏 中 为 数 不 多 的 使 用 到 特 定 于 浏 览 器 的 代 码 的 地 方 之 一 得 益 于 Internet Explorer 10 对 触 控 事 件 监 听 器 的 内 置 支 持, 实 施 多 点 触 控 是 开 发 中 最 容 易 的 部 分 之 一 让 人 高 兴 的 是 它 们 非 常 有 效 对 开 发 人 员 而 言, 这 是 件 好 事, 因 为 这 使 得 我 们 可 以 集 中 精 力 应 对 项 目 中 那 些 更 具 有 挑 战 性 的 部 分 从 编 码 的 角 度 看, 我 们 花 费 了 一 些 时 间 编 写 主 触 控 模 块, 该 模 块 包 含 特 定 于 浏 览 器 的 触 控 支 持 和 触 控 事 件 处 理 该 模 块 跟 踪 触 控 事 件 ( 无 论 何 种 浏 览 器 平 台 ) 并 将 其 送 入 游 戏 引 擎 进 行 处 理 此 外, 游 戏 元 素 可 订 阅 特 定 的 触 控 实 例 以 通 过 触 控 的 开 始 触 控 来 接 收 通 知, 并 且 移 动 和 结 束 触 控 事 件 生 命 周 期 这 使 得 游 戏 中 场 景 等 元 素 能 够 轻 松 地 跨 浏 览 器 平 台 对 触 控 事 件 作 出 响 应 6
以 下 是 与 触 控 事 件 监 听 器 相 关 的 代 码 示 例 : function inferinputmodel() { } if (window.navigator.mspointerenabled) { return 'pointer'; } else if (window.ontouchstart!== undefined) { return 'touch'; } else { return 'unk nown'; } 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; 您 是 开 发 人 员 吗? 如 果 您 是 一 位 对 创 建 网 页 游 戏 感 兴 趣 的 网 页 开 发 人 员, 我 们 为 您 整 理 了 一 套 初 用 者 框 架 : https://www.contrejour.ie/downloads/html5gamekit.zip, 您 可 以 立 即 使 用 该 框 架 来 创 建 HTML5 游 戏 7
该 范 例 采 用 与 我 们 创 建 Contre Jour 游 戏 循 环 时 相 同 的 模 式, 它 将 会 帮 助 您 开 始 编 写 HTML5 游 戏 该 范 例 包 含 用 于 创 建 游 戏 循 环 初 用 者 游 戏 对 象 和 绘 图 至 画 布 的 代 码 的 简 单 模 式, 模 式 中 所 有 内 容 设 置 就 绪 相 关 代 码 记 录 齐 全 通 过 这 些 代 码, 您 可 以 了 解 到 创 建 一 个 基 本 游 戏 所 需 的 步 骤 此 外, 您 还 可 以 查 看 以 下 其 他 的 开 发 人 员 资 源 : Internet Explorer GitHub 知 识 库 - 适 用 于 中 级 到 高 级 用 户 https://github.com/internetexplorer GitHub 知 识 库 收 集 了 我 们 在 过 去 的 几 个 月 做 出 的 大 量 成 果, 包 括 与 Atari 合 作 创 建 的 游 戏 和 Cut The Rope( 割 绳 子 游 戏 ) 以 及 Jasmine Villegas 的 互 动 音 乐 视 频 的 开 发 请 在 此 处 下 载 HTML5 游 戏 包 : https://www.contrejour.ie/downloads/html5gamekit.zip 我 们 由 此 得 到 的 启 示 是 什 么? Contre Jour 网 页 游 戏 的 成 功 至 少 证 明 了 HTML5 浏 览 器 游 戏 与 原 生 平 台 游 戏 间 的 界 限 正 变 得 模 糊 尽 管 与 浏 览 器 游 戏 相 比, 原 生 游 戏 在 丰 富 性 方 面 仍 占 据 优 势, 但 浏 览 器 游 戏 追 赶 这 一 优 势 的 潜 力 极 具 吸 引 力 在 Windows 8 Internet Explorer 10 等 技 术 的 持 续 推 动 下,HTML5 游 戏 的 未 来 将 会 更 加 光 明 作 为 开 发 人 员, 我 们 相 信 我 们 可 以 改 变 人 们 对 网 页 潜 力 的 期 望 值 我 们 希 望 Contre Jour 能 启 发 游 戏 社 区 超 越 极 限, 探 索 未 知 的 可 能 性 您 是 如 何 看 待 这 种 可 能 性 呢? 原 文 地 址 :www.contrejour.ie/behindthescenes-chs.html 8