Superpowers 这词儿我最早是从一个做游戏原型的朋友那儿听说的。他兴冲冲地跟我说有个能在浏览器里和队友一起实时做游戏的开源项目名字就叫 superpowers。我第一反应是这名字起得挺张扬后来打开官网试了一圈一个下午就过去了。今天想认真聊聊这个项目——它不是一个游戏而是一个开源的、跑在浏览器里的协作式 HTML5 游戏开发环境。装好之后你通过一个本地网页就能看到一个可视化的场景编辑器在里面摆模型、写 TypeScript 逻辑实时构建 2D 或 3D 的小游戏而且能像多人协同文档那样邀请同事一起编辑同一个项目、同一个场景。它适合独立游戏开发者、需要在短时间内出原型的小团队也适合正在入门游戏编程的同学。你要是想找一种“打开浏览器就能写游戏”的轻量方案这篇应该对你有用。1. 为什么叫“超级能力”项目和核心价值拆解1.1 浏览器就是工作台看着奇怪用着真省事先说说这个项目最反直觉的地方。我们平时做游戏要么装 Unity、Unreal、Godot 这类桌面大引擎要么就是纯代码 自研工具链。Superpowers 两者都不是它本质是一个跑在本地 Node.js 上的服务器你再用浏览器连过去操作。一开始我总觉得“浏览器里能干什么大事”真正用下来才发现这设计相当聪明。首先是省心。团队里不管你是 Mac、Windows 还是 Ubuntu装好 Node.js 之后都是同一套操作打开浏览器就能进编辑器根本不存在“你那台机器编译不过帮忙调一下环境”这种破事。其次是统一界面后台和编辑器都在同一个网页里不用来回切换桌面窗口。最后是部署成本低一台普通笔记本就能带起一个小型协作项目对树莓派这类小机器也很友好。我有段时间在地铁通勤时都会开着这个网页改点东西只要本机能跑服务浏览器一刷新就能继续干活这种“工作台随网页走”的体验别的引擎很难给到。1.2 协作不是后加的补丁而是骨子里的基因Superpowers 最打动我的地方不是“能写游戏”而是“能和别人一起写游戏”。它的协作能力不是后来接的插件而是从架构上就为多人编辑设计的。同团队的人打开同一个项目地址后能实时看到彼此的修改无论是场景里拖拽一个物体还是改一段脚本对方那边几乎是同步出现。这种感觉很像用 Google Docs 写文档而不是传统的“我改完提交你拉下来再看”。对游戏开发来说这很重要。传统工作流里程序和美术经常因为场景资源的版本冲突吵得不可开交。Superpowers 把场景、脚本、资源都当作项目里的结构化数据来管理多人同时编辑时不会出现“这个场景文件被某某锁定了”的情况。虽然正式项目里我还是建议用 Git 做备份但至少在快速原型期这种“不需要懂分支合并就能协作”的能力真的能省下大量沟通成本。1.3 谁适合用它拿它到底能干什么在我看Superpowers 适合三类人。第一类是游戏开发课程里的老师和学生。老师开一个项目学生加进来就能动手不需要每个人都在本地装好完整引擎环境。课堂时间本来就紧张能省掉半小时环境配置就已经赚到了。第二类是 Game Jam 和快速原型团队。48 小时黑客松里没人有心情处理场景 merge 冲突。用 Superpowers策划摆场景、程序写逻辑、美术传素材几乎是并行进行的效率高到离谱。第三类是那些想从零学游戏开发的新手。它的界面没有 Unity 那么密集逻辑用 TypeScript 写既不算太底层也不会因为没有模板而不知道从哪下手。我自己带新手入门时通常会先让他们在 Superpowers 里做一个“会滚的球”半天时间就能建立起“场景 对象 脚本 游戏”的基本概念。2. 核心设计思路解析为什么“服务端 浏览器”就够用2.1 整个项目就是一个能跑网页的服务端要理解 Superpowers最好先把它想成一个“游戏项目形态的网站”。它不是一个安装到本地的 IDE而是一个服务器进程。你启动它它会监听端口然后把编辑器页面的静态资源发给你同时负责保存项目数据、广播协作者的修改。这样一来项目数据天然就集中在一个地方。你不用担心“我这版和别人那版不一样”因为大家连的本来就是同一份数据。我曾经把整个项目目录直接扔进网盘同步文件夹备份起来非常干净。对一个做原型的小团队来说这种“项目即文件夹”的朴素设计比那些动不动就要建数据库、搞资源服务器的商业引擎要轻得多。2.2 场景、资源和脚本都是同一套数据模型传统引擎里场景文件、材质、模型、脚本往往是几种完全不同的格式编辑器里也分好几个窗口。Superpowers 做了一个很重要的统一无论是 3D 模型、2D 精灵、材质、音效还是 TypeScript 脚本都被视为项目里的“资源”可以在同一个资源面板里管理。场景本身也是一种资源场景里的对象则是一个个带属性的节点。这种统一带来的好处是新手上手快。你不需要理解“这个是 asset那个是 component这两个东西怎么互相引用”你只需要记住一句话从资源面板往场景里拖东西然后在属性面板调参数脚本附到对象上就生效。这种心智模型对非程序出身的策划和美术特别友好也减少了跨角色沟通时的鸡同鸭讲。2.3 Skill 系统把“代码能力”像技能一样挂到角色身上Superpowers 里有个非常有意思的概念叫 Skill直译是“技能”。它本质上就是一个可复用的逻辑块你可以把一段行为逻辑写成一个 Skill然后把它挂到任意一个对象上。比如“自动旋转”“跟随鼠标移动”“碰到边界就反弹”这些都可以做成 Skill。这种设计比传统引擎的“组件系统”更符合直觉。你想让一个角色会飞不是去研究怎么继承类、怎么注册组件而是找到一个叫“飞行”的技能挂上去。尤其是新手比起从代码架构角度思考这样从“我想让这个对象拥有什么能力”的角度出发门槛一下子低了很多。我自己写原型时也习惯把常用行为做成 Skill场景之间拖来拖去省得每次重新抄代码。2.4 和 Unity、Godot 的取舍明确知道自己放弃了什么用过一段时间后我反而更理解这类工具的边界。Superpowers 绝不是要替代 Unity 或 Godot它放弃了大型引擎的复杂渲染管线、物理模拟和包体优化能力换来的是一套极致轻量的协作工作流。你可以在里面做平台跳跃、解密、卡牌、俯视角 RPG 甚至简单的 3D 打斗原型但别指望它跑得起次世代画质或大规模物理场景。如果你追求的是“下午有个灵感晚上能有一个能玩的 Demo”那 Superpowers 是利器如果你要做的是商业级长线运营产品我建议还是回到成熟引擎。工具没有高下只有匹配不匹配。3. 从零跑起安装、启动与界面导航3.1 环境准备只要 Node.jsSuperpowers 对系统的要求不高核心依赖是 Node.js。官方也推荐使用 LTS 版本太老的版本可能跑不起来太新的测试版也可能碰到兼容问题。装好后在终端里敲一下node -v和npm -v确认能正常输出版本号就行。如果你机器上还没装 Node.js直接去官网下载对应系统的安装包即可。装完建议顺手把 npm 源切到本地默认源免得之后安装全局包时网络卡得让人想砸键盘。这一步几乎人人都能完成不需要任何编程基础。3.2 安装与启动两个命令一杯茶的功夫环境就绪后安装过程异常简单全局安装命令就一行npm install -g superpowers安装完成后找一个空目录作为你的项目父目录然后运行superpowers启动成功后终端会提示你服务运行在哪个地址通常是http://localhost:4237。直接用 Chrome 或 Firefox 打开这个地址。第一次进入会让你创建一个管理员账号用户名密码自己记住就行这是用来管理服务和创建项目的。我建议账号密码别太随意因为谁拿到这个管理员权限谁就能改你服务器上的所有项目。3.3 创建第一个项目与模板选择登录后主界面会有一个创建新项目的地方。Superpowers 官方预置了好几个模板包括空白的 2D 项目、空白的 3D 项目以及一些带有完整示例的模板比如平台跳跃、俯视角 RPG 之类。我的建议是如果你是第一次接触直接挑一个带示例的模板先拆开看看人家是怎么把场景、脚本、素材配对起来的比自己从零拼效率高得多。项目命名我建议统一用英文小写加短横线比如my-first-demo。虽然很多本地工具都支持特殊字符但一旦后面你要把项目放进 Git 做版本管理中文或空格名称会带来一堆无谓的麻烦不如从一开始就养成好习惯。3.4 界面导航别被四个面板吓到第一次打开编辑器你可能会觉得界面挺多东西。别慌核心就四块区域。左侧是资源面板能看到脚本、场景、模型、材质、音效等所有项目资源。中间是场景视图用来摆对象和观察游戏世界。右侧是属性面板当你选中场景里的某个对象时它的位置、旋转、缩放以及挂在上面的各类属性和脚本都会显示在这里。下方是代码编辑区专门用来写 TypeScript。还有一个容易被忽略的是顶部或侧边的一排图标代表着生成对象、添加组件、预览运行等操作入口。我的经验是遇到什么看不清的功能先把它点开看一眼Superpowers 的操作负反馈都很直接不太容易把项目搞坏的。4. 上手实操做一个可交互的 3D 小场景4.1 场景里放东西立方体、灯光、相机一个都不能少纯空场景里是什么都看不见的我们先搭一个“能看的东西”。在 3D 项目中右键场景树区域选择创建新对象先创建一个空对象然后选中它在属性面板里添加组件比如 ModelRenderer模型渲染器。模型可以先拿项目自带的简单几何体比如立方体或球体。接着创建一个光源对象添加 Light灯光组件选平行光或者点光源都行默认角度一般就够用。然后确保场景里有一个相机相机决定玩家能看到什么。如果模板里已经有相机那直接用如果是空白项目就新建一个对象并挂上 Camera相机组件。没有相机却想预览游戏往往只会得到黑屏或空画面这是很多人第一次“什么都没跑出来”的原因。调整对象位置建议直接用场景里的位移工具拖动或者直接在右侧属性面板里输入数值。你会发现数学基础不差的话手动输入坐标往往比用鼠标在 3D 空间里拖拽更精确。这一步的目的只是让你熟悉“对象有变换属性组件决定行为”的基本概念。4.2 给对象写第一个脚本让立方体转起来光是摆个静态立方体没什么意思我们来写第一段逻辑。在资源面板新建一个脚本文件系统会自动生成一个行为模板大致的样子类似下面这样export class MyBehavior extends Sup.Behavior { update() { // 这里的代码会在每一帧被调用 // 通过 this.actor 可以操作当前对象 } }我不打算给你贴一份“保证在你那个版本能跑”的代码因为 Superpowers 的 API 在不同时期改过一些命名模板注释里的指引才是最准的。但思路是通用的你在update()里让当前对象的位置或角度发生微小变化。比如把立方体每一帧绕 Y 轴旋转一点点保存后把它作为组件挂到场景里的立方体对象上再点击预览你就能看到立方体自己转起来了。这个体验很关键它教会你一件事游戏里的“动态”不是魔法而是把“每帧改一点”的逻辑挂到对象上。这段代码完全没有涉及复杂框架却奠定了对游戏循环的本质理解。4.3 加入输入响应键盘控制才像游戏光自己转没意思我们再让它响应键盘。玩过 Superpowers 示例项目的朋友应该都见过输入相关写法。大体思路是在行为脚本里读取输入状态然后修改对象的速度或角度。如果你不清楚当前版本怎么获取输入最快的办法就是去装好的示例模板里找到一个带有移动逻辑的脚本照着它的写法改。我自己第一次折腾输入时踩过一个坑脚本挂到对象上之后发现按键盘没反应。后来检查发现是脚本挂在了一个子对象上而我的输入判断写在另一个父对象上作用范围完全错位了。在 Superpowers 里脚本挂在哪个对象上this.actor就代表哪个对象别把父子关系搞混。这也是新手特别容易犯的毛病。4.4 保存、预览与分享链接Superpowers 的保存方式很接近现代网站后台支持手动保存部分状态也会自动落盘。建议养成“改几步就 CtrlS”的习惯别把项目全部托付给自动保存再稳的自动保存也救不回手滑清空节点的操作。点预览按钮就可以在浏览器里进入游戏画面。此时如果再打开项目主界面会看到当前项目能生成一个访问链接把这个链接发给你团队里的人他们加入后就能一起编辑了。这也意味着你做完的小原型不需要额外打包和传输就能“共享”出去对快速验证想法来说太方便了。5. 多人协作实战把队友拉进同一个开发间5.1 用户与权限的基本玩法要让别人加入你的项目编辑通常可以在服务器后台为他创建一个用户或者通过邀请链接加进来。管理员可以控制哪些用户能访问哪些项目避免所有人都挤在同一个项目里瞎搞。我的建议是给团队成员每人一个独立账号别共用一个管理员账号。因为编辑器里的操作记录虽然能定位到人但如果大家共用一个账号出了误操作你都不知道找谁。注意这里说的权限和传统 Git 的“代码评审”完全两码事。Superpowers 的定位是实时协作它默认你是信任队友的。它不会像代码托管平台那样做严格的变更审查所以更适合小团队内部使用不适合接受陌生人的随意修改。5.2 并发编辑时怎么避免互相打架多人同时编辑一个场景时Superpowers 并不会锁死某个对象不让别人碰。理论上你可以看到队友正拖着同一个立方体。这里有几个我踩过的坑分享给你。第一当两个人同时修改同一个对象的坐标那结果就像两个人同时抢一个方向盘最后的位置会很随机。所以协作时要口头分工比如“你负责玩家对象我负责场景装饰物”。第二同时有人改脚本和有人改场景时偶尔会遇到预览状态不同步这时候刷新一下页面通常就好。第三不要几个人同时新建同名资源这些我今天可没少吃亏。实际上只要你把任务边界划清楚这种实时协作的爽感很快会盖过小摩擦。你会看到队友摆场景你同时加脚本整个过程不用传文件、不用解决冲突这种体验一旦习惯了就回不去传统的“发给我一下最新版本”的工作流了。5.3 远程协作时要注意什么同一个局域网里队友直接通过你的内网 IP 访问就行只要服务器端口没被系统防火墙拦着体验基本流畅。但如果你们不在同一网络事情会变复杂。最简单的办法是用一台有公网 IP 的服务器部署 Superpowers然后让队友通过域名或 IP 访问。因为这类工具本身是开源的部署方式也透明只要你做好账号密码保护就能在远程小团队里稳定使用。不过我还是提醒一句给工具挂到公网之前先把默认管理员密码改掉不要为了省事裸奔上线。网络安全这种事对个人项目来说可能无关痛痒但一旦牵扯到团队资源就一定要当做正经事对待。6. 常见问题与排查技巧实录6.1 启动失败或端口被占用如果你执行superpowers后看到类似端口被占用的报错很可能是你以前启动过实例进程还没退出。在终端清掉旧进程或者直接重启机器问题一般就解决。你也可以用端口检查的方式验证比如在另一个终端执行lsof -i :4237Linux/macOS或netstat -ano | findstr 4237Windows看看是谁占着这个端口。我最常犯的错误其实是装了新版本之后旧进程还留在后台导致新版本没起来。遇到这种莫名奇妙的问题第一步永远是“清干净旧进程重启服务”。6.2 浏览器打开是白屏或页面异常Superpowers 虽然对浏览器兼容性不错但还是强烈建议用 Chrome 或 Firefox 的较新版本。白屏最常见的原因是浏览器缓存了旧版前端资源按CtrlF5强制刷新或者手动清一下站点缓存基本能解决。还有一个容易被忽略的因素电脑系统时间不对浏览器拉取本地资源时也会出一些诡异问题把时间校准就行。6.3 多人协作时看不到对方的操作排除网络问题后先确认大家访问的是同一个项目地址。有时团队的人各自从主界面打开了不同的项目看起来都在编辑其实不在一个地方。再检查一遍用户权限如果是只读用户自然看不到同步编辑。最后就是刷新Superpowers 的同步机制偶尔也会因为网络抖动出现短暂卡顿刷新大法虽笨但有效。6.4 脚本报错不知道怎么定位第一次写脚本时报错往往伴随着红色弹窗别慌。打开浏览器开发者工具的控制台错误信息通常会在那里留下详细的堆栈能精确到哪个脚本文件的哪一行。养成在关键节点输出日志的习惯比反复盯着一堆代码瞎猜要快得多。我以前写逻辑基本都是靠日志定位到对象状态不对才发现原来是脚本执行顺序的问题。6.5 问题速查表症状原因处理办法服务启动即退出端口被占用清除旧进程或更换端口编辑器白屏浏览器缓存或版本偏旧强制刷新、升级浏览器预览时黑屏场景缺少相机或灯光确认摄像机存在并朝向场景脚本没生效脚本没挂到对象上检查属性面板确认脚本组件已挂载按键盘没反应输入逻辑挂在错误对象上检查脚本对象的父子层级关系队友看不到改动访问的不是同一个项目地址核对待编辑项目地址和权限7. 我的实际使用体会与扩展建议我用 Superpowers 做原型大概有小半年最喜欢它的场景永远是 Game Jam 那类节奏极快的场合。几个人挤在同一个线上项目里一个负责场景结构一个负责玩法逻辑还有一个在旁边整理美术资源。这种实时协作的节奏感比任何看板工具都来得直接。但我也要说实话不要拿它做太复杂的项目。我自己试过在一个场景里堆了几百个动态对象后浏览器明显有些吃力渲染性能比桌面引擎还是差距明显。剧情叙事、复杂战斗、多层级 UI 这类需求它目前做起来并不算顺手。它的舒适区是“能快速验证核心玩法”的小原型而不是“能上线运营”的商业产品。如果你后续想继续玩这个方向我建议往这几个方向扩展。一是去翻官方模板里的源码里面包含了很多常见游戏玩法的实现思路几乎是一个免费的教学资源库。二是把项目目录纳入 Git 管理养成提交版本的习惯毕竟协作再流畅也需要一个可回滚的底牌。三是留意社区里的第三方插件和主题这个生态虽然小众但偶尔能遇到非常有想法的扩展能让你的开发流程再顺一截。最后分享一个小技巧。我后来做所有 Superpowers 项目都会先花十分钟把常用脚本整理成一套“我的常用技能库”比如简单的移动、跳跃、对象循环旋转、定时销毁等等。之后再开新项目时直接把这些技能导进去省掉了大量重复劳动。这个习惯让我的原型速度提升非常明显也希望你能找到属于你自己的那套“超能力”。
