superpowers：一个浏览器里的轻量级多人协作开源游戏引擎

发布时间：2026/10/29 22:56:00

1. 为什么我想聊superpowers这个项目

不知道你第一次听到"superpowers"这个词是在什么场合。我最早是在一个独立游戏开发者社群里看到的，当时有人在问"有人用过superpowers做多人协作开发吗"，底下讨论还挺热闹。后来我去翻了一下这个开源项目，才发现它是一套基于浏览器的可视化游戏开发环境，而且它的定位很有意思：不是要跟Unity、Godot这些重型引擎抢市场，而是想让你用打开网页的方式，快速把一个小游戏的原型做出来，同时把多人实时协作这个能力做成默认功能。

这篇文章写给谁？主要是有过一点游戏开发想法但被工具门槛劝退的人，还有已经用Godot或Unity写过脚本、想找一个更轻量的协作原型工具的人。内容涵盖superpowers的安装启动、工作界面、脚本写法、多人协作玩法以及我踩过的坑，尽量把能直接抄作业的部分都写清楚。

先说我的结论：superpowers不是一个能直接替代成熟引擎的工业化工具，但它在"快速验证玩法""多人同屏改场景""现场教学演示"这几个场景里非常顺手。如果你是靠直觉做游戏、不想被资产管线绑住手脚的人，它值得你花十分钟试一次。

我实测下来，从下载到能在浏览器里打开编辑器，五分钟以内就能完成，整个开发界面就是在一个web页面上跑的，不需要装一堆IDE、SDK、构建工具链。这种低门槛本身就是它最大的特点。

2. 核心设计思路拆解：它为什么敢叫"超能力"

要理解superpowers，得先接受一个前提：它把游戏引擎拆成了"服务器 + 浏览器客户端"这套结构。

2.1 它跟传统本地引擎最大的区别

传统做法是引擎装在你的电脑里，项目文件放在本地磁盘，你要发给别人就得打包上传，别人改完再传回来。这个流程在一个人开发的时候没问题，但一旦两个人想同时改一个场景，就非常麻烦。

superpowers的做法是把项目托管在一个本地服务器进程上，所有开发者用浏览器连到这个服务器来编辑。你改场景、改脚本、拖动一个模型，这些操作不是写入本地文件，而是通过WebSocket实时同步到服务器，再广播给所有连着这个项目的客户端。

我用一个生活化的例子来解释：Unity就像每个人自己在家做饭，做好端到饭桌上拼菜；superpowers更像一群人围着一个灶台做菜，你放盐、我加糖，旁边的人立刻就能看见锅里变成什么样。它把"协作"从"事后合并"变成了"现场直播"。

2.2 为什么选择"浏览器即编辑器"这条路

很多人一开始会怀疑：浏览器跑编辑器，性能行吗？界面会不会很简陋？我实际用下来，superpowers的编辑器确实不如Unity Editor那样重度复杂，但它做了一些很有意思的取舍。

它内置的编辑器是直接在浏览器里渲染3D场景的，用的是Three.js这一套。也就是说，你的场景编辑器本身就是一个小型3D应用。你在编辑器里看到的画面跟最终游戏里的画面，本质上跑的是同一套渲染栈，不会出现"编辑器里很漂亮、导出来变了个样"的割裂感。

这对做原型来说是一个巨大的优势：所见即所得。

另外，脚本系统也直接在浏览器里运行和调试。写脚本的时候可以打开浏览器的开发者工具，console跟游戏运行时的console是同一个，什么变量没定义、什么组件找不到，直接看浏览器控制台就能定位。

2.3 它的脚本模型：不是"组件"而是"混合体"

如果你熟悉Unity，你脑子里大概会浮现GameObject、Component、Inspector、Prefab这些概念。superpowers的做法有所不同：它里面最小的单位叫Actor，Actor可以挂上一堆行为能力，这些行为能力在官方文档里叫mixins，你可以理解成"能力的混合块"。

从实际使用的感受来看，一个Actor不是一个空壳，它更像是"加载了一组能力的对象"。你可以给一个Actor添加"模型渲染"能力、添加"刚体"能力、添加"自定义脚本"能力，这些能力组合在一起，这个Actor就变成了一个可以在场景里移动的实体。

