看到 superpowers 这个词，如果你不常逛游戏开发社区，第一反应多半是超级英雄电影里的设定。但在开源工具圈，它其实是一个以 TypeScript 为主体开发语言的 HTML5 游戏开发环境。我第一次在朋友的项目目录里看到它时，还以为是某个自定义脚本库，后来才发现，它把自己整个编辑器、服务器、协作体系都打包进了一个可安装的程序。你把它下载下来运行，就能在浏览器里搭建 2D/3D 场景、写游戏逻辑、实时预览，还能拉上朋友一起在线编辑同一个项目。
这篇文章主要面向两类人：一类是想快速上手做网页小游戏的学生或独立开发者，另一类是单纯好奇这工具到底能干什么、值不值得装的人。我会从安装讲起，一直讲到创建第一个可以动的场景，还有我实际使用中遇到的一堆怪问题。整个过程不复杂，但里面有一些细节如果不提前知道，真的会卡住很久。
1. 先弄清楚 Superpowers 是什么，再决定要不要装
1.1 它不是滤镜也不是漫画梗，而是一个游戏开发环境
Superpowers 是多年前开源社区里一个很有想法的项目。它给自己的定位是 HTML5 游戏开发平台，核心思路是“可视化编辑器 + 本地服务端 + 浏览器客户端”。你安装之后，实际等于在自己电脑上跑了一个小型游戏服务器，然后用浏览器打开编辑器页面，像使用一个网页版 IDE 一样去开发游戏。
它和 Unity、Godot 这类完整引擎有一个明显区别：Superpowers 把重心放在网页游戏上，并且特别强调协作。它不是一个人闷头开发，而是可以让多个人同时打开同一个项目，一起改场景、改脚本，这种体验有点像多人同时编辑一个在线文档，只不过文档内容换成了游戏资源。
它的脚本语言是 TypeScript，编辑器里的对象被称为 actor（我习惯叫它“游戏对象”或者“演员”），场景由一堆 actor 组成。你在编辑器里摆放一个立方体出来，挂一个脚本组件上去，写几行移动逻辑，再按一下播放，就能在预览视图里看到它动起来。整个过程非常轻，像我这种从代码编辑器起步、不爱开重型引擎的人，反而更容易上手。
1.2 为什么“装”会跟“用”绑定在一起
很多开发工具装完只是一个入口，你还得额外配环境、装依赖、调变量。Superpowers 的设计思路不太一样：安装包本身就内置了运行所需的组件，你不需要先去装 Node.js，也不用自己申请数据库，因为它把本地服务器一起打包了。装完启动之后，它就默默监听一个本地端口（常见的是 4237），然后你打开浏览器访问 http://localhost:4237，就能进入编辑器界面。
这种“装完即用”的思路在现在看来可能不算稀奇，但对当时的网页游戏开发来说已经很友好了。它把新手最容易被吓跑的“环境配置”环节压缩到了接近零。你唯一要做的，就是把安装包下载下来，解压，运行，然后等浏览器打开。
1.3 适合哪些人、不适合哪些人
如果你是想验证一个玩法原型、写一个小游戏作业、或者对多人协作式开发好奇的人，Superpowers 非常合适。因为它简单直接，你不用起一个庞大的工程，也不需要理解复杂的渲染管线。
但如果你要做重度商业项目、要发布到原生手机应用商店，或者对引擎的长期维护和持续更新有强要求，那它并不适合。它更像一辆轻便的自行车，适合在社区里转转，不适合上高速拉货。这个定位决定了它的使用场景：快速试错、教学演示、老项目回炉。
2. 安装前的 4 项准备工作
2.1 确认系统与磁盘空间
Superpowers 支持 Windows、macOS 和 Linux，这一点对跨平台用户很友好。安装包体积不大，但解压后还有一些资源文件，建议至少预留 2GB 的空闲空间，虽然实际可能用不到这么多，但给后面创建项目和构建输出留点余量总是没错的。
内存方面，如果你只是编辑 2D 项目，4GB 内存的电脑也能凑合跑；如果是 3D 项目，建议 8GB 以上。我遇到过最明显的情况是：内存不够时，编辑器切场景会明显卡顿，预览画面也会掉帧。这不是引擎优化的问题，而是浏览器页面本身吃资源。
| 环境 | 建议配置 | 备注 |
|---|---|---|
| 操作系统 | Windows 7 及以上 / macOS / Linux | 64 位系统更稳 |
| 内存 | 4GB 以上 | 3D 项目建议 8GB |
| 磁盘 | 至少 2GB 空闲 | 项目资源和构建输出都会占空间 |
| 浏览器 | Chrome / Firefox / Edge | 编辑器界面运行在浏览器中 |
2.2 端口与防火墙心里要有数
Superpowers 启动后会在本地开一个服务端口，默认是 4237。第一次运行时，操作系统可能会弹出防火墙提示，询问是否允许程序监听端口。如果你只是自己一个人用，选“取消”或“拒绝”也没太大影响；但如果之后想让局域网里的同事也打开你的编辑器，就必须选择“允许”。
这里要注意一个容易误会的点：这个端口只在你的电脑上监听。别人想访问时，用的是你的局域网 IP，比如说 http://192.168.1.8:4237，而不是 http://localhost:4237。localhost 这个地址永远指“当前这台电脑自己”，别人访问不到。
2.3 备份好现有项目目录
虽然 Superpowers 本身自带项目管理功能，但它的项目实际就是存放在本地目录里的一组文件。我见过有人清理磁盘时不小心把项目目录当临时文件删了，结果辛苦摆好的场景全没了。
建议安装之前先确定一个专门的目录来放项目，比如D:\SuperpowersProjects或者~/superpowers_projects。之后导出、备份、迁移都从这个目录操作，心里踏实很多。官方文档里常见的做法是把项目放在安装目录下的projects子目录中，但具体位置并不重要，重要的是你要知道文件在哪里。
2.4 有 Node 也不会冲突，别担心
有些人可能会问：Superpowers 用 TypeScript，是不是得先装 Node.js？其实不用。安装包自带了所需的脚本运行时和环境，外部装不装 Node 都不影响使用。如果你电脑上已经有 Node 环境，也不会产生冲突，因为它们各自管理各自的组件，互不干扰。
不过有一点要注意：如果你在写代码时用了某些需要编译期的库，还是得靠构建功能来处理，它会把 TypeScript 编译成浏览器能直接运行的 JavaScript。这里面不需要你手动敲编译命令，编辑器里有对应的构建入口。
3. 一步步把 Superpowers 装起来
3.1 Windows 下的安装流程
Windows 上安装 Superpowers 大概是三个步骤：下载、解压、运行。下载得到的是一个压缩包，用系统自带解压工具解压到任意目录即可。建议不要放在系统盘根部，也不要放在带中文的路径下，因为后面的构建工具在处理中文路径时偶尔会出现编码问题。
解压完成后，找到 Superpowers 的可执行文件，双击运行。第一次启动可能没有立刻弹窗口，因为它在后台启动本地服务。如果系统弹出 SmartScreen 提示，说“已保护你的电脑”，不要慌，这是因为软件没有使用商业数字证书。点击“更多信息”，再选择“仍要运行”就行。
然后打开浏览器，输入http://localhost:4237。如果看到登录或欢迎页面，就说明本地服务已经正常起来了。
3.2 macOS 上常见的“无法打开”处理
macOS 上安装更接近解压即用：把压缩包解压出来，得到.app文件或可执行文件。第一次双击时，系统可能会因为缺少开发者签名而拦截，提示“无法打开”或者“已损坏”。
这是老工具在 macOS 上经常遇到的情况，不是软件真的坏掉了。解决方法很简单：去“系统设置 - 隐私与安全性”，往下滑，会看到关于这个软件的拦截提示，点“仍要打开”即可。不要看到“已损坏”就急着删掉重下，很多老一点的开源软件都会有这个问题。
3.3 Linux 下用压缩包还是包管理器
Linux 用户大概率拿到的也是.tar.gz压缩包。解压后先确认有执行权限，如果没权限，在终端里执行：
chmod +x Superpowers然后运行图形界面版：
./Superpowers如果你用的是纯命令行的服务器环境，也可以尝试无头模式启动，只要在启动时加一个 server 参数即可。不过我不建议新手一上来就折腾无头模式，先在本机图形环境下跑通再说。Linux 上如果缺少一些图形库，启动后可能会出现白屏、黑屏，这类问题通常和系统缺少依赖库有关，先更新系统基础库再试。
3.4 安装完成后的第一步
服务启动后，浏览器打开编辑器页面。第一次进去，系统会让你设置一个编辑者昵称，这个昵称主要用来在多人协作时区分操作者。之后你就能看到项目列表页面，右上角有新建项目的入口。
此时安装过程就算真正完成了。我建议你把浏览器地址栏里的端口记住，以后每次启动 Superpowers 都用同一套流程：先启动程序，再打开地址。如果觉得每次手动打字麻烦，可以把它加到浏览器书签里。
4. 动手做第一个项目：从空白场景到一个会移动的方块
4.1 新建一个项目
在项目列表页面点“新建项目”，会看到模板选择界面。不同版本的模板叫法可能略有差别，但大体分成三类：空项目、2D 项目、3D 项目。
如果你之前完全没接触过，我建议直接选 3D 项目，因为 3D 场景里能直观感受到坐标、摄像机、光源这些东西之间的关系。选一个项目名称，注意用英文，不要用中文。这一步我踩过坑，项目名里带中文时，后续构建输出到某些静态服务器上会出乱码路径。
4.2 认识编辑器界面的几个区域
进入项目后，你会看到一个主编辑器界面。不用被它吓到，核心区域就几块：左边是资源树，用来放场景、脚本、模型、贴图等资源；中间是场景视图，用来摆放和调整物体；右边或下方是属性面板，用来修改选中对象的参数。
先把场景里默认带的东西看一遍：一般会有一个摄像机、一个光源。你选中摄像机时，属性面板里会显示它的位置、旋转角度等参数。比如把摄像机的 Y 轴位置调高一点，场景视图里看到的画面就会变成俯视，这个操作是在帮你理解三维坐标的位置关系。
4.3 摆一个方块并挂上脚本
新建一个立方体对象，把它放在坐标 (0, 0, 0) 附近。然后在资源树里新建一个脚本，起个名字叫Player，双击打开脚本编辑器。里面会自动生成一个类，继承自Sup.Behavior，这个基类就是 Superpowers 里所有自定义行为的基础。
在update()方法里写一行简单的移动逻辑，让方块按键盘方向键移动：
class Player extends Sup.Behavior { speed = 0.1; update() { if (Sup.Input.isKeyDown("LEFT")) { this.actor.moveOrientedX(-this.speed); } if (Sup.Input.isKeyDown("RIGHT")) { this.actor.moveOrientedX(this.speed); } } }脚本写完后，回到场景，把脚本拖到立方体对象上，让它成为这个对象的一个组件。这个操作和 Unity 里给物体挂脚本非常像。挂好之后，点编辑器里的播放按钮，画面进入预览模式。这时候按左右方向键，方块就应该能动了。
4.4 把项目构建成网页游戏
当你觉得场景没问题了，就可以构建输出。构建功能会把整个项目编译成静态文件：一个index.html入口文件、若干 JavaScript 文件和资源文件。你指定一个输出目录，构建完成后，把这整个目录上传到任意静态网站托管空间，别人就能通过网址打开这个游戏。
我自己测试构建输出时，一般先在本地起一个简易静态服务器看效果。如果显示白屏，优先检查是不是路径问题。构建输出的文件内部默认使用相对路径，大多数情况下不会出问题，但如果你自己改了目录结构，就很容易导致资源加载失败。
5. 进阶玩法：多人协作、公共服务器与常见陷阱
5.1 多人在线协作的原理
Superpowers 的协作功能是我认为它最有想象力的部分。它的服务端会记录每个操作者的意图变化，并通过同步机制把场景状态广播给其他客户端。简单理解就是：大家连的是同一个服务端，服务端把每个人的改动实时合并，然后推给其他人。有人移动了物体，另一个人立刻就能看到。
这个机制在局域网里体验特别好。我和朋友曾经在同一台主机上启动 Superpowers，然后两个人分别用不同的浏览器窗口连进去，一个改场景，一个写脚本，整个过程就像一起在做实时编辑。你不需要额外安装什么协同工具，只要服务端开着，大家就能加入。
5.2 局域网联机的小技巧
想要局域网里别人能访问你的编辑页，第一步是查你自己的内网 IP。Windows 下在命令行输入ipconfig，macOS 和 Linux 下输入ifconfig或ip addr，找到局域网地址。
然后把localhost换成这个内网 IP 发给同事，例如http://192.168.1.8:4237。对方打开后就能看到同一个项目列表。这里有个隐藏问题：如果对方打开后一直转圈进不去，大概率是防火墙没有放行 4237 端口，回看安装前准备里说的防火墙设置。
如果你还想让不同城市的人远程加入，那就需要一台有公网地址的服务器来跑服务端，再把端口映射到公网。不过这样做之前要慎重评估安全风险，毕竟直接把端口暴露在公网上等同于把编辑权限开到公网，建议只在受信任网络里使用这种远程协作方式。
5.3 备份和迁移项目的正确姿势
项目迁移没必要用编辑器自带的导入导出。最简单的办法是直接找到项目目录，整个文件夹打包成压缩包，传到新电脑之后解压，再通过项目列表打开。
迁移时容易忽略的是资源完整性。有些人手动删了资源目录里的文件，然后在编辑器里发现模型贴图变红了，这就是引用的资源丢失了。我个人习惯是，每次大改动之后把整个项目目录复制一份，按日期命名，比如project_backup_20250115。这个方法笨，但可靠。
6. 官方停更之后：继续用还是换别的引擎
6.1 项目现状与风险
Superpowers 的更新节奏已经放缓很多年了。从社区仓库的活跃度来看，基本属于停更或极低频率维护状态。这意味着你遇到小 bug 时，大概率等不到官方修复，只能自己改源码或绕开。
但它有个好处：作为一个开源项目，它的代码是透明的，而且本地运行不依赖在线授权。也就是说，就算官方网站以后打不开了，只要你有安装包文件，它依然能在本地跑起来。对一个教学工具或研究用的引擎来说，这种稳定性其实很重要。
6.2 替代方案和迁移思路
如果你想找一个长期维护、社区活跃的同类工具，我更推荐 Godot。它同样开源，也支持 2D/3D，脚本语言是 GDScript，语法比 TypeScript 更接近 Python，新手也容易上手。如果你只是想做网页小游戏，Phaser 也是一个不错的纯代码选择。
从 Superpowers 迁移到别的引擎，不建议直接想着“代码复用”。因为每个引擎的对象模型、生命周期、输入系统都不一样，硬搬脚本会花更多时间。我的建议是把手里的项目当原型，在新引擎里重新搭一遍，逻辑可以保留，代码重写。
7. 我踩过的一些坑，写在最后
使用 Superpowers 的过程中，我基本上把新手上路会遇到的坑都踩了一遍。
第一个坑是项目名和文件名用了中文，后来把构建产物放到服务器上时，有些路径解析失败，个别贴图加载不出来。从那以后我所有项目都用英文命名，脚本文件名也坚持用驼峰式，比如PlayerController、EnemyAI。
第二个坑是音频和图片格式。Superpowers 的网页游戏最终跑在浏览器里，如果资源格式不被浏览器支持，预览时就会出现播放失败。图片尽量用 PNG，少量大图可以用 JPG，音频用 OGG 或 MP3，避免使用冷门格式。
第三个坑是编辑过程中的保存动作。不要频繁手动刷新浏览器页面，尤其是在多人协作时。我试过一次，正在保存场景的时候不小心点了刷新，结果本地状态和服务端状态对不上，场景里的一个物体现在出现在错误的位置。重启服务端才恢复正常。后来我每次改完都等编辑器界面左上角的同步状态提示消失，再进行下一步操作。
第四个坑也值得提一下，就是构建输出时的目录选择。如果你把输出目录选在项目目录内部，下一次构建时可能把旧文件和新文件混在一起。我在一次构建时选错了目录，服务端直接读取到了旧版本，导致我白白改了两小时。现在我都会把构建输出单独放在项目目录外面，例如D:\Builds\my_game。
如果你只是单纯想用浏览器开发一个小游戏、体验一下多人协作式开发，Superpowers 装上玩一玩完全不亏。它虽然不像现代引擎那么光鲜，但代码结构很简洁，TypeScript 的写法放到现在依然不算过时。我个人至今还会用它快速验证一些简单玩法，这个过程给我的收获，比打开一个重型引擎对着密密麻麻的面板发呆要快得多。
