★ FEATURED ARTICLE 如果你最近也搜过“superpowers”这个词应该和我刚开始一样有点懵搜索结果里一半是“超能力”的美剧和书另一半则指向一个叫 Superpowers 的开源项目。其实大家搜索“想要安装 superpowers”想装的大概率是这套开源的 HTML5 游戏开发环境——一套完整的 2D/3D 游戏 IDE。它和你印象里那些拖拽式游戏引擎最大的区别是整个编辑器跑在浏览器界面里逻辑代码用 TypeScript 编写渲染走 Three.js而本机一个 Node.js 服务端负责保存项目、同步数据和多人协作。如果你一直想找一个轻量、能多人实时协作、做出来的东西能直接导出网页的游戏开发工具这篇笔记就是给你的。我的经验不一定适合所有人但至少能帮你把这套工具真正用起来而不是装完就吃灰。1. 先说清楚搜索“superpowers”到底搜到的是什么1.1 它不是脚本不是插件而是一整套开发环境很多人第一次看到“superpowers”这个词会以为是某个编辑器的超能力插件或者某个特效脚本。实际上Superpowers 是独立的开源软件GitHub 上有完整的仓库和发布页官方定位是“开源的 HTML5 游戏开发环境”。它不是一个功能包而是从资源管理、场景编辑、代码编写到运行调试都包含的完整工具链。拆开看它的架构大概分三块桌面启动壳负责拉起一个独立窗口窗口里加载本地网页版的编辑器界面。这个名字叫“窗口”但本质上它运行时带了一个 Chromium 内核所以你不必额外装 Chrome 或 Edge。Node.js 服务端这是真正的核心。它监听本地端口管理项目文件、用户账号、资源读写以及多人协作时的实时数据同步。浏览器/窗口里的编辑器 UI负责场景编辑、代码编辑、属性面板这些看得见的部分。它只是一个“遥控器”改的东西都实时写进服务端托管的项目目录里。理解这个结构对后面安装和排查问题特别重要。很多人装完 Superpowers 后把那个黑色命令行窗口直接关掉然后发现编辑器页面打不开了——就是因为服务端被你亲手杀了。它不是网页后台那种“开着也无所谓”的进程而是整个项目的数据中心。1.2 它凭什么值得占一个“安装名额”如果你常年做游戏开发或者只是喜欢折腾工具Superpowers 有几点是市面上其他引擎没法完全替代的。第一协作是原生的。它不像传统引擎那样“一个人改完打包发给别人别人再改”的割裂流程。Superpowers 从底层就把项目数据放在服务端多人通过浏览器连到同一个服务端后可以实时看到对方的光标、同时在同一个场景里编辑感觉很像协作文档。我一个人开发时可能觉得无所谓但只要试过一次两个人同时改脚本、同时调场景就回不去了。第二技术栈非常干净。编辑器本身是 Web 技术游戏逻辑用 TypeScript渲染层是 Three.js。这套组合对前端出身的人极其友好你不需要学一个专用的可视化编程语言也不用被一整套“游戏引擎专用概念”吓退。实体、组件、Behavior 这些概念其实很接近前端开发里的节点、组件、脚本。第三部署产物是网页。做完的小游戏可以直接导出 HTML5 产物丢到任意静态页面托管上就能玩。对于做交互原型、教学演示、Game Jam 作品的人来说这是巨大的便利。你不需要考虑打包成 App、签名、上架那套流程一个链接就能分享。我当然不是说它能取代 Unity 或 Godot。大型商业项目、复杂物理模拟、性能要求极高的 3D 大作Superpowers 一概不适合。但在轻量游戏、教学场景、快速原型、团队协作这几件事上它确实有自己的位置。想装它之前最好先确认你需要的正是这些能力。2. 安装前必须确认的三件事2.1 官方渠道与版本选择独立安装包还是 npm安装 Superpowers 前你要先想清楚走哪条路。官方大致提供两类安装方式每类的体验差异还挺大。安装方式适合人群优点缺点图形安装包Windows / macOS / Linux大部分普通用户、不想折腾命令行的朋友一键安装、自带运行环境、启动最快对网络下载依赖较高升级需要重新下包通过 npm 安装习惯了命令行、想追新功能、要自定义部署路径的人更新方便、文件位置可控、适合脚本化操作需要先装 Node.js对工具链理解要求更高直接拉源代码跑开发版极端发烧友、开源贡献者能用到最新分支特性不稳定源码编译坑多普通人不建议碰我个人的建议是如果你是第一次接触直接下官方发布页里最新的稳定版安装包别折腾。等用顺手了想追踪新版本再考虑 npm 方式也不迟。很多“安装失败”的求助仔细看都是下了某个第三方打包的版本或者用了过旧的开发版问题根本不是软件本身有问题。2.2 系统要求与“内置浏览器”的坑Superpowers 的编辑器是网页但你别真拿普通浏览器去打开它。官方发布的独立安装包自带的运行窗口是打包好的 Chromium 内核它跟系统里其他软件的关系不大但对显卡和驱动还是有要求的。最低配置不用太紧张能流畅看视频的电脑基本能跑。但有几个问题容易被忽略白屏问题如果你启动后看到一片空白窗口大概率是显卡驱动太旧或者系统禁用了硬件加速。先别急着重装更新显卡驱动往往就解决了老机器实在不行可以查一下启动参数里加禁用 GPU 加速的开关具体参数名不同版本略有差异但网上搜软件名加“white screen”就能找到对应方案。64 位系统官方安装包基本都是 64 位的。如果你的系统还是 32 位老老实实换系统或者放弃吧这不是靠配置能绕过去的。中文字体显示在 Windows 上偶尔会看到界面字体发虚一般是 DPI 缩放导致的。把运行窗口的缩放改回 100% 或调到匹配屏幕的整数倍通常能改善。2.3 网络与防火墙的预期管理Superpowers 启动后会在本机开一个服务端口默认是 4237。这意味着第一次运行时Windows 防火墙几乎一定会弹窗询问是否允许它监听端口。这一步很多人手快直接点了“取消”之后打开http://127.0.0.1:4237就永远提示连接不上以为软件坏了。你要做的就是允许它访问专用网络。如果公司电脑有统一的安全策略弹窗没出现也连不上那就得找网络管理员放行本机回环地址的访问或者换一台个人电脑测试。另外下载安装包的时候如果速度特别慢可以找已经下载好的朋友或同事拷贝官方安装包毕竟它体积不算小断断续续的下载经常会导致文件损坏。3. 几种安装方式实测从双击安装到命令行启动3.1 Windows 图形安装包的完整流程我最早接触 Superpowers 是在 Windows 上流程非常传统打开官方发布页找到最新的稳定版 Windows 安装程序通常是一个.exe或.msi文件。下载完成后右键以管理员身份运行安装路径保持默认即可。安装结束后从开始菜单或桌面快捷方式启动。启动后不要急着乱点先看会发生什么。正常情况是弹出一个黑色命令行/终端风格的窗口里面滚动几行日志紧接着会打开一个浏览器标签或独立窗口主页。我第一次看到那堆日志还以为出错了其实那是服务端的运行日志。这个窗口就是服务端本体使用期间千万别关。如果你想固定常驻可以在日志窗口右键把窗口标题另存为或者用系统服务的方式托管但这个属于进阶玩法普通使用不需要。启动成功的标志是日志里出现类似“listening on port 4237”的提示同时页面能打开http://127.0.0.1:4237。你会看到一个局域网内连接地址的提示这个地址后面协作时用得上。macOS 和 Linux 大同小异。macOS 用户如果遇到“无法打开因为来自身份不明的开发者”之类的提示右键应用图标选择“打开”确认一次即可。Linux 用户拿到的是.tar.gz压缩包解压后进入目录执行tar -xzf superpowers-*.tar.gz cd superpowers ./superpowers这一步在多数主流 Linux 发行版上都能跑起来前提是你已经装好了基础图形环境和网络工具。3.2 用 npm 跑开发版多一条路如果你想用 npm 方式装需要先确认机器上有 Node.js。版本太老会遇到依赖安装失败或证书问题建议至少用 LTS 版本的 Node.js。安装命令很简单npm install -g superpowers装完后直接在命令行输入superpowers正常情况下它会拉起服务端并提示访问http://127.0.0.1:4237。npm 版的好处是文件位置可控更新只需要npm update -g superpowers不用重新下载整个安装包。坏处是对新手不友好你不仅要理解 Node.js 全局安装的目录结构还要自己处理各种环境变量问题。如果你只是想试用一下也别急着全局安装直接用官方发布页的包更省事。npm 这条路更适合那些想二次开发、想改源码、想把服务端部署到远程机器上的用户。我第一次用 npm 装的时候就是因为把某个环境变量配错了启动时一直找不到模块最后清掉重装才解决。3.3 首次启动时的正确姿势无论你通过哪种方式装好了 Superpowers第一次打开页面后不要急着创建项目。先做三件事确认端口号。页面地址栏显示的是4237就对了如果被其他软件占用了端口启动日志里会有明确的提示这时候去改服务端配置里的端口即可。设置管理员账号。首次访问会让你创建一个管理员账号这个账号用于管理项目、协作用户和权限。建议密码设置得复杂一点因为如果你的端口被映射到公网弱密码就是灾难。查看一下服务端数据目录的入口。不同版本的位置有差异可以在菜单栏找“Open data directory”之类的选项也可以直接看启动日志里显示的路径。这一步特别重要后面备份和迁移全靠它。做完这三件事你才算真正“安装完成”。很多人装完只看到编辑器界面就觉得自己会了等数据出问题时才到处找文件位置那时候就晚了。4. 第一次打开它能干什么界面、建项与第一个脚本4.1 快速过一遍编辑器界面登录管理员账号后你会进入一个类似仪表盘的页面创建或打开项目。创建一个新项目时官方自带一些示例模板我强烈建议你第一次选择示例项目看看而不是直接选空项目。示例项目里包含了场景、脚本、模型、贴图能让你快速理解一件重要的事——实体是怎么组织起来的脚本是怎么挂到实体上的。Superpowers 的编辑器布局跟主流引擎神似但不完全一样。核心几个面板资源面板Assets管理场景、模型、贴图、脚本、音频等所有文件。它跟文件管理器很像但有自己的资源类型。场景视图Scene View显示当前场景的 3D/2D 预览可以拖拽旋转视角。层级面板Hierarchy展示当前场景里的实体树形结构类似 DOM 树。属性面板Inspector选中实体时显示它的变换、组件、行为等属性。如果你的目标是做一个小 3D 游戏基本上只在场景视图和层级面板之间来回切换就够了。如果你更习惯 2DSuperpowers 也支持 2D 项目逻辑完全一样只是场景不再是 3D 透视视角。4.2 从空项目到“一个方块”看完了示例项目自己动手建一个空项目然后创建一个方块这是最快速的上手路线。在资源面板里右键选择新建“3D 模型”类型选立方体。把生成的立方体资源拖到场景视图或层级面板里你会看到场景中出现一个方块实体。在层级面板选中这个方块属性面板里就能调整它的位置、旋转、缩放。这里有一个很“Superpowers”的地方资源Asset和实体Actor是分离的。资源是模板实体是资源在场景里的实例。这跟你在 3D 建模软件里“把模型放进场景”是一个道理。刚开始不懂没关系先记住这个关系后面写脚本会反复用到。如果你觉得场景里视角操作别扭记住这几个鼠标操作右键拖动旋转视角中键拖动平移滚轮缩放。选中实体后按一下 F 键或点击工具栏的聚焦按钮视角会立刻对准选中的实体这个动作在调场景时几乎每十秒就要用一次。4.3 写第一个脚本让方块自己旋转方块放上去只是静态的现在给它写个行为让它自己转起来。在资源面板里新建一个脚本资源Superpowers 会生成一个 TypeScript 文件。默认代码是一个最简单的行为类我们要在里面加旋转逻辑class SpinningCube extends Sup.Behavior { update() { const rotation this.actor.getLocalRotationY(); this.actor.setLocalRotationY(rotation 0.05); } } Sup.registerBehavior(SpinningCube);这段代码解释起来很简单Sup.Behavior是所有行为脚本的基类update()方法会在每一帧被调用。this.actor代表脚本所附着的实体每次调用getLocalRotationY取当前 Y 轴角度加一点增量再写回去于是方块就匀速旋转了。写完保存回到层级面板选中方块实体在属性面板里找到“Add Behavior”之类的按钮把刚才的SpinningCube行为加进去。然后点编辑器顶部的运行按钮你就能看到方块在场景里转起来了。这里有个针对小白的提醒脚本文件名、类名、注册名这三者虽然可以不一样但建议保持一致否则项目稍微变复杂一点就乱套了。我的习惯是行为类名跟文件名一致注册调用紧跟类的声明这样后面看代码时脑子不用额外做一次映射。如果你写代码时发现 API 名称和我这里写的不完全一样别慌。Superpowers 不同版本的 API 确实有细微调整编辑器里通常自带类型提示和自动补全写的时候多看提示就能找到准确的方法名。这是 TypeScript 的好处比纯 JavaScript 瞎猜强太多。5. 最容易踩的坑和排查心得5.1 数据到底存在哪备份是头等大事Superpowers 的项目数据保存在服务端的数据目录里不是浏览器内部的存储也不是编辑器项目文件夹本身。Windows 上通常隐藏在用户目录或安装目录附近macOS 则通常在 Application Support 目录下。不同版本的位置不完全一样最稳的找法是看启动日志或者用菜单里的打开数据目录功能。第一次找到数据目录后我建议你立刻做两件事把整个数据目录压缩备份一份。你不用天天备份但每次做完一个重要原型压缩一次丢到网盘或移动硬盘成本极低。确认实时保存的行为。Superpowers 的改动通常是即时写入服务端的页面崩溃丢失的概率不大但它没有类似“版本历史”的功能。你做了一大堆修改然后发现还不如之前没有 CtrlZ 能救你。这时候备份就是唯一的后悔药。我自己的做法是把数据目录纳入 Git 仓库管理每次提交就是一次快照。这样既能回滚也方便换电脑时迁移。迁移这件事听起来复杂实际很机械新机器装好同样版本先停掉服务端把旧的数据目录完整覆盖过去再启动项目就原封不动回来了。5.2 协作连接不上的典型排查链路Superpowers 最吸引人的特性就是多人协作但也是最容易卡住新手的地方。别人连不上你的项目时按下面的链路排查基本能解决九成问题你自己能打开http://127.0.0.1:4237但别人不能。说明服务端运行正常问题出在网络路径上。确认对方和你处在同一个局域网。比如一台电脑连的是 Wi-Fi另一台连的是有线网但路由器开启了“AP 隔离”或“访客网络隔离”那它们虽然在同一个路由器下实际上是互相不连通的。这种场景最坑因为看起来网络没问题。让对方面板里填写的地址是你的局域网 IP 加端口而不是127.0.0.1。127.0.0.1是每台电脑自己的回环地址填这个永远只能访问自己。在命令提示符里用ipconfig查一下你当前机器的 IPv4 地址把类似192.168.x.x的地址发给对方。回到 Windows 防火墙里确认服务端程序已经允许专用网络的入站连接。如果之前手快点了取消去防火墙设置里手动放行或者干脆把4237端口加入白名单。看服务端日志。每次有人连接日志里都会留下记录如果日志里什么都没有说明对方根本没访问到你的服务端问题还在前几步。如果是公网协作那就不是“加个好友连接”这么简单了。你可以把服务端部署到一台有公网 IP 的远程服务器上或者自己研究路由器端口映射。但这会牵扯账号安全、端口暴露、服务托管一整套问题属于进阶玩法。对绝大多数人来说同一局域网下协作已经够用了公网场景尽量用现成的游戏部署平台发布出去让玩家直接玩成品别把编辑权暴露到公网。5.3 性能与习惯差异别拿它当 Unity 用用了一段时间我逐渐摸清了 Superpowers 的边界。它最大的问题是项目大了以后编辑器本身会明显变卡。毕竟编辑器跑在浏览器内核里场景里实体一多、资源一重每帧刷新都要在浏览器里走一遍。如果你拿它做复杂的大型游戏会发现场景编辑开始卡顿手感比 Unity 差很多。但这件事要两方面看。Superpowers 的定位本来就是“轻量 协作 原型”拿它做半年以上的大型项目是不现实的。我目前最常用的场景有三个快速原型想验证一个玩法手感半小时就能搭出可交互的场景比从零开一个 Unity 项目快得多。教学演示给新人讲“实体、组件、脚本”这些基础概念时Superpowers 的浏览器界面天然适合投屏演示多人还能直接在同一个项目里跟着改。Game Jam 协作短时间内密集多人开发它内置的协作能力省掉了版本管理的摩擦。这可能是它最耀眼的场景。习惯上也要调整。它是近实时保存你输入脚本时改动会不断写入服务端不像传统 IDE 那样有明确的“保存”按钮。这会导致一个心理差异你总觉得没保存其实对方已经看到你的垃圾代码了。所以团队协作时建议约定好脚本的“可编辑状态”比如一个人改脚本的同时其他人别在同一文件里乱动否则光标跳来跳去思考完全被打断。另外中文输入法在代码编辑器里偶尔会出痛点比如输入括号和引号时输入法干扰代码结构。这不是 Superpowers 独有的问题但明显比用 Visual Studio Code 时严重。我的对策是写代码时切换到英文输入法或者干脆把编辑器里的拼写检查类功能关掉能明显减少糟心事。最后说一句很多人忽略的性能点编辑器卡不卡和游戏发布后的性能是两码事。编辑器里预览掉帧不代表发布后的网页掉帧。我在项目里加了上百个粒子后编辑器预览已经明显掉帧但导出 HTML5 后放到浏览器里跑帧率依然很稳定。所以做性能判断时记得以发布后的实际测试为准别提前吓跑自己。写在最后的使用体会我对 Superpowers 的态度很明确它不是生产力最高的引擎但绝对是最有意思的协作玩具之一。如果你身边有同样爱做小游戏的朋友我强烈建议你俩装好它在同一个局域网里开个项目试一试。看着对方的彩色光标在你的场景里移动一起往同一个方块上挂脚本那种“像编辑协作文档一样做游戏”的体验是任何单机引擎都给不了的。我现在已经习惯把它当协作白板用想到什么玩法先拉朋友进来搭个原型验证可行再考虑迁移到更重的工具。如果你也想走这条路请至少做到一件事从第一次启动起就养成备份数据目录的习惯。别的坑都可以踩唯独数据丢了没法重来。
阅读完成 · 觉得有帮助？