这种模型对做原型的人来说非常友好。你不需要去理解复杂的生命周期回调，也不需要被组件间数据传递的各种约定束缚，你只需要想清楚："这个东西应该具备哪些能力？"然后把对应的能力加上去。

3. 安装与启动：一次成功的"零障碍"体验

接下来直接进入实操环节。我把安装步骤整理成一套可以照着做的流程。

3.1 第一步：确认你的电脑环境

superpowers本质上是一个Node.js应用，所以前提是你机器上有Node.js环境。不过有意思的是，项目也提供了不需要预装Node.js的便捷模式，你可以直接下载打包好的桌面客户端，内置了运行环境。

我自己的测试环境是Windows 11，Node版本是18 LTS，浏览器用的是Chrome，全程没有碰到兼容性问题。如果你是macOS或者Linux，一般来说也没有区别，因为最终操作都是在浏览器里完成的。

安装方式有两种，我分别说一下。

3.2 方式一：使用npm全局安装（适合Node用户）

如果你本机已经有Node.js环境，直接在终端里跑这行命令：

npm install -g superpowers

装完之后启动超级简单的服务器：

superpowers

启动成功后终端会显示一个网址，通常是这样：

http://localhost:8080

用浏览器打开这个地址，你就进入了superpowers的启动页。第一次启动会要求你设置管理员账号和密码，这个账号是用于管理项目和创建项目的，记好它，后面协作登录也会用得到。

3.3 方式二：下载桌面版（适合零基础用户）

如果你不想跟Node环境打交道，直接去superpowers官网下载对应你操作系统的桌面版压缩包。解压后运行里面的可执行文件，它会在后台自动启动一个本地服务，同时自动打开浏览器进入启动页。

桌面版的好处是省去了环境配置，而且更新的频率相对稳定。它的内部机制跟npm版是一样的，都是起了一个本地web服务，只不过这个服务被封装成了一个小程序。

3.4 添加项目成员与设置共享

superpowers的多人协作并不需要每个协作者都装环境，他们只需要能访问到你机器上的服务端口就够。

如果你跟队友在同一个局域网，你只要把本机的局域网IP告诉队友，队友直接在浏览器里访问：

http://你的IP:8080

比如我机器的局域网IP是192.168.31.31，队友访问的就是http://192.168.31.31:8080。

如果是远程协作，需要你自己做一次端口映射或内网穿透，把8080端口暴露出去。考虑到安全底线，我在这里不展开讲具体工具，只提醒一句：暴露开发服务器有安全风险，临时用一下记得关闭。

进入启动页之后，管理员在后台添加成员的邮箱地址，生成登录口令，成员就能用浏览器直接开干了。这个协作模型非常简单，不需要复杂的账号体系，重心全放在"谁能连到你的服务器"上。

4. 核心界面操作：第一次进入项目后的关键认知

当你创建好项目、进入编辑器，第一眼可能会有一种"熟悉又陌生"的感觉：左边是场景层级列表，中间是3D视图，右边是属性面板，底部有资源管理器。这跟主流引擎的布局很像，但细节上有很多不同。

4.1 场景树与Actor的层级结构

superpowers的场景树里，每个条目对应一个Actor。Actor之间可以是父子关系，父Actor移动，子Actor跟着动，这个跟Unity的Transform层级是一样的逻辑。

但superpowers有一个我个人很喜欢的交互：你直接在3D视图里选中一个模型，左侧场景树会自动定位到对应的Actor上；反过来，你在场景树里点选，右侧属性面板会显示这个Actor当前拥有的所有能力。

层级结构在设计角色、关卡部件拆分时非常好用。我习惯的做法是：建一个空Actor作为"根"，下面再挂角色模型、灯光、相机、触发器这些子Actor。这样挪动整个关卡部件的时候，只需拖动根Actor即可。

4.2 属性面板：考验你对"能力"的理解

右侧属性面板展示的内容取决于当前Actor挂载了哪些能力。

如果你给一个Actor添加了"Model"能力，属性面板里就会有模型的URL、缩放、旋转这些参数。如果你添加了"Point light"能力，面板里就会多出颜色、强度、光照范围等参数。

