这两天好几个朋友跑来问我同一个词：Superpowers。我去查了下搜索趋势，“想要安装 superpowers”确实在往上爬。我一开始以为是哪家又出了效率软件，点进去才发现大家说的是那个开源的 HTML5 游戏开发平台。这篇文章就专门写给那些想装、但又不知道从哪下手的人：从它到底是个什么东西，到环境准备、完整安装过程、跑通第一个小 Demo，再到那些文档里压根不会写的坑，一次讲清楚。
我自己的情况是重度 Game Jam 玩家加小团队原型开发，大部分时候在浏览器里做 2D 原型。Superpowers 在这类场景里算是轻量又顺手的工具。下面这些内容都是我实际踩过坑之后整理出来的，尽量按“新手拿到手就能照着做”的标准来写。
1. 项目拆解：Superpowers 到底是个什么东西
1.1 它解决的核心问题
先说结论：Superpowers 是一个免费、开源、基于浏览器的实时协作式 HTML5 游戏开发平台。你不用在本机安装一个巨大的 IDE，而是把它的服务端跑起来，然后用浏览器打开控制台，就能创建项目、编脚本、摆场景、做动画、发布游戏。
听起来是不是有点像“把游戏编辑器搬到了网页里”？对，它的核心思路就是这样。传统游戏开发工具有几个很明显的痛点：第一，安装包动辄几个 GB，配置项一大堆；第二，多人协作基本靠 Git 或者外部同步盘，改个场景两个人没法同时在编辑器里操作；第三，教学和分享场景下，让对方装一套完整环境往往比写代码还劝退。
Superpowers 把这三件事一次性解决了。它本身是一个服务端程序，启动以后，所有参与者只要在同一网络里打开浏览器，输入地址，就能进同一个编辑界面。项目里的场景、资源、脚本、动画都是实时同步的，这点拿在线协作文档来类比特别贴切：一个人改，其他人马上能看到。
1.2 定位对比：和主流游戏制作工具差在哪
很多人第一次看到 Superpowers 时都会问：这和 GDevelop、Construct、Unity 有什么区别，为什么不用那些主流工具？
我拿自己用下来的体验做张表，大家感受会更直接：
| 对比项 | Superpowers | GDevelop | Construct 3 | Unity |
|---|---|---|---|---|
| 安装成本 | 安装 Node 环境后启动服务即可 | 需下载桌面端安装包 | 浏览器版但商业授权有门槛 | 安装包几个 GB，硬件要求高 |
| 编辑器位置 | 全浏览器，打开地址即用 | 本地窗口 | 浏览器为主 | 本地窗口 |
| 多人实时协作 | 原生支持，实时同步 | 基本靠外部版本控制 | 专业版有 limited 协作 | 需要团队版或外部方案 |
| 脚本语言 | TypeScript | 可视化事件表/JavaScript | JavaScript | C# |
| 上手曲线 | 低到中 | 低 | 低 | 偏高 |
| 适合场景 | 2D 原型、远程合作、Game Jam | 2D 小游戏、教学 | 2D 商业项目 | 3D、重度商业项目 |
这表其实就能看出 Superpowers 的取舍：它不追求做大型 3D 商业作品，它的主场是 2D 游戏、快速原型、远程协作和教学。换句话说，如果你想三天内和异地朋友一起做一个小游戏去参加 Game Jam，Superpowers 几乎是最省事的方案。
1.3 适合谁、不适合谁
适合的人：
- 需要远程协作做游戏的人，特别是队友分布在不同的操作系统上。
- 想在教学中降低环境配置成本的人，老师只需要准备一台服务器。
- Game Jam 爱好者，快速验证玩法。
- 喜欢 TypeScript、想做 HTML5 游戏但又不想折腾构建流程的人。
不适合的人：
- 目标一上来就是商用 3A 或复杂 3D 项目的人。
- “摆弄工具>做游戏”的人。Superpowers 的哲学是简单直接，深度自定义能力还是不如 Unity 那类大引擎。
- 只打算静态导出给微信小游戏等特定平台的人。它导出的是标准 Web 产物，之后的平台适配你得自己打通，官方没有全套一键多渠道席。
2. 安装前必读：环境判断与准备
2.1 运行时依赖其实很少
很多人一听到“安装”就把事情想复杂了。Superpowers 服务端主要依赖就是 Node.js 和现代浏览器。我第二次装的时候基本上只需要检查两样东西：Node.js 版本够不够新、浏览器是不是 Chromium 内核。
Node.js 的版本要求不算苛刻，建议装当前 LTS 以上版本。如果你机器上已经有开发环境，直接在终端里执行node -v看一下版本号，如果显示是 v18 或更高，基本稳了。如果版本太老，去官网下载对应安装包覆盖装一遍就行，不需要卸载旧版本。
浏览器方面，我用得最稳的是 Chrome、Edge 这一类 Chromium 内核浏览器。Firefox 也能用，但我遇到过某些旧版本动画编辑器界面排版错位。Safari 是最不推荐的，不是说完全不能跑，而是遇到问题的时候网上能找到的解决方案大多是 Chromium 内核下的经验，排查起来容易变成孤例。
2.2 选择源码包还是发行包
Superpowers 的主流使用方式有两种，一种是从项目仓库拉源码自己起服务，另一种是下载官方打包好的安装器，图形化界面一路确认。
我的建议是：
- 只想本地自己开发，下载官方安装器最省事。
- 需要部署到服务器给团队用，或者在 Linux 无桌面环境跑，走源码方式更灵活。
- 你手里拿到的发行包可能不是最新版本，而源码仓库里通常包含最新修复和实验功能。
我自己用的是源码方式，原因很实际：我有一台常年开着的小服务器，把服务丢上去以后，团队成员随时随地用浏览器访问。这样电脑没带、系统装不了环境都不影响开发进度。
2.3 安装步骤逐条走
下面以源码方式为例，从零开始完整走一遍。操作系统这边我以 macOS 和 Linux 的终端命令为例，Windows 用户把命令在 PowerShell 里执行，原理完全一样。
第一步：确认 Node.js 可用。
node -v npm -v第二步：拉取仓库。
git clone https://github.com/superpowers/superpowers.git如果你所在网络访问 GitHub 不稳定，可以考虑把仓库下载成 ZIP 包再解压，效果一样。这一步的核心是拿到完整的项目目录。
第三步：进入项目目录并安装依赖。
cd superpowers npm install这里有一个常见的坑：如果安装过程卡住不动，或者报各种network错误，多半是 npm 默认源在你的网络环境下访问太慢。解决办法是切换镜像源：
npm config set registry https://registry.npmmirror.com装完之后再把源切回来也行，不是必须。我这边的经验是装完后保持镜像源没多大影响，但如果你的团队需要发布自己的 npm 包，建议切回官方源。
第四步：启动服务。
npm start首次启动会花一点时间初始化配置。看到类似Superpowers server is running on port 80的提示时，就说明服务已经在跑了。这里可能有人会问：为什么提示的是 80 端口？Superpowers 确实比较喜欢直接占 80，但如果你机器上已经跑了 Nginx 或者其他 Web 服务，启动时会冲突，解决办法是改环境变量或者配置自定义端口，具体我放在后面“常见问题”部分细说。
第五步：打开控制台。
启动成功后，打开浏览器，访问http://localhost。如果端口没改，默认就是 80。页面会要求你填写用户名，填完以后你就正式进入管理控制台，可以创建主机、创建项目了。
3. 实操全流程：从创建项目到跑通第一个 Demo
3.1 启动服务并创建你的第一个项目
刚进控制台的时候，界面可能有点空。很多新手会懵一下，不知道该点哪里。流程是这样的：
第一步，创建一个“主机”。你可以把主机理解成运行游戏的服务实例，一个主机可以同时运行多个项目。点击创建主机之后，系统会分配给它一个端口。
第二步，在主机面板里点击“新建项目”。填好项目名称，选择模板。Superpowers 自带的模板会把基础资源、场景和脚本结构都搭好，我建议新手一开始直接选空项目或者平台游戏模板，别选太复杂的 3D 模板，因为 2D 工作流才是它的舒适区。
创建完成后，点击项目名称进入编辑器。这时候你才算真正“上手”了 Superpowers。
3.2 编辑器界面布局速览
Superpowers 的编辑器是纯网页端，界面布局和 Unity 有点像，但更简洁，主要分四块：
- 场景编辑器：中间最大的区域，用来摆布 Actor，也就是游戏对象。所有的视觉元素、相机位置、碰撞体都在这块画布上调整。
- 层级面板：左侧列出当前场景里的所有 Actor 层级关系。你要改哪个对象的父子关系、隐藏与否，都在这里操作。
- 资源面板：下方列出项目里所有素材，包括纹理、声音、动画、脚本、场景。
- 脚本编辑器：右侧是代码区域，选中脚本以后直接在里面改代码。
这几个面板的位置不是死的，熟悉以后可以把它们拖到任意位置。有一点要留意：你的每次修改都会实时同步给其他在同一个项目里的协作者，所以别在团队协作时随手乱删资源，这个我后面还会讲到。
3.3 让第一个角色动起来
我们直接做一个最简单的小实验：创建一个方块，让它跟着键盘方向键移动。这个 Demo 能跑通，就说明整个安装流程完全没问题。
先在层级面板点击“创建 Actor”，给它改个名字，比如叫Player。点击这个 Actor 之后，在资源面板找到 “Sprite” 渲染器，给它添加一个方块纹理。如果你用空模板没有自带纹理，就直接新建一个 1x1 的白色纹理，然后在场景编辑器里拉伸角色缩放，效果一样的。
接下来新建一个脚本，名字随意，内容参考下面这段 TypeScript：
class PlayerBehavior extends Sup.Behavior { speed = 3; update() { let move = new Sup.Math.Vector2(0, 0); if (Sup.Input.isKeyDown("LEFT")) move.x -= this.speed; if (Sup.Input.isKeyDown("RIGHT")) move.x += this.speed; if (Sup.Input.isKeyDown("UP")) move.y += this.speed; if (Sup.Input.isKeyDown("DOWN")) move.y -= this.speed; this.actor.move(move); } } Sup.registerBehavior(PlayerBehavior);这段代码的逻辑不复杂：每一帧判断方向键是否被按下，然后把位移向量叠加到角色上。如果你的版本 API 略有出入，以你安装版本内置的示例脚本为准，但思路是一致的。
脚本写完以后，把脚本作为组件拖到Player这个 Actor 上，再点击预览按钮，浏览器会打开一个新页面显示游戏画面。这时候按方向键，方块如果动起来了，你就已经完整走通了 Superpowers 的开发流程。
3.4 预览、保存与打包导出
预览功能是开发时用的，真正要给其他人玩，需要“构建导出”。
预览时可以用顶部的预览按钮，也可以按快捷键。Superpowers 会生成一个临时页面，在这个页面里跑你的游戏逻辑。适合快速验证。
导出在控制台的项目设置里，可以生成一份基于 HTML5 的静态 Web 游戏文件包。拿到这个包以后，放到任意静态服务器上都能访问。我想强调一点：Superpowers 帮我们把游戏逻辑和资源都处理好了，但它默认不会帮你做渠道 SDK 对接这类事情。你要发到某个小游戏平台，需要自己写胶水代码调用平台提供的 API。
4. 常见问题排查与避坑技巧
4.1 启动服务时最容易爆的错
我见过最多的问题几乎都集中在“启动”这一步，这里把高频报错和解决办法整理成一张速查表：
| 现象 | 可能原因 | 解决办法 |
|---|---|---|
| 端口被占用，服务起不来 | 本机已经跑了 Nginx、Apache 或其他 Web 服务 | 改 Superpowers 的端口配置，启动后访问对应端口 |
| npm install 卡住或报网络错误 | 默认 npm 源访问太慢 | 切换镜像源后重试 |
| 页面能打开但登录后白屏 | 浏览器版本太旧 | 换 Chrome/Edge 最新版重试 |
| 启动后提示找不到某些模块 | 依赖安装不完整 | 删除node_modules目录，重新npm install |
| git clone 超时 | 网络环境到 GitHub 不稳定 | 下载仓库 ZIP 包，或使用代理节点拉取 |
端口问题我再补充两句。Superpowers 默认占用 80 端口，在 Linux 服务器上，非 root 用户启动有时候会因为没有权限绑定到 80 端口而直接报EACCES。这种情况下有两个思路：一是用 root 权限跑，二是在配置里指定高位端口比如 8080，然后访问http://服务器IP:8080。我个人喜欢用高位端口，省得权限问题纠结。
4.2 多人协作连接失败怎么办
Superpowers 的原生协作模式是：一个人启动服务端，其他人在同一个网络内访问这台机器的 IP 和端口。
如果你和队友不是同一个局域网，最常见的做法是把服务部署到一台有公网地址的云服务器上，然后所有人都访问同一个域名。我这边踩过的坑是：部署到云服务器后，有人在公司网络里打不开页面，因为公司防火墙把非常用端口挡了。解决路径是把服务放到 443 端口并挂上 HTTPS，或者让管理员放行对应端口。
另外一个容易忽略的点是服务器防火墙本身。云平台会有安全组规则，你在启动服务前一定要确认安全组里放行了对应的入方向端口。不然服务明明已经跑起来，别人还是连不上，最容易让人白忙活半小时。
4.3 编辑器变卡、资源管理不当
Superpowers 在处理小体量 2D 项目时非常流畅，但如果你把一张 4000x4000 的大图直接拖进场景，编辑器会明显变卡。原因是浏览器在实时渲染场景时需要对超大纹理做全面的缩放处理，连续操作几次就能感觉到画面掉帧。
我的建议是：美术资源导入前先按实际使用尺寸压缩。比如游戏相机视口只有 1920x1080，那背景图压到 2048x2048 以内足够，没必要用原始 4K 大图。纹理压缩不仅仅是为了编辑器流畅，也直接影响导出后的加载体积，对网页游戏的首屏体验特别重要。
声音资源也一样，尽量用压缩过的ogg或m4a格式，不要直接丢无损 WAV。浏览器加载页面时把所有资源一次性拉完，体积越小，玩家等待时间越短。
4.4 版本备份与协作规范
Superpowers 自带版本历史功能，这是很多人不知道的。在项目控制台里，系统会定期为项目生成快照，你可以在出问题时回滚到之前的版本。但我强烈建议你不要只依赖自动快照。
理由很简单：自动快照的粒度不一定正好覆盖你的关键节点。比如你花三小时搭好了整套玩法框架，自动快照可能正好落在你改了一半的某个时刻，回滚回去会把半成品状态恢复出来，反而更混乱。
我团队现在的规范是：每完成一个可运行的小功能，就手动创建一个命名快照，标注版本号和功能描述。这样回滚永远是回滚到“上一个能跑的状态”，而不是回滚到“某次改了一半的状态”。这条习惯救过我们好几次，Game Jam 赶进度的时候尤其有用。
还有一条协作规范特别重要：谁要动共享项目里的公共场景，先和其他人打声招呼。因为 Superpowers 是实时同步的，两个人同时大范围改动同一张场景地图，很容易把对方的布局覆盖掉。虽然版本历史能找回，但冲突解决的过程非常痛苦。我们后来改成“单人改场景、多人改脚本”的分工模式，冲突概率直线下降。
5. 我的实操心得与小技巧
作为一个从下载源码折腾到部署上线全程体验过的人，我最后分享几个私藏的使用技巧。
第一，快捷键一定要花十分钟记。Superpowers 的场景编辑器支持快捷键操作，比如复制、粘贴、对齐、缩放。用鼠标慢慢拖当然也能做，但效率差一倍。新手最容易忽略的是视角缩放快捷键，以为只能靠滚轮，其实还支持适配视图这类快捷操作，做复杂关卡时很有用。
第二，修改脚本之后不需要重启服务。很多新手以为用编辑器写代码像传统后端那样，改完要重启整个服务。Superpowers 的脚本热替换做得相当到位，大多数场景下你切回场景视图，游戏预览里就能直接体现最新的逻辑。这个感知可能就是这个工具最迷人的地方。
第三，如果遇到无法解释的渲染问题，先用浏览器无痕模式打开编辑器试一下。浏览器插件经常会干扰 canvas 渲染或者资源加载，我用 Chrome 的时候吃过一次插件屏蔽脚本的亏，排查半天，结果换个无痕窗口一切正常。
根据我个人的实际经验，Superpowers 最舒服的使用方式是把它定位成“团队的原型实验室”和“教学环境”，而不是重型商业引擎。摆正这个预期之后，它带来的协作顺畅感远超同类工具。最后再分享一个小技巧：建议团队里专门安排一个人负责资源的导入和整理，避免每个人都往根目录扔文件，几个小时后资源面板就乱到无法直视。等哪天你连续做了三四个项目，再回头看这套管理习惯，就会觉得它特别值钱。
