第一次听说 Superpowers是我在折腾“一群人远程一起做小游戏”这个需求时意外刷到的。当时我们准备参加一次线上 Game Jam需要白天各自上班、晚上隔着屏幕一起赶进度传统的方式是代码仓库加实时聊天但大家改的资源和场景多了以后各种覆盖冲突能把人逼疯。后来我找到这个叫 Superpowers 的开源项目——它是一套基于浏览器的实时协作游戏开发环境服务器装好之后团队成员只要用浏览器打开页面就能进同一个工作区一边改场景一边看对方的光标和操作几乎是零磨合上手。这篇文章是我从零开始安装、配置、建项目到最后跑通一个小 Demo 的完整记录包含所有关键步骤和踩过的坑。如果你正在评估多人在线开发工具或者只是想找一个不需要复杂配置就能做 2D 原型的环境这部分内容会比较对胃口。1. 先搞清楚 Superpowers 到底解决什么问题1.1 它适合谁不适合谁先说结论Superpowers 最适合两类人。一类是想要快速验证一个 2D 游戏想法、但又不想被引擎安装和编译流程劝退的爱好者另一类是需要和小伙伴远程协作完成一个小项目的团队。我见过的很多同类方案要么是单机编辑器你想让别人看到进度只能录屏要么是重型的全功能引擎装完光吃配置就要半天。Superpowers 的路径不一样它把编辑器和运行环境都放到了浏览器里你不需要在每台开发机上安装客户端只要有网络能访问到同一台 Superpowers 服务器打开浏览器就能干活。这对临时组队、跨平台、甚至是上课演示的场景非常友好。不过它也有明显边界。它不是奔着大型 3D 游戏去的主要能力集中在 2D 场景、脚本逻辑、UI 和简单的物理交互上。如果你要做的是一套复杂的商业级游戏或者需要深度接入原生平台特性那它肯定不是合适的终点。但对于原型验证、游戏比赛、教学演示、内部工具、互动小玩具这些场景它简直是为“快”而生的。我当时使用它的定位就是“比纸面设计稿更真实一点又比正式引擎更轻快”的中间层。1.2 和常见游戏引擎的差别为什么说它“轻”这里拿我最常用的另一个工具链对比一下。以前我建一个本地 Unity 项目要点掉很多模版选项等待首次导入编译再配置版本管理团队成员还得统一安装同一个版本的编辑器不然资源文件就打架。Superpowers 把这些复杂度都藏起来了。它本质上是一个“服务器 浏览器客户端”的架构。你在服务器上安装核心程序启动后它会监听一个本地端口所有参与者通过浏览器访问这个地址就能加载编辑器界面。项目的所有资源、场景、脚本都保存在服务器端的文件系统里多人编辑时服务器用实时同步把大家的增量操作广播给其他客户端。所以它的轻主要体现在三方面开发端零安装只要有现代浏览器就能用macOS、Windows、Linux 都不需要单独装客户端。协作是天生的不需要额外接入插件或第三方同步多人在同一场景里的操作可以实时合并。技术栈聚焦内置脚本语言是 TypeScript你在编辑器里写 behavior行为脚本保存之后刷新预览就能看到效果没有传统意义上的“编译等待”。当然轻也不意味着弱。它带了一套资产管理系统纹理、声音、场景、脚本都有对应的资源面板足够支撑一个完整的小游戏。我记得第一次用它建项目时整个过程不到十分钟这个速度在传统工作流里几乎不可能。2. 安装前的准备别急着敲命令2.1 Node.js 版本与 npm 环境检查Superpowers 是通过 npm 分发和安装的所以第一步先确认 Node.js 环境。我的服务器是一台 Ubuntu 22.04 的云主机没有图形界面这对于 Superpowers 反而很合适因为大家本来就用浏览器连。在安装之前我习惯先看版本信息node -v npm -v我装的时候使用的是 Node.js 14 以上的版本运行没有遇到兼容性问题。如果你用的是太老的版本比如 Node 8 或更低npm 安装依赖时大概率会报错建议先把 Node 升级到 LTS 版本。这里有一个需要注意的细节官方没有强制绑死 Node 版本但我个人实测下来Node 更新一些依赖安装的速度和稳定性都会好一点。如果你本机同时装了多个 Node 版本可以用 nvm 临时切换确保装 Superpowers 用的 Node 是正确的那个。检查完 Node再确认 npm 源可以访问。如果你身处国内网络建议直接使用镜像源但这一步只关系到下载速度不影响最终使用。2.2 端口、目录和权限规划Superpowers 默认使用9800端口第一次启动时它会询问你要监听哪个端口。如果这个端口被你其他服务占用了就会出现启动后网页打不开的情况但终端又没有报错。这非常容易误判所以最好提前确认一下sudo lsof -i :9800如果没有输出说明端口空闲。如果被占用了要么杀掉占用进程要么等启动到一半的时候手动输入一个新端口。这里我更推荐在无交互环境下用参数直接指定superpowers --port 9800另外建议给 Superpowers 单独建一个工作目录用来存放项目数据。它默认会把数据放在执行命令的用户主目录下比如~/.superpowers但如果你经常用 root 或者其他用户切换很容易找不着数据。我个人的习惯是创建/opt/superpowers/data这样的目录然后用SUPERPOWERS_PATH环境变量指过去这样备份、迁移都一目了然。权限方面如果是要给多人访问不要让服务以 root 权限直接跑最好新建一个普通用户比如superpowers然后通过 systemd 管理守护进程。这样服务器重启后不用手动开机敲命令也更安全。3. 安装与启动让服务跑起来3.1 全局安装 Superpowers 并确认版本环境准备好之后安装其实只有一条命令npm install -g superpowers这里用-g全局安装是为了之后可以在任意目录直接执行superpowers。安装过程会拉取不少依赖包时间取决于网络状况。装完后确认一下superpowers --version如果你看到类似Superpowers 6.3.0这样的输出说明安装成功。我自己的体验是安装过程中偶尔会因为网络抖动导致重试耐心让它走完就好不需要额外配置。这里要提个建议尽量不要用 sudo 来全局安装 npm 包容易把权限弄乱。如果系统提示全局目录没有写入权限可以考虑把 npm 的全局路径改到用户目录下具体做法是npm config set prefix $HOME/.npm-global然后把对应 bin 目录加到 PATH 里。这样安装和升级都不会再碰到 permission denied 的问题。我自己第一次装的时候图省事用了 sudo后面升级包的时候就处处别扭后来彻底改成了用户级安装。3.2 初始化管理员账号与工作区启动服务前我想先确认一下工作目录的配置。如果是第一启动可以用环境变量或交互式问答来设置。真实执行命令superpowers首次启动时Superpowers 会进入一个初始化引导流程它会问你几个基础问题包括服务端口、是否马上创建管理员账号等。如果你希望在无人值守的服务器上跳过交互可以提前传一些参数。比如superpowers --port 9800 --superpowers-path /opt/superpowers/data首次访问http://localhost:9800浏览器会打开一个设置页面让你设定管理员登录信息。这一步非常重要管理员身份会关联到你后续创建的项目权限。建议设置一个专用的强密码不要用简单词组因为你的服务器如果暴露在公网任何能访问这个端口的人都可以尝试登录。初始化完成后服务会进入正常监听状态。终端里一般会显示当前监听的地址和端口打开浏览器就能看到 Superpowers 的主界面。主界面会展示示例项目列表、帮助文档链接以及新建项目的入口。我第一次打开时看到干净的界面甚至有点意外因为真的没有任何需要按 Windows 习惯去点“下一步”的安装向导。3.3 让局域网里的其他设备也能访问到这里服务已经在本机运行了但组员不可能都跑到你的电脑前看。如果大家都在同一局域网可以直接访问你的局域网 IP比如http://192.168.1.100:9800。这一步有几个常见坑。第一主机防火墙默认可能会拦截 9800 端口需要在系统防火墙里放行。Ubuntu 上可以用 ufwsudo ufw allow 9800/tcp第二如果你用路由器组网确保路由器没有开启 AP 隔离之类的功能否则设备之间互相访问会被拦。第三如果是租的云服务器记得在安全组里放行 9800 端口这是云服务商安全策略和本地防火墙是两码事。如果成员分布在不同城市就需要通过公网访问了。最简单的方式是把你的一台公网服务器作为 Superpowers 的宿主机大家直接连接它的公网 IP 加端口。如果你不想暴露公网 IP也可以在前面套一层反向代理配合域名和 HTTPS 访问这样更正式也更安全。但不管用哪种方式尽量不要把没有任何认证的端口裸奔在公网上管理员密码和访问控制一定要设好。4. 创建第一个项目从空场景到能跑的小Demo4.1 新建项目与资源面板速览服务跑通之后后面才是真正有意思的部分。登录管理后台点击“新建项目”Superpowers 会让你起一个项目名并且可以选择模板。默认包含一个空项目模板和几个带示例的模板。我建议第一次不要选太复杂的示例直接建一个空项目自己手动加一个场景这样能更快理解它的工作流。建好项目后你会进入项目编辑器界面。整个布局很直观中间是场景视图左侧是资源面板右侧是属性检查器底部有时有控制台输出。初次进来时场景是空的只有默认的一个相机和光源在 2D 场景里光源一般用不到可以忽略。资源面板里可以新建的资源类型包括场景Scene承载游戏对象布局。行为脚本Behavior Script用 TypeScript 写逻辑。纹理Texture图片资源支持 PNG/JPG 等格式。声音Sound音频资源。组件组件/预制件用来复用对象组合。需要理解的是这里的“资源”并不仅仅是文件它更像一个数据库中的对象记录。你在面板里新建资源然后把它拖到场景中形成实例。这种方式比手动维护图片路径要舒服得多因为所有引用都通过资源 ID 管理重命名资源后场景里的引用不会断。4.2 用 TypeScript 写第一个行为脚本场景里没有任何逻辑的话就是一个静态画板。Superpowers 的编程模型是给场景中的对象挂“行为Behavior”每个行为本质上是一个 TypeScript 类。新建一个行为脚本编辑器会自动生成基础模板class MoveBox extends Sup.Behavior { awake() { // 初始化逻辑 } update() { // 每帧调用的逻辑 } } Sup.registerBehavior(MoveBox);我习惯先把对象的位置打印出来确认脚本挂上去了。把这段代码改成class MoveBox extends Sup.Behavior { awake() { console.log(MoveBox 初始化完成位置, this.actor.getPosition()); } update() { let pos this.actor.getPosition(); pos.x 0.01; this.actor.setPosition(pos); } } Sup.registerBehavior(MoveBox);然后在场景中创建一个“Actor”2D 对象给它添加刚刚写好的 MoveBox 行为。保存脚本后回到场景视图点击预览你会看到一个方块每帧向右移动。速度很快因为没有编译等待。这里有个小知识点this.actor指的是当前行为所绑定的那个对象。在 Superpowers 的对象模型里所有场景中的元素都是 ActorActor 可以有多个行为脚本行为之间也能互相通信。如果你的项目里需要做子弹、敌人、碰撞检测这类逻辑同样是在行为脚本里操作 actor 的 position、rotation 和 scale。对了脚本保存之后浏览器里的预览经常不会自动刷新需要手动点一下重新加载。这一点在多人协作时需要沟通清楚避免有人改了脚本以为大家都能看到结果队友那边还在跑旧逻辑。4.3 实时预览与多人协作Superpowers 最让我惊艳的其实是“多人状态”的处理。一个项目里如果两个成员同时打开编辑器彼此能看到对方正在修改哪个资源甚至连光标位置都是同步的。这种功能乍一听不算炫酷但实际用在远程协作里体验完全不同。举例说明有一次我和队友同时在编辑器里拖资源我这边把一个纹理拖进了场景他的画面里对象立刻出现他调整了对象大小我这边属性面板的数字也跟着变。这种双向同步几乎没有延迟比隔着语音连线喊“你放一下我看看”要高效得多。但多人一起改也容易产生问题。如果两个人同时改同一个脚本文件的同一行Superpowers 会采用“后保存者覆盖先保存者”的策略没有像 Git 那样的 diff 和合并过程。所以到后期时间紧张的时候我们约定好脚本模块按文件名划分谁负责谁改场景资源也尽量减少同时操作。预览方面项目可以单独打开一个运行视图相当于独立窗口运行游戏不占用编辑器画面。在 Game Jam 里我们经常把运行视图投屏到电视上大家一边在编辑器里修 bug一边实时看运行效果那种状态真的非常接近线下工作室了。4.4 导出和分享运行结果如果只是自己练习或者团队内部演示浏览器预览就够了。但如果你想发布一个可以分享给别人的链接Superpowers 也支持构建导出。在项目设置里找到构建/导出选项它会生成一套静态文件包括 HTML、JS、资源包。把这套文件放到任何静态 Web 服务器上就能跑。我在实际项目里试过把导出文件放到一个简单的静态页面托管服务上生成一个链接甩给其他朋友玩。他们不用安装任何东西打开链接就能玩这比发安装包、解释依赖要省太多事了。需要注意的是导出包没有内置后端逻辑所以如果你想做排行榜、多人联机游戏还得自己再搭额外的后端服务Superpowers 本身管不了这一层。5. 常见问题与排查速查表5.1 启动报错提示缺少依赖我在两台不同机器上安装过 Superpowers遇到的第一个问题是启动时报错说找不到某个依赖模块。这种问题通常不是 Superpowers 本体的问题而是 npm 全局安装时某个依赖没拉全。处理思路是先把全局目录下的 superpowers 卸载干净再重新安装npm uninstall -g superpowers npm cache clean --force npm install -g superpowers如果还是报错检查一下 Node 版本是否过老。同样的命令在 Node 16 上跑就一切正常这让我意识到很多“软件毛病”其实是环境版本不一致造成的。5.2 浏览器端画面异常或编辑器卡顿Superpowers 的编辑器重度依赖浏览器渲染能力如果你用的是很老版本浏览器或者禁用了 WebGL场景视图可能只显示纯色背景。先把浏览器更新到最新版然后检查硬件加速是否开启。卡顿的话优先减少同时打开的标签页尤其是几个节点都开着同一个项目会抢资源。另一个更隐蔽的原因是场景里的粒子数量或者大纹理过多尽量把大图压缩后再导入别直接塞一张几千万像素的截图。5.3 项目备份与迁移Superpowers 的所有项目数据都存在服务器路径下我前面说的/opt/superpowers/data就是整个项目仓库。备份最笨也最可靠的方式是直接压缩这个目录tar -czf superpowers_backup.tar.gz /opt/superpowers/data迁移时在另一台服务器上装好 Superpowers把压缩包解压到同样的数据目录启动服务后就能看到原来的项目。要提醒的是备份前最好先关闭 Superpowers 服务或者至少要确保没有人在编辑否则文件正在被写入时复制可能得到损坏的数据。我吃过一次亏以为备份成功了结果恢复出来缺了好几个资源ID最后只好靠 Git 记录补了一部分回来。5.4 提升协作效率的三个小技巧最后分享几个我实际摸索出来的小技巧这些经验不是文档里写明的但非常管用。第一给项目建立一个资源命名规范。多人协作时如果每个人按自己习惯命名比如“新场景1”“newScene2”要不了半天你就会在脚本里分不清谁是谁。我倾向于用“场景/角色/功能”三段式比如Scene_MainMenu、Actor_Player、Script_PlayerMove。第二善用日志。Superpowers 的控制台能看到console.log输出但多人一起使用时输出信息会混在一起。我习惯在日志前加一个自己的标记比如[Tony] 初始化完成这样排查时一秒就能定位是谁的输出。第三在正式动手写逻辑前先在白板上规划好 Actor 的层级。因为场景对象支持父子关系父节点移动时子节点会跟着动。如果你一开始不规划层级后期要加个“左右翻转整体对象”的功能就要一个个对象去改特别痛苦。先建立一层“容器对象”把相关的零件挂到容器里后面调整整体位置、缩放、旋转都会方便很多。使用 Superpowers 这段时间我最深的体会是“工具的价值不在于功能多而在于能不能让人把注意力放在创造本身上”。以前折腾一套多人协作要手动搭很多东西现在一个浏览器页面就把所有人都拉进了同一张画布。如果你也想找个轻量、能实时协作、又不需要折腾安装客户端的小环境不妨照着上面的流程跑一遍。最后再提醒一句正式使用前一定把数据备份和账号安全先规划好这样后面怎么折腾都不慌。