★ FEATURED ARTICLE 最近搜 Superpowers 这个词的人不少我猜大多数人第一眼都会把它当成“超能力”的英文单词我自己第一次看到时也是这么想的。但作为常年折腾各种开源项目的人每次看到 Superpowers我脑子里蹦出来的其实是那个用 TypeScript 写游戏的开源项目——一套可以直接跑在浏览器里的协作式游戏开发环境。最近“想要安装 Superpowers”这个搜索热度一直不低说明大家折腾新工具的欲望还是强。这篇文章我就从零开始把这张“超能力体验卡”的安装、配置、实操和踩坑过程完整讲一遍想装的人可以直接按着步骤走。1. 先把名字说清楚Superpowers 到底是一款什么样的工具1.1 它不是超能力而是一个协作式游戏开发平台如果你在搜索引擎里输入 Superpowers前排可能出现各种励志口号、能力培训课程但只要往下翻一翻会看到 GitHub 上一个名为 Superpowers 的开源项目。这个项目最早吸引我的点很直接它把游戏编辑器搬到了浏览器里用 TypeScript 作为脚本语言并且把多人实时协作当成基础功能来设计。换句话说它更像一个“长在 Web 技术栈上的迷你 Unity”。你在浏览器里新建一个场景拖入精灵图写几段 TypeScript 脚本就能直接看到游戏逻辑在预览窗口里跑起来。这和传统游戏引擎的使用路径差不多但整个编辑器本身是个网页应用服务端和客户端通过本地端口通信所以你把编辑器给别人打开别人也能在你的项目里干活而且是实时看到彼此的光标和操作。很多人看到这个名字会觉得它是在卖概念但项目本身是开源并且可免费安装的。官方的主站把它定位成一个“跨平台、开源、支持多人协作的 2D/3D 游戏开发环境”实际上大家用得最多的还是 2D 场景部分。安装“Superpowers”这件事本质上不是在给电脑装一个神秘软件而是在本地跑起一个 Node 服务再接上一个 Web 端编辑器。1.2 为什么这个工具值得折腾我见过不少想学游戏开发的人一上来就撞上 Unity 安装包好几个 G、项目启动半天、界面密密麻麻全是按钮的墙。Superpowers 跟这条路径完全反着来这个编辑器非常轻第一次启动我只花了几秒就打开了项目界面然后就能直接写脚本、拖资源、看实时预览。对想快速验证游戏玩法原型的人来说它比传统引擎省心不少。它另一个核心价值是协作。做游戏开发往往不是一个人的事但传统引擎的多人协作基本靠版本管理工具来协作。Superpowers 的好玩之处在于你创建项目后其他人可以通过网络连接到你本地跑着的服务器直接进入同一个项目里编辑。这不是简单的“文件共享”而是活的那种共同编辑体验。一个改脚本一个调地图两边同时刷新预览这个特质在传统游戏引擎里很少见。1.3 和 Unity、Godot 放在一起看我并不是说 Superpowers 能替代 Unity 或 Godot它更像一个轻量级的“快速打样工具”。Unity 强在生态和全平台发布Godot 强在开源、轻量和场景树设计而 Superpowers 的特点则集中在三条线上编辑器本身就是 Web 程序不用装笨重的原生 IDE 工具链。脚本直接用 TypeScript有类型提示对前端开发者尤其友好。多人协作是原生设计而不是后期补丁。简单说如果你想体验“浏览器里写游戏、小伙伴实时看到你改出来的效果”Superpowers 是这个方向上少有的开源选项。我把它当成一个低成本实验场验证手感、快速迭代玩法、做游戏 Jam 项目的脚手架。这个定位决定了接下来的安装和配置可以非常轻快但如果你指望它直接打包成手机 App 上线那恐怕要失望。2. 动手前必看环境要求与两种安装方式的选择2.1 系统与硬件要求安装之前先把前提条件说清楚。Superpowers 桌面版对系统的要求不高Windows 10 以上、macOS、主流 Linux 发行版基本都能跑但前提是得有一个支持 WebGL 的显卡环境和相对较新的浏览器内核。因为这个编辑器内部的渲染和预览都依赖 WebGL老旧的集成显卡或远古驱动可能会在打开 3D 场景时直接白屏。内存方面我个人的实测经验是 4GB 内存也可以运行但跑大一点的场景会卡建议 8GB 起步。如果你同时开浏览器、编辑器、代码工具最好留出 16GB 内存的余量。磁盘占用在几百 MB 级别和 Unity 动不动几个 G 相比这个项目算是很省的了。如果你是开发服务器版系统要求就更直接了需要一个能跑 Node.js 的 Linux 或 Windows 环境。服务器版本身不提供图形界面它只是把你本地的编辑器和项目服务发布到某个端口上让其他人通过浏览器访问。2.2 Node.js 版本选择的坑很多人在安装这一步就翻车原因不是安装包的问题而是 Node.js 的版本不对。Superpowers 服务端代码对 Node 版本有一定要求我用下来的经验是尽量选择 Node 12 LTS 或更高版本但不建议直接上最新的非 LTS 版本。因为它用到了不少底层网络库太新的 Node 实验特性偶尔会让 WebSocket 连接行为变得奇怪。具体检测方式很简单在命令行里执行node --version npm --version如果你的 Node 版本已经很高了比如 18 或者 20大多数情况下也能跑但如果发现启动后浏览器连不上编辑器可以先考虑把 Node 切到 LTS 版本试试。如果电脑上已经有多个 Node 版本在管理可以用 nvm 之类的方式隔离环境避免污染系统环境。2.3 桌面版还是服务器版先想清楚你要干嘛Superpowers 官方提供了两种安装形态很多人一开始没分清楚折腾了半天才发现自己装错了。第一种是桌面版。它是一个独立的桌面应用内置了运行环境你不需要先装 Node.js点开就能用。桌面版适合只想在本机单机写游戏、或者让局域网内几个人一起协作的人。我自己最常用的是桌面版因为它开箱即用关闭窗口后服务也会随之停掉不留下常驻后台进程。第二种是服务器版。你可以把它理解成一个部署在云端或办公室内网服务器上的常驻服务。通过 npm 安装对应命令后服务器启动后会把项目服务暴露到端口上团队里所有人直接用浏览器打开就能进入编辑器。这种模式适合想长期维护一个共享项目、或者希望小伙伴不安装任何软件就能参与协作的场景。在 Windows 上我推荐直接用桌面版省心。在 Linux 服务器上部署自然选服务器版。两种方式切换也没那么费劲因为项目文件格式是通用的桌面版创建的项目也可以被服务端读取。3. 完整安装实操从下载到浏览器打开编辑器3.1 下载安装包并正确解压官方提供的是压缩包形式的安装包到 GitHub Releases 页面下载对应系统的压缩包就行。Windows 用户拿到的一般是 zip 文件macOS 用户是 dmgLinux 用户通常是 tar.gz。这里有一个很常见的坑下载完成后直接双击压缩包里的 exe 文件运行这本身没问题但如果你把解压目录放在类似“C:\Program Files”这种带空格的路径下某些版本的 Superpowers 可能因为路径解析问题而启动失败。我一般是把它解压到一个纯英文、无空格的目录比如D:\Tools\superpowers。Linux 桌面版还需要额外安装一些 GUI 依赖比如 libnss3 和 libgtk-3这些是 Electron 类应用常见的依赖项。如果你在 Linux 下双击后没有任何反应去终端里手动运行这个可执行文件通常能看到缺少哪个动态库的报错然后根据报错安装对应依赖即可。3.2 用 npm 安装服务器版如果你打算部署服务器版命令行安装反而更简单。在终端里执行npm install -g superpowers这条命令会把 Superpowers 的命令行工具安装到全局环境。安装完成后先创建一个专门的工作目录再在里面启动服务mkdir my-superpowers-project cd my-superpowers-project superpowers start启动后终端里会显示一个本地访问地址默认是http://localhost:4237。用浏览器打开这个地址你就能看到 Superpowers 的项目管理界面。首次打开会让你创建项目或导入现有项目这和桌面版的界面是完全一致的区别只是数据存放在服务器目录下。需要提醒的是如果你很久没用这个工具npm install -g superpowers安装的可能是旧版本最好先通过npm view superpowers version看下最新版本号再决定是否需要指定latest后缀重装。3.3 启动后的第一反应界面长什么样我第一次打开本地编辑器时最先感受到的是“清爽”两个字。整个界面分成了几个功能区域左侧是项目资源树类似你在 IDE 里看到的文件列表。中间是场景视图可以直接拖拽素材、移动物体。右侧或底部是代码编辑器用来写 TypeScript 脚本。顶部有播放、暂停按钮运行当前场景进行实时预览。如果你是第一次进项目系统会生成一个默认场景和一个默认脚本。点击运行按钮中间的预览画面就能跑起来。这时你其实已经完成了一次完整的“安装-启动-运行”闭环。很多人的安装过程其实就止步于此后面真正难的部分是理解项目的组织方式以及怎么把想法变成实际可玩的逻辑。4. 第一个小游戏创建项目并理解核心 API4.1 项目文件结构到底长什么样项目创建好之后你会看到它本质上还是一个文件目录里面主要被划分为几个区域assets/存放所有资源包括图片、音频、预制体、场景等。src/存放 TypeScript 脚本。system.json项目配置信息记录项目名称、初始场景等。Superpowers 的“资源”概念和很多游戏引擎类似。你在编辑器中导入一张图片它会自动生成一个资源条目类似“精灵资源”。脚本本身也是一种可被引用的资源你可以把同一个脚本绑定到多个游戏对象上。这个设计让代码复用变得很顺手写一个“玩家控制脚本”把它挂到主角身上再把它挂到另一个相对独立的物体上双方各自带一套独立的属性配置。4.2 用 TypeScript 让角色动起来脚本是 Superpowers 最大的特色之一。它用 TypeScript 编写而 TypeScript 的强类型特性在复杂项目里能省下大量排查低级错误的时间。比如在场景里创建一个 2D 物体并给它挂上脚本class PlayerBehavior extends Sup.Behavior { speed 0.1; update() { let move new Sup.Math.Vector2(0, 0); if (Sup.Input.isKeyDown(W)) move.y 1; if (Sup.Input.isKeyDown(S)) move.y - 1; if (Sup.Input.isKeyDown(A)) move.x - 1; if (Sup.Input.isKeyDown(D)) move.x 1; if (move.length() 0) { move.normalize(); this.actor.move(move.multiplyScalar(this.speed * Sup.Behavior.dt)); } } }这套 API 看起来和 Unity 的 MonoBehaviour 很像。Sup.Behavior是所有行为脚本的基类update()方法每帧被引擎调用this.actor是当前脚本挂载的游戏对象。Sup.Input负责键盘鼠标输入Sup.Math.Vector2携带方向信息move()方法让物体发生位移。写完脚本后在编辑器里按一次保存引擎会自动编译脚本并刷新预览。不需要手动重启场景这一点比很多传统引擎舒服得多。你改一个数值预览窗口就实时更新一次整个反馈循环短到我愿意一直坐在那里调参数。4.3 场景、预制体和动画的协作方式除了脚本Superpowers 的资源管理方式也很有特色。你可以把一个角色连同它的小型脚本、动画组件打包成一个“预制体”然后在场景里复制成多个实例。这种设计对 2D 游戏来说特别高效先做一个“僵尸”预制体再在场景里拖出十份。如果你之前用过 Unity这套概念能无缝迁移。区别在于 Superpowers 的操作方式全部发生在浏览器编辑器里而且任何改动都会直接反映到项目文件。刚开始可能会觉得不习惯觉得资源树不如原生的拖拽流畅但只要用个十几分钟那种“哪怕关掉浏览器再进来项目状态也还在”的踏实感会很快体现出来。5. 多人协作不是附加功能而是原生设计5.1 局域网内邀请小伙伴一起编辑多人协作是我最看好这个项目的一点。桌面版启动后它不仅是“本地编辑器”还是一个服务端。和你处于同一局域网内的设备只要有网络权限就能通过你的 IP 地址加端口访问并加入项目。大概流程是这样的先确认你的本机 IPWindows 用ipconfigLinux 用ip addr。小伙伴在浏览器里输入http://你的IP:4237。选择同一个项目后双方进入同一个编辑器界面。此时你把角色拖到哪里对方的编辑器里会实时出现相同的操作。这个概念初听起来可能有点吓人但实际体验非常自然。编辑器会把所有资源同步给连接的客户端而客户端之间的操作会通过服务器进行同步。你在导入素材、修改脚本、调整场景的同时对方的界面也在跟着变基本没有明显延迟。如果你是在公司或学校电脑上想快速组队这种方式比 Git 协作、文件互传都高效太多因为它没有“你改完了我再看”的脱节感。5.2 发布到公网时的端口和部署配置如果你想和小伙伴不在同一个局域网内协作就得走公网部署。这时候需要部署服务器版并正确配置端口和网络。Superpowers 默认监听两个端口一个用于 HTTP 访问一个用于客户端通信 WebSocket。你在配置 Nginx 反向代理时需要同时处理 HTTP 升级请求否则可能会出现“能打开编辑器但无法连接项目”的情况。一个比较稳妥的做法是把两个端口都映射到同一个域名下通过路径或子域名区分。但如果你只是临时协作测试可以用最简单的方法直接用 IP 加端口访问关闭操作系统的防火墙限制即可。这种做法的安全风险是任何人都可能连接你的项目只建议在受信任的小范围网络里用。我自己常用的方式是在内网机器上跑服务器版然后借助已有的内网穿透机制把端口暴露到公网需要时临时开启用完就关。配置过程中最需要关注的还是 WebSocket 是否被代理层正确处理很多“连不上编辑器”的问题十有八九都出在这一层。5.3 多人同时改同一个文件时怎么处理一开始我也担心多人同时编辑同一个脚本会产生文件覆盖问题实际用下来它的处理方式比想象中温柔。Superpowers 会在编辑器层面做并发控制多个用户编辑同一个资源时系统会通过游标同步和版本提示让大家看到改动。最直接的感受是你能看到对方正在你旁边改代码而不是等你保存后再覆盖你。但也不是完全没有冲突的场景。两个人同时对同一个场景进行大规模调整系统有可能需要在版本之间做协调。我的经验是多人协作时最好提前分工比如一个人负责脚本一个人负责场景布局另一个人只导入素材。这样能最大程度减少在同一资源上的争抢。要是真出现资源状态错乱最简单的办法是刷新页面让客户端重新从服务器同步资源树通常就能恢复正常。6. 安装与应用中容易踩的 5 个坑6.1 端口被占用导致编辑器打不开启动 Superpowers 后浏览器访问localhost:4237如果页面一直转圈打不开大概率是 4237 端口被别的进程占用了。我遇到过好几次都是因为本机跑着其他开发服务抢占了相同的端口。此时可以先用命令行查一下端口占用情况netstat -ano | findstr :4237找到占用进程的 PID 后再去任务管理器里结束对应进程或者直接修改 Superpowers 的启动配置换一个空闲端口。换成自定义端口后所有协作者也要跟着改访问端口这点要提前说明。6.2 3D 场景打开时白屏或黑屏Superpowers 的渲染依赖 WebGL如果你的显卡驱动或浏览器版本比较老在打开带 3D 组件的场景时可能会白屏。排查思路是先开一个新场景创建一个最简单的 2D 精灵看是否正常。如果 2D 正常、3D 异常基本就是 WebGL 能力的问题。可以尝试更新显卡驱动、关闭浏览器硬件加速后再试。6.3 Linux 下缺少图形库依赖Linux 桌面版经常出现“点击图标后没有任何反应”的问题。这个坑的根因是系统缺少 Electron 运行所需的图形库。在 Ubuntu 系环境下你可以先手动装一遍常见依赖sudo apt install libnss3 libgtk-3-0 libxss1装完再启动通常就能正常打开。如果仍然失败建议从终端启动观察打印出来的动态库错误再按提示安装对应包。大多数人卡在这里是因为图形界面没有提供任何错误信息看起来就像是程序崩了。6.4 素材格式兼容性Superpowers 对图片、音频有自己的一套资源转换流程。直接用 PNG、JPEG 是没问题的但某些特殊格式或超大尺寸图片可能会在导入时卡住。我的建议是导入前先把图片统一缩放到合理尺寸比如 2D 游戏里的精灵图控制在 1024 以内既节省显存也减少同步的开销。音频格式尽量用 OGG 或符合 Web 播放标准的格式别用冷门编码。6.5 长时间挂机后内存占用变高有一次我开着编辑器挂机写文档过了几个小时回来发现预览帧率掉得很厉害打开任务管理器一看进程内存占用涨了不少。这个现象常见于同时开了多个场景预览、或者长时间运行复杂 3D 场景的情况。临时解决办法是关掉当前场景的所有预览窗口、重新打开项目界面即可释放一部分内存。如果你们团队要长期挂一个公共项目服务器建议定时重启一下服务保持内存在一个稳定水位。7. 我用下来的真实评价适合谁不适合谁7.1 它能给你的“超能力”是什么如果抛开“超能力”这个名字给人的过度想象Superpowers 真正给我的“超能力”是两条一是把原型验证的周期压缩到了几分钟级别二是让协作门槛低到了只要有个浏览器就能加入。举个例子我平时想验证一个 2D 跑酷玩法的操作手感时传统流程是打开 Unity、等加载、新建项目、导入素材、搭场景、写脚本、调整运镜一整套流程下来至少半小时。而用 Superpowers我只需要新建项目、拖入一张人物图片、挂一段移动脚本几分钟内就能跑起一个可操作的移动测试。它的轻是真的能让人集中注意力在玩法而不是工具本身。对前端开发者来说TypeScript 这个选择也加分不少。你不用重新学一门专属脚本语言类、继承、类型注解都是熟悉的老朋友写脚本的门槛瞬间拉低。我可以直接把一些通用逻辑封装成基类再让多个角色继承它这种工程化习惯在轻量游戏原型里照样能展开。7.2 什么情况下我不建议使用我不会盲目推荐所有人把它当主力工具。如果你要做的游戏面向的是 iOS/Android 商店分发Superpowers 目前的发布能力相对有限。这方面传统引擎的打包流程、SDK 集成、平台适配都要成熟得多。另外这个项目的社区规模和第三方教程都不算大。遇到小众问题时GitHub Issues 可能是你唯一能指望的求助渠道提问的响应速度取决于项目维护者的活跃度。对刚入门的新手来说没有人能保证每个坑都能在文档里找到答案这一点需要一定的动手排查能力。还有一个现实问题是虽然它能协作但它更适合“小团队同步改原型”的轻量场景。如果是几十人规模的大型项目资源管理、权限控制、工作流规范这些工程化能力它暂时还覆盖不了。换句话说拿它做头脑风暴型的快速开发很棒拿它做公司级大作就不太现实。7.3 我的最终建议我个人给你们的安装建议是如果你只是好奇先装桌面版创建个 2D 项目把官方示例跑一遍感受一下它的协作方式和 TypeScript 脚本体验。如果你平时有和同学、朋友一起做游戏原型的需求再去研究服务器版用内网穿透配一个临时公网地址拉几个人进来试试多人联动编辑的感觉。整个过程不影响你已经装好的 Unity 或 Godot也不占多少磁盘空间最多花半天时间你就能判断这个工具合不合你的口味。很多人问我为什么对这样一个冷门工具保持兴趣我的回答是它能让我重新找到做游戏最原始的乐趣——改一行代码立刻看到世界变化。这个反馈速度比任何华丽引擎都更能留住一个创作者的手感。如果你也喜欢这种秒级迭代的体验那么让 Superpowers 在你机器上跑起来绝对不亏。
阅读完成 · 觉得有帮助？
