随着 Firefox OS 专注于连接设备的世界，现在是开始为全新不同显示屏构建游戏的最佳时机。松下提供各种搭载 Firefox OS 的电视——本文将概述为大型电视屏幕开发 HTML5 游戏与智能手机方法有何不同。

罗杰斯船长重返

我作为 Enclave Games 创始人兼开发者的游戏开发之旅始于 罗杰斯船长的第一个版本（名为小行星带西里乌斯）——它是在大约三年前为低端智能手机 构建 的，并针对小屏幕进行了优化。我记得它在 Geeksphone Keon 上运行流畅，这款设备配备了 3.5 英寸屏幕；当时我无法想象我会为 50 英寸电视开发同一款游戏。

我一直对使用全新技术构建 HTML5 游戏、实施尖端 API 和为新平台开发游戏很感兴趣，这就是为什么当我测试我在 Keon 设备上的游戏并意识到它运行流畅时，我感到如此兴奋的原因。当我在市场上看到第一批智能电视时，我好奇我们是否有一天会有一款运行 Firefox OS 的智能电视，以及性能和开发便捷性与智能手机和基于 PC 的网络相比如何。全新松下电视的首映 是一个绝佳的借口，让我们掸掉旧版罗杰斯船长的灰尘，看看它是否仍然具有吸引观众的魅力，即使观众本身在过去几年里发生了变化。

规划新版本

我决定使用当前技术为更大屏幕（以电视为目标）重建罗杰斯船长。原始游戏使用 ImpactJS 游戏引擎创建，基本分辨率为 480 x 320。展望现在，我已经使用 Phaser 开发游戏两年多了，我认为它目前是休闲 2D 游戏的最佳游戏引擎。

浏览器渲染引擎的性能有了很大提升，因此我认为将游戏做得更大并保持高帧率不成问题。这就是为什么我决定为罗杰斯船长的全新版本设置 960 x 640 像素的基本分辨率——这足以让游戏看起来比原始版本好很多。

起初我想使用新框架创建原始游戏逻辑的精确副本。原本它将是一个直接的 HD 重制版，但后来我决定添加额外的功能，如射击、浮动敌人和一些额外的视觉效果。因此，你可以把它看作是第二集。你现在可以在运行 Firefox OS 的松下电视上展示的 CES 2016 拉斯维加斯展会上 试玩演示。

我目前正在与 Blackmoon Design 合作开发《罗杰斯船长 2：仙女座之战》的完整版，该游戏将在未来一两个月内发布。

开始开发

多年来，关于 如何为 Firefox OS 智能手机准备 HTML5 游戏 的资源很多。对于新媒介，方法并没有太大区别（除了下面讨论的一些例外情况），因此你可以大体上遵循这些方法。要开始为搭载 Firefox OS 的松下电视开发游戏，你需要 Firefox Nightly 和 WebIDE——有关如何通过 WebIDE 的远程调试将游戏推送到电视的详细说明可在 这篇文章 中找到。

考虑大型屏幕

客厅里的电视显然与你手中的智能手机不同，游戏和其他应用程序必须针对新媒介进行不同的设计。但是，为网络构建教会了我们，游戏应该调整其大小以适应屏幕，无论它是智能手机、平板电脑、笔记本电脑还是 PC 监视器，因此电视屏幕不应该成为问题，实际上也并非如此。

缩放

在 Phaser 中缩放只需要一行代码

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

这将负责将游戏的画布缩放至可用的屏幕空间并保持纵横比，因此它不会以任何方式被拉伸。还有其他方法可以缩放游戏，但这种方法是最简单、最通用的解决方案。它适用于小型智能手机和大型电视——唯一需要考虑的是资产的分辨率与游戏的性能，这样它看起来既美观又运行得相当流畅。有关分辨率的决策取决于你正在构建的游戏类型、有多少资产或屏幕上将发生多少事件，因此这是一个个人选择。

控制

重要的是要了解遥控器可以模拟键盘按键，因此如果你已经为你的游戏实施了键盘按键，它就可以开箱即用

this.cursors = this.input.keyboard.createCursorKeys();
//...
if(this.cursors.right.isDown) {
    this.player.body.velocity.x += forcePush;
}

在这种情况下，光标键（如果你在桌面测试和玩游戏时，对应于键盘上的箭头）将被创建，以后可以检查。它们与遥控器上的箭头具有相同的键码，这就是为什么更易于实施和测试它们的原因。如果在玩游戏时按下了右箭头键，那么玩家的飞船将向右移动。你可以在遥控器上找到完全相同的键

四个方向键的键码与其键盘对应物完全相同，但如何检查遥控器上的其他键？你可以使用纯 JavaScript 方法

window.addEventListener("keydown", function(evt) {
    console.log(evt.keyCode);
}, this);

通过这种方式，你将在按遥控器上的按钮时看到相关键码在控制台中打印出来，这样你就可以在游戏中正确地为它们分配操作。你也可以查看 电视遥控器按钮映射到键盘 文章，以简化操作。

优化

重要的是要知道，电视和其他此类设备往往存在硬件限制。为了使游戏运行流畅，务必遵循一些准则并测试性能，以消除任何潜在的瓶颈。请参阅 Power Surge 文章 获取提示。

开源

在准备全新罗杰斯船长的演示时，我决定完成并开源我作为 Enclave Games 用于游戏开发的私有模板——你可以在 GitHub 上找到 Enclave Phaser 模板。我还意识到，我已经在 GitHub 上发布了一些游戏开发项目（例如 Monster Wants Candy 和 Cyber Orb），并将它们全部列在一个页面上会很酷，这样开发人员就可以学习并从中获益：因此，我还发布了 open.enclavegames.com，其中列出了我最有趣的开源项目。

从 MWC 到 CES

我在 2014 年巴塞罗那世界移动通信大会 上在一系列 Firefox OS 智能手机上演示了第一个罗杰斯船长。从那时起，我做了很多关于为 Firefox OS 构建游戏的演讲，其中包括罗杰斯船长作为案例研究。现在是时候让 全新游戏 在 拉斯维加斯国际消费电子展 上的 Firefox OS 电视上展示了，在那里，全新松下 UHD 电视已 发布。如果你要参加，请务必前往松下展台的 Mozilla 展位并查看这款游戏。尝试一下，看看你是否想在未来进行电视游戏开发。如果想，请随时 在 Twitter 上与我联系 并提出问题——我很乐意提供帮助。