这种"按需展示"的交互比Unity的Inspector更像一个抽屉柜：你装了什么工具进去，打开抽屉就能看到什么。你不需要在一堆无关参数里翻找，也不会被引擎默认的几百项设置淹没。

我实测下来的体验是，做一个简单角色控制Demo，需要改动的主要参数其实就集中在模型选择、平移速度、跳跃力度这几项上。整个编程心智负担远小于传统引擎。

4.3 怎么添加一个新Actor

在场景树面板的空白处，或者通过顶部菜单栏，你可以创建一个新的Actor。创建出来的默认Actor是空的，它只带一个"Transform"能力，负责位置、旋转、缩放。

要让这个Actor"看得见"，你需要给它添加"Model"能力，然后在能力里选一个模型素材。superpowers内置素材库里有一些基础的几何体和几个示例模型，做实验足够了。当然你也可以在资源管理器里上传自己的3D模型文件。

这个操作思路跟"搭积木"很像：先有骨架（Actor），再往骨架上挂功能块（能力），最后在属性面板里调参数。

5. 核心玩法实现：动手做一个"跳方块"场景

纸上谈兵没意思，我带着你亲手做一个能在场景里移动、跳跃的小方块，把superpowers脚本系统最核心的部分过一遍。

5.1 想清楚我们要拆成哪几步

做一个最小可玩的第三人称控制Demo，我们需要四样东西：一个玩家Actor、一个地面Actor、一个相机、一个控制脚本。

这个拆解过程本身就是游戏策划的最小颗粒：明确对象、明确交互、明确反馈。superpowers的项目结构看似松散，但你只要脑子里先有这个拆解，实现起来流程是非常线性的。

5.2 创建场景骨架

第一步，创建一个空项目"JumpDemo"，进入后先等待编辑器左侧资源视图加载完毕。然后依次创建：

一个空Actor，改名为"Player"
一个立方体模型Actor，改名为"Ground"
一个立方体模型Actor，作为"Player"的子级，改名为"Body"

操作路径：在场景树面板右键，选择"创建Actor"，然后在属性面板的"Add mixin"里选"Model"。

地面呢，把它的Scale调到(5, 0.2, 5)，这样它就变成了一块扁平的板子。玩家方块调到(0.5, 0.5, 0.5)，然后给它一个初始坐标，让它悬浮在地面上方。

5.3 添加刚体能力

superpowers的物理逻辑基于一整套物理引擎，作为初次试验我们只需要关注两个处理器：Cannon.js的刚体组件和碰撞器。

选中Player，在属性面板添加"Rigidbody"能力，再添加一个"Box collider"能力。刚体的质量调成1，碰撞器的尺寸会自动匹配模型大小。

地面的处理方式则是静态碰撞：添加"Rigidbody"但把质量调成0，或者换成"Static collider"类型的合理配置，让它不参与物理计算，只提供碰撞表面。

这一步的关键点是：如果不加刚体，你的角色就是一个穿过一切的幽灵；如果把地面当成动态刚体，那么角色一跳，地面可能就被"顶"飞了。所以静态和动态物理体的区分必须在一开始就想明白。

5.4 写一个移动跳跃脚本

现在到了最有意思的一步：在superpowers里给Player添加"Script"能力，然后编辑脚本。

superpowers的脚本用TypeScript编写，运行在浏览器里，基于实体组件系统。你可以直接在编辑器里打开脚本编辑页，保存后立即生效，不需要重新编译整个项目。

我这里给出一个最精简的控制脚本，以superpowers脚本API为蓝本：

