Javascript GameDev 生态系统概述

介绍

几天前，我的一个朋友（也是一名开发人员）问我是否可以向他展示如何使用 Javascript 创建游戏，以及我们可以使用哪些框架和/或库等......

嗯，这已经不是第一次有人找我咨询这个问题了。有些人觉得我是“对游戏开发感兴趣的人”，而且我经常解答这方面的疑问。但遇到这种情况时，我经常会重复自己的想法，所以我决定把我对当前 JavaScript 游戏开发生态系统的了解写下来。希望这些内容也能对你有所帮助。🙂

为什么使用 JavaScript？

当你向其他开发者公开提供建议时（无论是在线上还是在聚会期间），你会看到一些人加入讨论。其中有人会质疑你推荐的工具背后的编程语言。这种情况经常发生，所以我们先来回答这个问题。

“真正的游戏不是用 C++ 制作的吗？”

这种情况经常发生。我理解的“真正的”游戏是指 AAA 级游戏，所以，没错，市面上大多数令人印象深刻的游戏（例如《战神》、《刺客信条》、《上古卷轴5：天际》等等）都是用 C++ 开发的（但并非全部）。它们是由一百名经验丰富的开发者用百万美元的预算打造的。这就是你的处境吗？是吗？那就去尝试吧（说实话，我有点嫉妒），否则，我强烈建议你坚持你所了解的。

你可以用任何东西来制作游戏，有些人用“不流行”的编程语言制作很酷的游戏，这没问题。如果你是使用 JavaScript 的开发者，那就继续用 JavaScript 吧。你用的是Java、C#还是Python？很好，你也有一些选择。学习游戏开发本质上是一项艰巨的任务。有很多概念需要掌握，所以你花在与工具斗争上的时间越少，就越好。

“但是现在团结了！”

Unity、虚幻引擎、CryEngine、Godot ……这些都是制作游戏的好方案。如果你对这类软件更有吸引力，那就应该尝试一下。我个人很喜欢我为日常工作设置的开发环境。优秀的编程语言，没有太多样板代码，高效的终端模拟器和简洁的文本编辑器，让我的一天过得非常愉快。🕺

每次我离开这个设置（去尝试任何一种 IDE）时，我都会感到有点难过，我知道很多开发者都是这样。这就是为什么我强烈建议你坚持使用你最喜欢的工具，不要理会那些说你选错了工具的人。

基础

在列出框架之前，我们应该先了解一下使用 JavaScript 编写游戏的技术。您肯定听说过“HTML5 游戏”，对吧？如果大多数人都这么说，那是因为 HTML 规范的第 5 版为我们带来了一个<canvas>标签，它允许我们在网页上创建绘图上下文。

几乎与此同时，Khronos Group创建了 WebGL 规范的第一个版本。它是 OpenGL ES 规范的 Web 版本，允许开发人员通过浏览器与显卡进行通信（相信我，你肯定想知道它是如何工作的😅）。

所以，我们现在能够创建在 GPU 上运行的 2D 和 3D 场景（这比在 CPU 上运行性能要高得多）。太棒了！但是，如果你看一下使用这些技术的 JavaScript 代码，你会感到恶心。用 Canvas 手工制作游戏仍然可行（而且很有趣），但用 WebGL 从头开始​​开发就像用 Dante 深入地狱一样。

让我们寻找一个可以为我们抽象 WebGL 内容的酷框架。

免责声明：我不会谈论所有现有的游戏框架和 JS 绑定。我只会展示其中的一部分，也就是我认为最重要的那些。

2D框架

PixiJS

即使您想创建 2D 游戏，也应该选择使用 WebGL 作为渲染引擎后端的技术。仅使用画布创建完整的游戏是可行的，但大多数开发人员这样做只是为了学习，并且更倾向于使用 WebGL 来制作完整的游戏（主要是出于性能方面的考虑）。

但是，正如我所说，直接使用 WebGL 进行工作可能会很繁琐，即使是 2D 的东西。幸运的是，我们有 PixiJS。

PixiJS是一个 2D WebGL 渲染器。这意味着，这个库将提供许多旨在以最高效的方式渲染 2D 场景和对象的函数。因此，您可以专注于构建一款出色的游戏，而将核心的“底层”工作留给 PixiJS 开发者。

这不是一个完整的游戏框架，而是一个专注于一件事的库：渲染 2D 场景。它做得非常好，以至于很多 JavaScript 游戏框架都使用它作为渲染引擎，而无需自己编写（如果你打算编写自己的游戏框架，你也可以使用它）。

