看到 superpowers 这个项目名时我脑子里冒出来两个想法一是某个超级英雄题材的粉丝项目二是某个收集浏览器扩展的仓库。实际接触下来完全不是这么回事——它是一个开源的、自托管的、基于浏览器的协作式 HTML5 游戏创作环境。装上服务端以后团队里每个人打开浏览器就能进入同一个游戏项目拖资源、摆场景、写 TypeScript 脚本所有人的改动实时同步。这套东西在快速原型、游戏课程教学、远程头脑风暴这类场景下特别好用而且不需要安装 Unity 那种动辄几个 GB 的编辑器。这篇文章是我把 Superpowers 从安装、上手到做完一个小游戏全流程的记录包括踩过的坑和中间想明白的一些设计逻辑给想用它做点东西的朋友一个参考。1. 先给它定位Superpowers 不是又一个 Unity 替代品而是浏览器里的协作式游戏工作台1.1 它的架构决定了它的性格Superpowers 严格来说不是传统意义上的“客户端软件”而是一个“Node.js 服务端 浏览器客户端”的组合。你不需要在自己的电脑上安装任何游戏引擎只需要在一台机器本地笔记本或云服务器上跑起服务端然后所有人用浏览器访问同一个地址就能进入各自的项目开始干活。这个架构带来的连锁反应是项目文件不散落在团队成员的电脑里资源、场景、脚本、设置全部集中在服务端统一管理。这个设计为什么重要因为长期做协作开发的人都会懂团队协作最浪费时间的事情就是“环境对齐”。我见过太多次小组作业为了让大家跑通同一份 Unity 工程光是装版本、装依赖、导资源就折腾掉一晚上。Superpowers 把版本管理、资源同步、运行环境全部收敛到服务器端之后一个新成员加入项目的成本被压到极低——打开浏览器输入地址完事。另外值得一提的是它对设备的要求低到令人发指。我在一台只有 4GB 内存的旧笔记本上跑服务端同时开三个浏览器窗口编辑和预览依然流畅。这在 Unity 里基本是不可想象的。1.2 和 Unity、Godot、GDevelop 放在一起看很多人一听到“游戏制作工具”第一反应就是 Unity 或者 Godot。确实这些引擎功能全面、生态成熟但它们在协作这个维度上都需要额外配置版本控制或者多人同步方案。Superpowers 的定位不太一样它补的是“开箱即用的多人协作 轻量部署”这个空隙。我整理了一个简单的对比方便你判断自己的需求更偏向哪个工具核心优势协作便利度上手曲线代表性用途Unity功能全面、资产商店大、跨平台需要额外配置陡峭商业游戏、复杂 3D 项目Godot开源、节点系统直观、轻量需额外配置中等独立游戏、2D/3D 项目GDevelop无代码事件表、快速出原型一般平缓编程基础薄弱的快速原型Twine叙事文本游戏、超链接式场景一般平缓互动小说、文字冒险Superpowers浏览器访问、内置实时协作、TypeScript 脚本原生支持中等教学、原型验证、团队远程协作从这张表能看出来Superpowers 并不是要在画面表现力上跟 Unity 硬碰硬它的核心卖点是“协作”和“零客户端”。如果需求是多人一起做一个玩法原型而不是追求商业级的画面效果它会是一个非常顺手的工具。1.3 什么样的人用它会比较顺手我实际用下来觉得以下四类人是最匹配这个工具的编程老师、培训讲师给整个班开一个服务端学生用浏览器就能进项目。老师甚至可以进到学生的项目里实时看对方改到哪一步了这在远程教学场景里是降维打击。独立开发者做玩法验证、Game Jam 原型的时候不需要花半小时新建工程打开浏览器就能动手。远程小团队几个人同时在一个场景里改东西比对着屏幕共享软件讨论需求直观得多。喜欢折腾开源代码的人项目本体是 TypeScript 写的前后端都能改可以自己加功能、接自己的登录、集成到现有系统里。换句话说如果你想找的是一个“游戏界的在线协作文档”那么 Superpowers 的基本盘就是为你准备的。2. 安装部署实录一台普通笔记本就能把项目服务跑起来2.1 环境准备一个 Node.js 就够了Superpowers 的服务端是 Node.js 应用所以最基本的环境要求就是 Node.js 和 npm或 yarn。我在测试时分别用了 Node 16 和 Node 18 的 LTS 版本都能正常跑通。另外需要一个 Git 客户端用来拉取仓库代码。Windows、macOS、Linux 都可以跑没有特殊的平台限制。这里有一个小建议尽量使用 Node 的 LTS 版本不要用非稳定版或太老的版本。我在折腾的过程中发现某些依赖对 Node 的版本很敏感版本太老会导致依赖编译失败版本太新又可能触发兼容警告。选 LTS 是最少折腾的路径。2.2 安装步骤与启动命令安装过程非常标准就是克隆一个仓库、装依赖、启动git clone https://github.com/superpowers/superpowers.git cd superpowers npm install npm startnpm install这一步在部分网络环境下会特别慢甚至卡住不动。如果遇到这种情况临时切换 npm 源到国内镜像一般就能解决npm install --registryhttps://registry.npmmirror.com启动之后控制台会打印出访问地址。服务端口是固定的默认端口具体以你当前版本控制台提示为准浏览器打开对应地址就能看到 Superpowers 的主界面。如果你是远程服务器部署记得把对应端口在防火墙和安全组里放行否则外部访问会被拦住。2.3 创建第一个项目别再踩我选错模板的坑浏览器进入主界面后你会看到本机/服务器上运行的服务列表。点击“新建项目”输入项目名称然后选择模板。我第一次选的是“空项目”模板进去之后发现场景里连个方向光都没有相机、地面、角色全都要自己搭对新手很不友好。后面我学乖了选了一个自带基础场景的官方模板里面有现成的相机、光照和几个示例实体。这个选择让我的第一个 Demo 提前至少两小时跑通。项目创建好之后Superpowers 会把项目的所有数据存放在服务端的数据目录下。这个目录相当于整个项目的“心脏”场景、资源、脚本、设置全部在里面。你之后做备份、迁移、恢复都是围绕这个目录来操作。我建议你从第一次创建项目开始就把它找出来放到一个显眼的地方。2.4 我遇到的几个典型部署问题端口被占用如果你机器上已经有其他服务占用了默认端口启动会直接报错。解决方法是改端口配置或者先停掉占用进程。防火墙/安全组拦截这在云服务器部署时最常见。服务端跑起来了浏览器却访问不了十有八九是安全组没放行端口。浏览器缓存如果你反复启动新版本服务端浏览器可能会缓存旧的客户端资源导致界面和实际版本不一致。遇到奇怪问题时先强制刷新或开一个无痕窗口试试。项目数据乱放如果不确认数据目录位置备份时把所有相关目录打包一遍是最稳妥的。虽然打包体积会大一点但至少不会漏。3. 编辑器里的日常拖资源、摆场景、挂脚本的三步循环3.1 资源面板团队的“公共仓库”进入编辑器后左侧的资源面板是项目的资源仓库。这里可以创建文件夹、上传图片、音频、模型、字体也可以直接在项目里创建场景文件和脚本文件。一个很关键的点是所有资源都存储在服务端团队成员看到的是完全相同的资源列表。你可以像用网盘一样组织目录结构但比网盘强的地方在于资源一旦上传所有人都立刻能用到。我用下来的组织习惯是这样的三层结构assets/存放美术素材、音频、字体等原始文件。scenes/存放游戏场景文件。scripts/存放 TypeScript 脚本。这个结构不一定是最优解但胜在简单直接团队成员一看就懂。如果你有更复杂的项目建议按玩法模块继续细分比如把角色、关卡、UI 的素材和脚本各自放到独立目录下。3.2 场景与实体用组件拼积木场景编辑是 Superpowers 的核心操作。它的基本模型和主流引擎一致场景里有一棵实体树每个实体可以挂载多个组件。Transform 控制位置旋转缩放Sprite 负责渲染图片Camera 提供视角Script 组件负责挂脚本逻辑。实际操作中你只需要在层级面板右键创建实体然后通过组件面板给它添加能力。比如做一个 2D 游戏的角色流程就是创建一个空实体挂一个 Sprite 组件并指定贴图再挂一个脚本组件并关联一个控制移动的脚本文件。这个操作模式对用过任何一款现代游戏引擎的人来说都非常容易上手。唯一需要适应的是它的快捷键和界面布局跟 Unity、Godot 不完全一样初期会有点迷路但用半天基本就顺手了。另外3D 项目里灯光和相机的调整逻辑也是主流标准玩法不会让人摸不着头脑。3.3 脚本TypeScript 才是它的灵魂Superpowers 之所以让我愿意花时间深入折腾核心原因是它的脚本体系用的是 TypeScript而不是某个自定义的脚本语言。对于有一定编程基础的人来说这意味着你可以直接用上类型系统、IDE 提示、重构工具这些现代前端生态的产物。由于不同版本的 Superpowers 在脚本 API 细节上存在差异我这里不打算给出某个具体版本的完整 API 清单。更稳妥的做法是去项目的官方示例目录仓库里的 examples 文件夹找一份现成脚本照着它的结构改。下面这段代码只是用来帮助你理解脚本的基本形态——一个按帧运行的逻辑块// 示意代码类型和函数签名以你实际使用的官方示例为准 export function initialize(actor: Actor) { actor.position.set(0, 0, 0); } export function update(actor: Actor, dt: number) { actor.position.x 1 * dt; }理解这段代码的关键在于两个钩子函数initialize在脚本被加载时执行一次用来做初始设置update每帧被调用一次dt是上一帧到当前帧的时间差用来保证运动速度与帧率无关。我实际写脚本的一个经验是像操作任何大型代码库一样先翻 examples找一个功能最接近你需求的脚本复制出来改。直接从空白文件开始写 API 是不现实的因为只看文档很难建立起“哪个语法对应哪个能力”的脑内映射。3.4 预览编辑和运行的无缝切换在编辑器的预览区域点击运行就能直接在当前界面里跑起游戏场景。这意味着你可以边改代码边切回预览看效果不需要像传统引擎那样先编译再启动。预览模式下还可以打开多个窗口用不同的视角同时观察场景变化。这个功能在调试 UI 布局和多物体运动时特别有用。唯一要注意的是预览会占用额外的浏览器资源项目复杂起来之后长时间挂着预览窗口可能造成浏览器卡顿养成改完就关预览的习惯会舒服很多。4. 多人同屏改代码这件事Superpowers 是怎么做到的4.1 服务器端的“权威状态”设计Superpowers 的多人协作能成立根子在于它的设计是“服务器权威”。也就是说所有的编辑操作——新建实体、修改属性、保存脚本、上传资源——都会发送到服务器由服务器统一更新状态再把最新的状态广播给所有连接的客户端。这个模型和“共享屏幕”有本质区别。共享屏幕只是把画面传给对方看操作权还在一个人手里而 Superpowers 的模型是所有人同时操作同一个真实存在的状态就像大家一起编辑一份云端协同文档。你在场景里拖一个物体其他人的界面会立刻看到这个物体在动。4.2 实时同步的直观体验我拉了几个朋友一起在同一个项目里做测试那个体验在游戏开发工具里是很少见的几个人同时打开项目能看到各自的光标在资源面板、场景树和代码编辑器里移动。一个人新建了一个实体另外两个人的界面马上多出一个实体节点有人改完脚本保存其他人那边的运行结果也跟着更新。这种实时感对于远程团队协作的价值非常大。以前开远程会议讨论游戏改动往往是“我打开我的工程截图给你看然后口头描述”。现在大家可以直接进入同一个项目指着同一个实体讨论甚至一个人改代码另一个人马上在预览窗口验证效果。这个流程迭代方案的速度比屏幕共享快好几个量级。4.3 协作中需要注意的边界不过多人协作也不是完全无障碍的有几点实际使用的边界我得如实说冲突处理如果两个人同时修改同一个实体的同一个属性系统会用类似在线文档的合并策略来处理。实际体验下小范围冲突能自动合并掉但过于频繁的同一行代码编辑还是可能出现覆盖。建议团队内部约定脚本代码按模块分工场景搭建按区域分工这样基本不会碰到冲突。网络依赖协作的流畅度直接依赖网络质量。局域网和同城节点下体验很顺畅但跨大洲访问会有明显延迟和操作粘滞感。远程教学场景里服务端最好部署在离学生近的节点或者直接使用云服务器而不是某位同学的笔记本。浏览器兼容性我用 Chrome 系的浏览器体验最好偶尔用 Safari 会遇到 WebSocket 连接不稳定或者界面渲染小毛病。团队协作的话建议统一指定浏览器环境。5. 我用它做了一款收集小游戏流程、性能与常见问题复盘5.1 项目目标一个下午可验证的玩法闭环为了把 Superpowers 的完整流程真实走一遍我给自己定了一个非常明确的小目标做一个俯视角收集小游戏。玩法包括玩家控制一个角色在地图上移动靠近道具自动拾取拾取数量显示在 UI 上收集满一定数量后场景重置。选这个目标是因为它能覆盖一个游戏项目的基本骨架——素材管理、场景搭建、角色控制、碰撞检测、UI 显示、游戏状态管理。麻雀虽小五脏俱全。5.2 完整开发流程的实现路径整个流程走下来大致是这样的步骤在资源面板上传角色图片和道具图片创建脚本文件夹。搭建俯视角场景创建一个角色实体挂上 Sprite 组件指定贴图。编写移动脚本读取键盘输入WASD 或方向键控制角色位置移动。添加碰撞检测判断角色实体是否接触道具实体。接触后销毁道具实体并增加计数。创建一个 UI 文本实体显示当前收集数量。在预览中运行测试调整角色移动速度和道具生成位置。这套流程我在一个工作日的下午就走完了。有几个细节我觉得值得单独说一下碰撞检测的关键是给两个实体分别挂上碰撞体组件并设置正确的碰撞层关系。新手最容易漏掉的是层设置导致碰撞检测永远触发不了。输入处理逻辑要写在update钩子里不要在initialize里监听因为后者只在加载时执行一次拿不到持续按键状态。UI 文本和游戏实体建议放在不同的场景层级下这样在调整游戏逻辑时不会误碰到 UI 组件。5.3 性能与稳定性的实战注意点项目简单的时候性能不会成为问题但只要开始往场景里堆内容几个隐患就会出现。我总结了一下在这个项目里实际遇到的和观察到的纹理尺寸能使用小图解决的事情绝不用大图。我在资源面板里导入了几张 2K 尺寸的背景素材预览时的加载延迟明显变长。换成几百像素的图之后流畅度立刻上来了。实体数量场景里的实体过多时每一帧的遍历和渲染开销会显著增加。特别是有大量重复道具实体时要考虑在远处就禁用它们而不是傻傻地渲染。WebGL 上下文丢失这是浏览器端工具特有的一个坑。预览大场景或者长时间挂着预览窗口时偶尔会遇到 WebGL 上下文丢失画面变黑刷新页面能恢复但未保存的编辑器状态可能丢失。我的应对方法是对关键操作频繁手动保存不要依赖浏览器的自动恢复。音频格式兼容浏览器对音频格式的支持有差异实测中同一个音效文件在不同浏览器里表现不同。稳妥的做法是准备 WebM 和 OGG 两种格式或者直接压缩成低码率的 MP3。5.4 它到底适合做什么样的项目一个工具用了一段时间总会形成自己的一套判断。我的结论是Superpowers 非常适合做玩法原型、教学演示、Game Jam 作品、互动创意项目但如果你要做的是一款追求商业级画面、复杂渲染效果、多平台深度优化的游戏它的生态和渲染能力会拖后腿。这不是贬低它而是说工具选型要看场景。同样是螺丝刀不能要求它干电钻的活。Superpowers 的优势集中在“快速、协作、轻量”谁要是拿它去跟 Unity 拼大型 3D 项目那本身就是选错了工具。6. 自托管上线从本机实验到团队公网访问的最后一公里6.1 用 pm2 守护服务进程如果你的 Superpowers 服务只是自己在本地折腾终端窗口一关服务就停了倒也无所谓。但如果你打算让团队成员远程访问就必须把服务变成一个稳定运行的守护进程。我习惯用 pm2 来管理npm install -g pm2 pm2 start npm --name superpowers -- start pm2 savepm2 的save命令会把当前进程列表保存下来这样即使服务崩溃重启pm2 也会按配置把服务拉起来。用pm2 logs superpowers可以随时查看服务日志排查问题非常方便。6.2 Nginx 反向代理与 HTTPS服务跑在带端口的地址上给团队用倒是没问题但想做得更正式就需要用 Nginx 做反向代理把端口转发到一个域名上并挂上 HTTPS 证书。这样团队成员访问的是干净的域名地址数据在传输过程中也是加密的。一个基础的反向代理配置大致长这样server { listen 443 ssl; server_name your-domain.example; ssl_certificate /path/to/fullchain.pem; ssl_certificate_key /path/to/privkey.pem; location / { proxy_pass http://127.0.0.1:你的服务端口; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }重点在于 WebSocket 的升级支持也就是proxy_set_header Upgrade和Connection这两行。如果漏了编辑器的实时同步就会失效表现为“能看到项目但改动不同步”。6.3 数据备份这是整个项目最不能丢的东西Superpowers 的项目数据全部集中在服务端的数据目录里。这个目录一旦丢失你所有项目的场景、资源、脚本都会灰飞烟灭。所以部署到服务器之后第一件事就是做备份。我用的方案很简单写一个脚本定期把数据目录打包然后同步到另一台机器的存储路径下。用 cron 做每日定时打包0 3 * * * tar -czf /backup/superpowers-$(date \%F).tar.gz /path/to/superpowers-data这里特别提醒一点数据库也好、项目目录也好备份文件不要和服务放在同一块磁盘上。否则硬盘物理损坏的时候备份跟原始数据一起消失就失去了备份的意义。6.4 开源生态与二次开发的可能性Superpowers 本身是开源项目官方还维护了一个素材市场可以在线浏览和下载社区上传的素材包。我实际下载过几个官方素材包质量不错能省去不少美术资源找素材的功夫。更重要的是它是一个 TypeScript 全栈项目前后端都可以自己改。如果你有自己的教学平台、内部协作系统完全可以把它集成进去比如加上自己的账号系统、嵌入到已有的网页应用里、或者扩展它的编辑器能力。我在调研过程中还看到有人把它嵌到在线协作白板里当作一个“可运行的游戏画板”思路很有意思。这个项目的更新频率不算高社区规模也比较偏小众但正因为小它没有大厂工具那种沉重的历史包袱改起来反而顺手。我个人实际折腾完这一整套流程后的感受是Superpowers 最值钱的地方不是某个酷炫的渲染功能而是“大家一起在浏览器里做游戏”这种协作体验。它把游戏创作的门槛从“装好环境”降到了“打开网页”把协作方式从“传文件”变成了“同屏实时改”。如果你正好有远程教学、团队原型开发或者 Game Jam 这类需求花一个晚上跑通它是非常划算的。给你一个具体的建议从官方自带示例的模板开始别学我一开始选空项目然后找到数据目录并且立刻做个备份后面你会感谢这个习惯的。