13 kB 是多少？如今，几千字节看起来就像沧海一粟。然而，回溯到电子游戏历史的黎明时代，您就会很快意识到，早期的先驱者不得不面对令人难以置信的限制。

例如，备受喜爱的 Atari 2600 只有可怜的 128 字节 RAM，游戏卡带额外提供 4 千字节。俗话说得好：限制激发创造力。年度 js13kGames 竞赛通过挑战有抱负的游戏开发者仅使用 13,312 字节（压缩后）来制作游戏，从而激发他们的创造力。

面向 HTML5 游戏开发者的编码竞赛

Js13kGames 是一项面向 HTML5 游戏开发者的年度在线 JavaScript 竞赛，始于 2012 年。有趣的是，文件大小限制为 13 千字节。参赛者有一个月的时间（8 月 13 日至 9 月 13 日）在给定的主题下构建游戏——2015 年的主题是反转。

感谢我们朋友和赞助商的支持，这项竞赛提供了丰厚的奖品，包括专家评委、免费 T 恤和其他好礼，免费配送至全球各地。但获胜只是参与其中的一项好处。成为 js13kGames 社区的一员，有很多收获。如果遇到问题，人们会互相帮助，分享他们的工具、工作流程、技巧和窍门。此外，有限时间框架的约束有助于您完成游戏，并在此过程中锻炼您的技能。

去年的获奖者

13 千字节甚至不足以容纳一张低分辨率的图像。参赛作品页面上的小屏幕截图通常比游戏本身更大！然而，您可能会对如此小的尺寸所能实现的效果感到惊讶。查看去年的部分获奖作品，以获得灵感。

• Behind Asteroids – The Dark Side 作者：Gaëtan Renaudeau
• Road Blocks 作者：Ash Kyd
• RoboFlip 作者：Eoin McGrath

想知道这些功能是如何实现的吗？我采访了获奖者，请他们分享一些成功的秘诀。他们分享了在极度限制条件下进行游戏开发的工具和技巧。如果您想了解更多详细信息：所有游戏都在 GitHub 上，因此您可以自行浏览源代码。

RoboFlip

Eoin McGrath 描述了 RoboFlip 工作流程的某些方面。

“最终的参赛作品可以压缩。压缩对单个文件比对多个文件有效得多，因此最佳做法是内联所有图像、连接文件、压缩 JavaScript 并删除所有空白。得益于 Grunt 和 Gulp 等任务运行器，此过程可以在很大程度上实现自动化。查看我使用的 Gulp 文件。一个简单的 gulp build 命令即可完成所有繁重的工作，并让我知道还剩下多少宝贵的空间。”

图形

“首先，忘记带有大量动画帧的高分辨率精灵表。简单性是关键。通过过程生成或 SVG 可以实现很多功能。我个人选择了复古风格的像素化外观。首先，所有图像都在 GIMP 中以极小的分辨率（约 6×6 像素）创建。然后，我将它们编码为 base64，并使用 Canvas API 以更大的比例重新绘制它们。”

“我使用的另一个实用技巧是，通过一个将非透明颜色值替换为白色的函数运行所有图像。”

“事实证明，这是一种廉价而有效的方式，可以让所有精灵都拥有损伤帧。”

声音

“没有音效的游戏就像没有咖啡因的咖啡。显然，在给定的限制下，您不可能将单个 .mp3 或 .ogg 文件放入您的游戏中。幸运的是，有 jsfxr，这是一个非常棒的库，您可以使用它来创建一些 8 位风格的哔哔声。

对于有音乐天赋的人来说，您还可以尝试使用 Sonant-X 库 创建配乐——查看 此很棒的可玩示例。”（您可能需要点击“播放歌曲”以启动。）

Road Blocks

“我喜欢 js13kGames 竞赛的一点是，它在您所能实现的方面给您设置了人为限制，” 来自澳大利亚的游戏开发者 Ash Kyd 这样写道。

“我发现，作为一名独立开发者，在开放式项目中，可能会被所有可能性所困扰，最终一无所获，而设定一些硬性限制会让您在所能实现的方面更有创造力。”

“得益于文件大小限制，Road Blocks 本质上是一款简单的游戏，不需要大量的编码工作。因此，我大部分时间都花在了比赛期间的打磨游戏性和消除边缘问题上，这最终导致了更高的产品质量。”

Behind Asteroids – The Dark Side

“Js13kGames 是一个绝佳的机会，可以探索和尝试使用 WebGL 或 Web Audio 等酷炫技术，并提高您的技能。在 13 kB 的限制下，您无法依靠框架来隐藏。此外，显然，您不应该使用图像，而应该尝试以过程方式生成它们。也就是说，找到自己的风格并使用适合您的技巧完全取决于您。不要一开始就使用所有技巧——先进行原型设计，最后压缩代码，” 老牌游戏开发者和 js13kGames 获奖者 Gaëtan Renaudeau 建议道。

“我发现的一个有趣的技巧是，为了节省字节，避免使用面向对象的风格。相反，我只编写函数并 将数组用作元组数据类型——过去，我在之前的一篇 js1k 文章 中使用过这种技术。

这是我第三次参加 js13kGames 竞赛，也是我第三次玩 WebGL 的乐趣。我的 2015 年参赛作品是Asteroids 的翻版，您实际上并不控制宇宙飞船，而是发送小行星。这是我对反转主题的诠释。

在桌面端，游戏是通过打字来实现的——每个小行星上都会显示一个字母，您必须在正确的时间打出该字母。在移动端，它会简单地变成一款触控式游戏。

游戏节奏根据不同的关卡而变化，从初学者到更高级别的玩家（他们控制着您必须用小行星摧毁的宇宙飞船）。宇宙飞船的控制由一个 AI 算法 驱动。”

游戏的渲染方式

“游戏使用混合渲染技术：它首先使用基本 2D 形状在 Canvas 上渲染，然后被管道化到多个 WebGL 后处理效果中。

2D Canvas 绘制涉及用于粒子和小球的圆形、用于小行星和宇宙飞船的多边形，以及用于过程式字体的线条，因为 每个字母的路径都是硬编码的。游戏形状专门使用 3 个颜色通道（红色、蓝色和绿色）中的一个进行绘制，以将对象分成不同的组，以便后处理可以过滤——例如，小球以蓝色绘制，因此我们可以为它们应用特定的眩光效果。这是一种有趣的技术，可以优化并将不同的内容存储到单个纹理中，因为游戏是单色的。

WebGL 后处理中涉及的不同效果在 这篇事后总结 中有详细介绍。此最终步骤的重要目标是图形化地再现 原始街机游戏出色的矢量图形。

在背景中，还会添加一个背景环境贴图，您可以在其中看到玩家在街机游戏屏幕中反射。它完全是在 片段着色器 中以过程方式生成的。”

总结

您可以采用多种方法来从代码库中节省宝贵的字节。这些方法从 相当有名的 到 比较冷门的 方法都有。Tuts+ Game Development 上有一篇关于 如何压缩 HTML5 游戏 的文章，您还可以在 js13kGames 资源 页面上找到精心策划的工具和其他资料列表。

我希望您喜欢这次对 js13kGames 风景和过去获奖者推荐的一些获胜 代码高尔夫 技巧的简要介绍。今年想尝试一下吗？2016 年的比赛将在几天后——8 月 13 日开始。加入我们！ 现在开始编码还为时不晚。