const { Actor } = require("superpowers"); let actor: Actor = this.actor; let speed: number = 8; let jumpForce: number = 5; let grounded: boolean = true; let body: Actor | null = null; this.actor.getChildren().forEach(child => { if (child.getName() === "Body") { body = child; } }); this.actor.on("physicsStep", (event: any) => { const rigidbody = actor.getRigidbody(); if (!rigidbody) return; let moveX = 0; let moveZ = 0; if (this.input.isKeyDown("ArrowLeft") || this.input.isKeyDown("KeyA")) moveX -= 1; if (this.input.isKeyDown("ArrowRight") || this.input.isKeyDown("KeyD")) moveX += 1; if (this.input.isKeyDown("ArrowUp") || this.input.isKeyDown("KeyW")) moveZ -= 1; if (this.input.isKeyDown("ArrowDown") || this.input.isKeyDown("KeyS")) moveZ += 1; const velocity = rigidbody.getLinearVelocity(); velocity.x = moveX * speed; velocity.z = moveZ * speed; if (this.input.isKeyDown("Space") && grounded) { velocity.y = jumpForce; grounded = false; } rigidbody.setLinearVelocity(velocity); }); this.actor.on("collision", (event: any) => { if (event.otherActor === this.getScene().findActorByName("Ground")) { grounded = true; } });

这个脚本解决了两件事：读取键盘输入、把输入映射到刚体速度；监听碰撞事件来重置跳跃状态。

解释几个常见疑惑：

为什么把速度直接赋值给线性速度而不是施加冲量？因为这种"直接改速度"的方式在原型里手感最稳，不需要调累积力参数。
为什么用on("physicsStep")而不是每帧更新？因为物理步进和渲染帧率并不一致。你如果在renderFrame里改刚体位置，会遇到莫名其妙的抖动。

这个脚本保存后，点击顶部运行按钮（或按F8），浏览器就会进入一个独立的运行页面。此时你应该能用WASD控制方块移动，按空格跳跃，碰到地面后可以再次起跳。整个过程其实就是一套完整的"输入 -> 物理 -> 碰撞反馈"循环。

5.5 相机跟随：让角色不跑出屏幕

这时候你会发现一个问题：角色移动时，相机是固定不动的，没走几步方块就跑出了视线。我们需要让相机跟着玩家走。

这里我建议不要用"直接把相机制作成Player的子Actor"这种粗暴做法，因为那样相机就会跟着玩家旋转，视角会非常眩晕。

我采用的方式是写一个极简的跟随脚本，挂到相机Actor上：

const player = this.getScene().findActorByName("Player"); if (player) { const playerPos = player.getPosition(); const cameraPos = this.actor.getPosition(); this.actor.setPosition(playerPos.x, playerPos.y + 5, playerPos.z - 5); }

当然这个脚本放在每帧更新或physicsStep里。简单来说，每次更新都拿到玩家当前坐标，然后把相机固定放在"玩家上方5个单位、后方5个单位"的位置。这个方法虽然朴素，但作为原型已经非常够用。

更进阶的做法是用平滑插值，比如lerp，让相机移动带一点阻尼感。但那是后期打磨手感的事，原型阶段先保证"不丢目标"。

6. 多人协作实战：两个人同时改一个场景是什么体验

前面说了superpowers把协作做成了默认能力，接下来我讲一次真实协作过程，把我看到的一些细节说出来。

6.1 开启一个共享项目

管理员在启动页后台创建好项目之后，把项目地址和登录口令发给协作者。协作者在浏览器打开http://你的IP:8080，输入账号进入项目列表，找到对应项目点击进入。注意，协作者并不需要安装任何Node环境，也不需要下载superpowers本体，整个编辑器的代码是实时从服务器加载到浏览器里的。

我测试的场景是这样的：我在我自己的电脑上控制角色移动脚本，另一个朋友在他的电脑上往场景里拖模型、调光照。我们同时操作同一个场景文件，我在他的屏幕上能看到我正在拖动的Actor实时移动位置，他新增的模型也会立刻出现在我的场景树里。

6.2 冲突到底怎么处理

多人协作最怕的就是文件冲突。superpowers处理冲突的理念是"实时合并"：因为它传输的不是文件级差异，而是每个操作的具体变更，所以两个人同时修改不同Actor基本不会有冲突；如果恰好同时改同一个Actor的同一个参数，后提交的覆盖先提交的，但不会造成整个项目损坏。

这跟Git那种"基于快照的版本控制"不同。Git是定期持久化一个快照，superpowers更像是一张永远在演进的画布——所有人都直接在这张画布上画画。个人经验是：分组协作时，比如你负责贴近地面的物理玩法，队友负责远处的美术场景，大家改的是不同Actor，全程完全不用沟通锁文件，这在项目原型期非常舒服。