Superpowers这名字听上去有点像好莱坞电影的片名。但如果你是在 GitHub 或开源社区里刷到它它其实是一个可以自托管的、支持多人实时协作的 HTML5 游戏开发环境。我第一次在浏览器里打开别人搭好的 Superpowers 服务时被大家一起改同一个游戏世界的体验惊到了一个窗口在拖场景里的方块另一个同事同时改脚本改动几乎是毫秒级同步。这不只是省掉了传文件再合并的流程更让做游戏这件事从单打独斗变成了真正的团队协作。这个项目到底能做什么简单说你可以在里面创建 2D、3D 场景写 TypeScript 脚本拼 UI做资源管理最后导出一个网页游戏。它适合谁小团队、独立开发者、游戏编程教学场景以及所有想快速验证游戏玩法又不想折腾完整游戏引擎的人。如果你想找一套打开浏览器就能开干的协作式开发工具Surface 下的 Superpowers 值得花一个下午试试。1. Superpowers 到底是什么一个能实时协作的开源游戏工作台1.1 一句话理解它的定位先别把它想成跟 Unity、Godot 对标的庞然大物。Superpowers 更像一个带界面的实时协作式游戏工作台。它由两部分组成一个是运行在你机器或服务器上的 Superpowers 服务端负责存项目、跑资源另一个是客户端可以是网页也可以是从官网下载的桌面客户端。两者连上之后所有人进入同一个服务器空间在里面创建各自的游戏项目。我更喜欢把它比作游戏版的在线文档协作。过去我们做游戏要么用一个引擎单机编辑要么用 Git 管代码和资源稍微复杂的项目还要配网盘同步美术素材。Superpowers 的默认逻辑是资源、场景、代码全在这个世界里谁改了什么其他人马上能看到。它天然就是一个自带的同步协作方案不需要额外配置谁导出谁上传的流程。1.2 和传统游戏引擎的差异差别的核心就三个维度协作方式、学习成本、运行环境。传统引擎一般把重心放在渲染和编辑器的功能深度上Superpowers 则把多人在同一个场景里同时编辑当成一等公民。Unity 或 Godot 也可以做多人协作插件但那是后装能力Superpowers 从第一天就是按协作去设计的。学习成本方面Superpowers 比完整游戏引擎克制很多。它的脚本语言是 TypeScript不是 C# 或 GDScript。如果你本来就写过前端几乎零门槛。就算没写过 TypeScript它那种监听事件、改 Actor 属性的思维方式也接近工程实践比从渲染管线和组件系统入手轻松太多。运行环境上Superpowers 面向的是 HTML5 游戏。做出来的东西天然可以跑在浏览器里移动端、桌面端都能打包。对独立小游戏或网页互动内容来说这套路径非常干净。1.3 适合谁用不适合谁用如果你属于下面几种情况Superpowers 是很顺手的工具小团队做 jam 类Game Jam项目需要在短期内高频协作带学生的编程老师希望让学生不装大型引擎也能体验到写代码后立刻看到游戏动起来想验证玩法的独立开发者不想一上来就铺几百 MB 的引擎工程需要给甲方快速出网页 demo 的互动团队。反过来它不适合做大型商业游戏。渲染管线的深度、物理系统的成熟度、第三方资产市场的丰富程度都无法和主流引擎比。如果你追求的是高画质 3A 画面或者复杂的原生性能还是老老实实用 Unreal 或 Unity。Superpowers 就是个小而美的协作工具别指望它包打天下。2. 核心特性拆解Superpowers 最值钱的几个设计2.1 实时协作把游戏编辑做成了在线文档这是整个项目最核心的价值点也是它名字里那股超能力的底气所在。在 Superpowers 里协作不是我在线上你也在线上这么简单而是同一个场景内的 Actor、资源、脚本都能被多人同时操作。默认情况下你甚至能看到对方选中了哪个物体、正在编辑哪个属性。我实际用的体验是两个人同时操作时只要网络联通稳定操作反馈几乎无感。比如我这边给敌人加了一个 SpriteRenderer同事那边立刻能看到这个敌人出现。这对于讨论玩法、快速调整数值特别有帮助因为视觉反馈是即时的不需要等导出、等上传、等下载。本质上它把游戏编辑器做成了类 CDN 的数据同步模型服务器存权威状态客户端通过 WebSocket 推送操作并渲染增量。这个思路对做工具的人来说很值得借鉴。如果你的方向是多人编辑同一份可视化数据Superpowers 的同步模式就是最好的参考案例。2.2 内置编辑器全家桶场景、脚本、UI 不用切窗口很多轻量引擎把编辑逻辑拆得很散场景编辑器一个窗口代码编辑器一个窗口资源管理器又一个窗口。Superpowers 把这些都合在同一个 Web 界面里。你打开场景后左侧是层级树中间是视口右边是属性面板下面还有资源面板和控制台。脚本编辑器也嵌在其中点一个资源就能直接编辑。我一开始觉得这种网页 IDE 游戏引擎的结合会很别扭但用久了反而觉得顺手。因为改代码和调场景之间的切换成本极低很多时候我都是边写脚本边看场景里的物体变化更快发现问题。对新手来说这种一体化界面也减少了找不到按钮在哪的挫败感。这里要提一个细节Superpowers 的 UI 布局是可以拖拽调整的每个面板都能重新停靠。千万不要默认它是固定布局按自己的习惯拖一拖效率能高不少。我第一次用的时候没意识到这点把控制台缩得很小报错信息一长串看不到排查了好久才发现是自己布局的问题。2.3 TypeScript 脚本系统一个 Sup 对象走天下Superpowers 的脚本模型非常直接你在场景里创建一个 Actor类似 Unity 的 GameObject给它挂一个 Behavior 脚本来定义行为。脚本是一个继承自Sup.Behavior的 TypeScript 类类里面可以写start()、update()、receiveMessage()这些生命周期方法。这个设计对前端开发者特别友好。你不需要接触复杂的引擎 API只需要记住几个高频能力this.actor拿到当前挂载的 Actor修改它的位置、旋转、缩放Sup.getActor(Player)按名称找其他 ActorSup.Input处理键盘、鼠标、触摸输入Sup.log()输出调试信息。举个例子让一个方块自动向左移动的完整脚本是这样class MoveLeft extends Sup.Behavior { speed: number 0.1; update() { this.actor.moveX(-this.speed); } } Sup.registerBehavior(MoveLeft);注意Sup.registerBehavior这行它把行为类注册到 Superpowers 的运行时里。很多新手会忘了这行导致脚本挂上去却完全不执行。在 Superpowers 里任何 Behavior 类都必须先注册编辑器才认它。2.4 资源管理与插件机制小团队自己造轮子Superpowers 的资源系统不怎么复杂它把资源分为几类场景、行为脚本、数据资源、字体、音频、纹理、图集等。你可以在资源面板里直接右键新建每个资源都有自己的 JSON 描述文件最终打包时会被导出为浏览器能用的格式。这个系统有个很实用的地方它可以定义自己的资源类型。如果你做一个游戏需要一套自定义的战斗配置表你可以在 Superpowers 里写一个自定义资源插件把配置的编辑界面做成可视化表单。这对小团队来说等于白嫖了一套配置工具 版本管理 多人编辑的后台不用单独做编辑器了。插件系统让团队可以复用之前的工具链。比如音效组织逻辑、关卡编辑器、物品配置表这些都可以沉淀成项目里的插件资源下个项目直接导入继续用。虽然插件生态不像 npm 那么庞大但对于一个体量有限的开源项目这种灵活度已经超出了我的预期。3. 实操记录从安装到做出第一个可玩小游戏3.1 下载与部署客户端模式和服务器模式怎么选Superpowers 的使用方式有两种第一种是本地开发模式下载官方桌面客户端它在你的机器上自动启动一个本地服务第二种是自托管服务器模式把这套服务部署到自己的服务器或内网机器上团队成员从浏览器访问。我个人的建议是一个人玩或者本地学直接用桌面客户端最省事。打开软件它会在本地起一个服务默认端口我记得是 4237。浏览器访问http://localhost:4237就能进入管理面板不需要额外装数据库也不用配环境变量。团队协作就按服务器模式来部署。在 Linux 服务器上我通常是把官方发布的服务器包下载到/opt/superpowers解压后直接运行启动脚本。启动后确认防火墙放行了对应端口团队成员的浏览器就能直接打开。这一步虽然简单但有三个容易踩的坑服务器包版本别和客户端版本差太多否则会出现项目打不开或资源错乱的问题首次启动会要求你设置管理员账号别跳过后面管理项目和成员都要用它如果要公网访问建议做一层反向代理并挂 HTTPS不然明文传输的代码和资源容易被人抓到。3.2 创建项目与熟悉编辑器布局进入管理面板后第一步是创建一个项目。项目创建好你会看到类似一个内部工作区的界面。左侧工具栏用来切换编辑场景和编辑资源默认场景会自动创建一个Main场景以及一个掉了角摄像机结构。初进编辑器我的建议是先花十分钟熟悉四个区域场景层级面板左侧列出场景内所有 Actor支持拖拽调整父子关系视口中央大块区域可以直接选中、移动、缩放、旋转 Actor属性面板右侧显示选中 Actor 的 Transform、渲染组件、脚本组件等属性资源管理器下方或侧边管理所有场景资源和脚本。很多新手一上来就急着写代码反而忽略了这个编辑器的层级概念。实际上Superpowers 的 Actor 也是树状结构一个父 Actor 可以挂子 Actor父 Actor 移动时子 Actor 跟着动。我建议先摆几个空白 Actor试着拖一下父子层级理解世界坐标和局部坐标的关系后面做复杂关卡就顺手很多。3.3 用 Behavior 脚本让角色动起来现在开始做一个最简单的可玩 demo控制一个小方块在平面里移动。在资源面板中新建一个 TypeScript Behavior 脚本起名PlayerControl。然后把脚本类写成下面这样class PlayerControl extends Sup.Behavior { moveSpeed: number 0.2; update() { // 用四个方向键控制角色移动 if (Sup.Input.isKeyDown(LEFT)) this.actor.moveX(-this.moveSpeed); if (Sup.Input.isKeyDown(RIGHT)) this.actor.moveX(this.moveSpeed); if (Sup.Input.isKeyDown(UP)) this.actor.moveY(this.moveSpeed); if (Sup.Input.isKeyDown(DOWN)) this.actor.moveY(-this.moveSpeed); } } Sup.registerBehavior(PlayerControl);写完这段脚本回到场景视口给场景里的小方块 Actor 挂上这个脚本然后点击播放按钮按方向键小方块就能跟着你的指令动了。这里有几个关键经验moveX、moveY是相对移动不是绝对赋值。如果你希望按下一次就移动固定距离可以改成this.actor.x 0.5效果完全不同moveSpeed是公开属性你可以在属性面板里直接调整不用改代码。我把这类参数叫编辑器可调参数它让调优变得非常快避免了频繁保存重载如果角色移动方向是反的先检查你的坐标系。2D 场景里水平方向是 X、垂直是 Y方向没问题。3.4 加一点交互键盘输入与碰撞检测能动还不够实现碰到边界反弹或撞到物体消失才能算游戏。Superpowers 里给 Actor 加碰撞体一般需要给角色和墙面都加 BoxCollider 组件。然后在 Behavior 里通过Sup.ArcadePhysics这类物理接口做检测。我把这个 demo 扩展成一个简单的小球吃星星玩法建一个 Player Actor挂 SpriteRenderer 显示一个小球建一个 Collectible Actor也挂 SpriteRenderer指定一种星星贴图给两个 Actor 都添加 BoxCollider 组件在 Player 的脚本里检测碰撞碰到星星就删除它。核心脚本逻辑类似这样class PlayerControl extends Sup.Behavior { moveSpeed: number 0.2; update() { // 移动控制 if (Sup.Input.isKeyDown(LEFT)) this.actor.moveX(-this.moveSpeed); if (Sup.Input.isKeyDown(RIGHT)) this.actor.moveX(this.moveSpeed); if (Sup.Input.isKeyDown(UP)) this.actor.moveY(this.moveSpeed); if (Sup.Input.isKeyDown(DOWN)) this.actor.moveY(-this.moveSpeed); // 碰撞检测 const hit Sup.ArcadePhysics.getCollisions( this.actor.body, Sup.ArcadePhysics.getAllBodies() ); for (const collision of hit) { if (collision.otherActor.hasBehavior(Collectible)) { collision.otherActor.destroy(); } } } } Sup.registerBehavior(PlayerControl);写这个逻辑时有三个容易被坑的地方没有给 Actor 挂 BoxColliderthis.actor.body是null访问会直接报错碰撞体没有启用物理模拟默认可能只是静态碰撞体需要手动设置那段触发逻辑删除 Actor 后如果有其他脚本还在引用它会出一堆弱引用的怪问题。所以建议destroy()前先断开引用。3.5 打包导出网页游戏Superpowers 的导出功能很直接在管理面板选择构建设置游戏唯一标识它会生成一份静态网页资源。我实际测试下来导出的东西是一组 HTML、JS、CSS 和资源文件。你可以把这堆文件扔到任意静态服务器上比如 Nginx、S3 或 GitHub Pages。因为这个项目本身是面向浏览器的所以最终产物非常干净不像桌面引擎导出网页需要一大堆适配层。需要注意构建前一定要把所有用到的资源都放在项目资源面板里脚本也不能有编译错误。如果哪次构建出来的页面空白十有八九是脚本里有人把Sup命名空间的引用写错了导致运行时初始化失败。这种问题通常可以在浏览器控制台看到红色报错按报错定位很快。4. 踩坑实录Superpowers 常见问题与排查方法4.1 协作时别人看不到我的操作怎么办最常见的原因是不是同一台服务器。Superpowers 的协作是绑定服务器上同一个项目的如果你和同事各自打开的是不同服务器或不同项目两边当然看不到对方。确认大家访问的网络地址一致是一个很基础但又容易被忽略的点。另一个原因是浏览器缓存。Superpowers 的 Web 客户端会在本地缓存不少资源修改后有时刷新不出来。遇到我改了代码对方没看到的情况别急第一件事是全组强制刷新一次页面同时清掉当前站点缓存。我在一次团队调试时遇到过A 改了脚本保存B 那边一直看不到新效果怎么保存重载都没用最后发现是 B 的浏览器把旧版本的文件缓存住了清了缓存立刻正常。4.2 脚本编译报错最常见的几种Superpowers 的脚本是在 TypeScript 环境里编译的报错信息和你在 VS Code 里看到的几乎一样。我遇到的报错集中在三种忘了Sup.registerBehavior脚本挂上去后没有任何反应但也不一定报红这种问题会非常隐蔽访问了不存在的组件属性比如this.actor.body但 Actor 上没挂 Body 组件运行时报Cannot read property of null类型问题比如给数值属性赋了字符串编译阶段会直接标红。排查这类问题第一看控制台有没有红色日志第二退出运行模式看编译面板。Superpowers 把编译状态看得比较重如果某个资源编译失败项目运行模式也会被阻断。4.3 资源和场景打不开、损坏Superpowers 本身自带了一套数据文件管理方式。如果多人同时编辑同一个场景理论上需要解决冲突。但我遇到场景打不开的情况几乎都和生产环境不稳定有关——比如服务器内存不够导致写了一半的文件没落盘或者有人强行 kill 了进程。应对办法是备份。建议定期把项目目录整体拷贝一份或者在改动较大时手动导出资源做快照。另外如果场景异常打不开可以尝试新建一个场景把原场景里的 Actor 分批次复制过去不要试图直接修复原文件。4.4 性能和动画卡顿排查方向Superpowers 面向的是 HTML5 游戏所以性能优化基本就是浏览器尖端问题。卡顿出现的首要嫌疑是运行时的 DrawCall 太高也就是你在场景里放了太多独立渲染的 Sprite。解决办法一个是把静态物体合并成图集另一个是减少不必要的 Actor 数量。另一个常见卡顿原因是脚本里频繁访问全局对象或者频繁创建临时对象。比如update()里反复查找其他 Actor每次都触发一次全场景搜索界面就容易掉帧。建议在start()里把要引用的 Actor 缓存起来更新时只做状态判断和逻辑运算。还有一个老生常谈贴图尺寸。直接塞一张 4K 背景图到 2D 游戏里像素填充率会非常惊人哪怕是一张静态图也可能让低端设备卡成幻灯片。做网页游戏时素材尺寸尽量按实际缩放需求控制别贪高清。5. 我的个人体会与扩展建议Superpowers 不算一个天天更新的活跃项目我一开始也担心它会不会用着用着就没人维护了。但实际用下来它的协作体验在市场里依然很有稀缺性。如果你把它当成游戏版的 Figma 原型工具而不是全功能引擎你会觉得它非常顺手。我的建议是你先拿它做一个 2D 迷你游戏把角色移动、碰撞、收集、计分这一条链路跑通再拉一个朋友来一起编辑同一个场景感受一下协作模式。你会发现做游戏最耗时的沟通成本在这种实时共编辑的流程里被压得很低。这个项目本身的思路也值得所有做编辑器、做多人创作工具的人研究。最后分享一个小技巧Superpowers 的自定义资源插件很值得投入时间。把团队的数值配置、关卡结构做成自定义资源后策划可以自己改配置程序员不用再做表结构美术也可以直接在场景里摆素材。这套工作流一旦跑起来小团队的产出效率会提升一个档次。对于动不动就几十上百人的大团队来说它或许不够硬核但恰好是中小团队最需要的轻量协作工具。