优点：最快的 WebGL 2D 渲染器，非常适合网站上的复杂动画或在其上构建另一个框架。

缺点：如果您计划创建的不仅仅是动画（例如完整的游戏），那么您将需要为游戏开发的其他部分找到额外的库或自己编写它们（物理、设备缩放、更高级的粒子系统、图块地图等...）。

ExcaliburJS

这里有一个用 Typescript 编写的完整游戏框架（但仍处于测试阶段）。完整的场景系统和相机、精灵和动画、音效、物理等等，所有有趣的功能都在这里。我非常喜欢ExcaliburJS提供的 API 。我不知道该如何解释，但这个框架让我感觉很熟悉。

这可能与它的创建者都来自 Web 领域（其中一些是 Web 开发者，另一些是 DevOps 开发者）有关，所以大多数模式和开发方式都是 Web 开发中已经流行的。如果你是一名 Web 开发者，你绝对应该尝试一下这个框架。

优点：一组不错的功能和一个令人愉快的 API。

缺点：仍处于版本中0.xx，该框架的某些部分可能有龙。

ImpactJS

ImpactJS最为人熟知的是它是第一个“真正有意义的”Web 游戏框架，之前发布的大多数 Web 游戏框架都只是实验性的，并非“商业级”游戏框架。现在，它已经免费开源，并附带一个优秀的关卡编辑器。

这个框架并非最简单，也并非文档最齐全，但其稳健性已得到验证。例如，CrossCode是基于 Impact 的一个分支版本，其开发者选择 Impact 作为基础系统，是因为其架构优化，性能卓越，并且能够完美扩展，以满足游戏的特定需求。

优点：经过实战检验、可扩展、性能优良。

缺点：不像以前那么受欢迎了，您需要通过一些书籍来学习如何使用它，如果您需要在论坛上获得答案，您将等待更长的时间。

CreateJS

“一套模块化库和工具，可以协同工作或独立工作，通过 HTML5 在开放网络技术上实现丰富的交互式内容。”

CreateJS背后的优秀创意机构gskinner就是这样描述这个框架的。它通过独立的 JavaScript 模块提供了创建完整游戏所需的一切，您可以将其组合或单独使用。例如，您可以使用 PixiJS 进行渲染，使用 SoundJS 处理音频部分等等……这些框架也都经过了实战检验，您可以查看 gskinner 的作品集来亲自体验。

优点：经过实战检验，通过模块系统实现模块化。

缺点：学习资源比下面的选项少。

PhaserJS

最受欢迎的PhaserJS是一套完整的 Web 和移动游戏开发工具。该框架拥有庞大且高效的社区，每周都能看到大量基于 PhaserJS 的新文章、演示和教程。这为那些想要在游戏开发领域迈出第一步并需要各领域教程的开发者提供了绝佳的环境。自第三版以来，它已成为性能最强的 Web 游戏框架之一。

优点：社区庞大，有大量可用的学习资源，功能丰富。

缺点：嗯，Phaser 2 在移动设备上存在严重的性能问题，但 Phaser 3 解决了这个问题（大部分），我真的不知道使用 PhaserJS 的当前缺点。

3D框架

ThreeJS

好的，所以您已经在使用 2D 框架了，或者您对 2D 不感兴趣，而想深入探索 3D 世界？好的，我再次为您提供两个避免直接操作 WebGL 的好工具。让我们从ThreeJS开始。

ThreeJS 是一个 JavaScript 3D 库，或许是最受欢迎的一个。它提供了一组函数，用于表示 3D 场景中常见的操作。它比原始的 WebGL 操作级别更高，因此你需要做的底层工作更少。

优点：流行、性能好、简单

缺点：我不太了解这个库，所以如果你知道它的不好之处，请在下面的评论部分分享。

BabylonJS

我认为我对BabylonJS 的看法与之前对 ThreeJS 的看法相同。主要区别在于 BabylonJS 比 ThreeJS 提供了更多的抽象，并提供了更多预构建的工具来管理 3D 场景。

优点：流行、性能好、简单......等等......我有一种似曾相识的感觉。

缺点：旧版本文档不全，但我最近发现新网站（和新文档）一切看起来都很酷。

结论

最后，只要你觉得游戏开发有趣，选择哪个框架其实并不重要。不要只关注框架的展示页面，选择那个能激发你灵感的就好。

你觉得 API 简洁美观吗？文档读起来是否赏心悦目？有没有不错的学习资源？如果你找到一个答案是肯定的，那么你应该选择它并开始为游戏评分。

一旦您掌握了基础知识，您就可以随时切换到您想要的任何语言/框架。

玩得开心。🎉