前两天整理开源项目收藏夹翻出一个躺了大半年的链接superpowers。这名字挺大气实际是个基于浏览器的实时协作游戏开发环境。顺手搜了下相关热搜词“想要安装superpowers”排在很前面看来最近想入坑的朋友不少。这篇文章就把我从安装到跑通第一个协作项目的完整过程和踩坑记录一次性写清楚包含环境准备、启动参数、界面说明和几个常见报错。不管你是被“像写文档一样协作做游戏”这个卖点吸引还是单纯想找个体量轻的2D/3D游戏开发工具这篇都能帮你少走半天弯路。1. Superpowers是什么凭什么敢叫“超级力量”1.1 架构核心一台服务器N个浏览器客户端先说最关键的一点superpowers不是一个传统意义上的单机游戏引擎而是一整套自托管的Web协作开发环境。它的所有项目文件、场景数据、脚本代码都存在服务器端开发者通过浏览器访问同一个地址进行创作。这种架构带来的直接好处就是——协作被写进了核心基因。你和队友不需要像传统引擎那样各自开一个工程再靠Git合并代码、互相传资源包。在superpowers里大家打开的就是同一个库、同一个场景你的改动推送到服务器队友的画面上立刻就会出现。这个过程走的是WebSocket长连接实时性非常高体感上特别像多人编辑Google文档。服务端本身是用TypeScript写成的跑在Node.js环境上客户端界面则由浏览器渲染。整个项目MIT开源意味着你想怎么折腾、怎么二开都行。当年我第一回看到这个项目时脑子里闪过一个念头这不就是把开发工具本身做成了“一个网站”嘛。对它就是这么设计的。1.2 和Unity、Godot这些传统引擎到底差在哪很多人第一次听到superpowers会下意识拿它和Unity、Godot对比。说实话拿它去跟这些重型商业/开源引擎比渲染能力、比生态规模是没什么意义的。它压根不是去抢引擎市场的它解决的是另一类问题让一帮人不用装任何开发软件就能在同一个项目里同时动手。维度Unity / GodotSuperpowers编辑器形态桌面客户端需下载安装浏览器打开即用服务端自托管协作方式Git 资源互相拷贝多靠外部工具内置多人实时编辑光标同步上手门槛工具链复杂场景、预制体、组件体系庞大概念少几十秒就能建项目跑起来游戏类型2D/3D都有适合中大型项目侧重2D和一些轻量3D原型部署形态客户端安装包 / 浏览器导出项目直接构建成Web应用部署我在实际使用中最强烈的感受是superpowers的“引擎”其实是资产、场景和脚本的协调层它的技术含量不在渲染管线上而在状态同步和多人编辑那一套机制上。如果你已经习惯了Unity的预制体、材质球、物理系统那一套东西刚进superpowers会感觉特别“素”。但它本身也没打算给你一套庞杂的渲染体系它给你的是一个足够让几个人快速协作、快速出原型的空间。1.3 哪些人适合用这东西结合我自己的使用场景我觉得三类人最合适第一类是游戏开发教学场景。老师机器上跑一个superpowers服务学生不需要在每台电脑上装Node环境、配显卡驱动、设置工程路径浏览器输入地址就能开干。课堂上所有人都在同一个项目里谁做了什么改动一目了然教学演示的代入感特别强。第二类是Game Jam、黑客松这种限时协作。现场参赛者用同一个服务几个人分工做逻辑、做场景、做资源所有人的操作实时可见省掉了“你那边怎么没提交”“你场景先发我一下”这种沟通成本。第三类是快速原型验证。只想验证一个玩法、一个小机制不想为了几行代码开一个几个GB的IDEsuperpowers这种轻量方案会很顺手。它不适合做什么也很明确追求高画质、复杂光照、大世界规模的项目老老实实去用Unity/Unreal/Godot。superpowers的能力边界就在那里把它当作一个“协作式游戏原型工具”来用你会觉得它非常好用把它当成Unity替代品你会觉得它处处缺东西。2. 安装前的环境准备三个细节最容易被忽略2.1 Node.js版本怎么选因为superpowers是个npm全局包所以Node.js环境是绕不开的前提。这里我想多说一句版本太老不行太新也可能有兼容问题我建议直接选当时的LTS稳定版。如果你机器上已经装了Node先看一下版本node -v npm -v如果手里同时有多个Node版本强烈建议用nvm管理这样后面切换版本、解决权限问题都会省心很多。nvm的安装方式各平台不太一样装好之后常规操作是这样的nvm install 18 nvm use 18 node -v我自己的机器当时用的是Node 18 LTS版本实测安装和运行都没遇到和版本相关的报错。有些教程让你用Node 6、Node 8那种老版本那是针对远古版superpowers的现在没必要刻意降级只要别用特别激进的开发版Node就行。2.2 提前解决npm全局安装的权限问题这是新入坑最容易踩的坑之一。macOS和Linux用户在全新环境下直接执行全局安装经常会撞见这个报错Error: EACCES: permission denied原因很直接npm默认要把包写到系统目录比如/usr/lib/node_modules而当前用户对那个目录没有写权限。很多老教程会让你直接改目录归属比如sudo chown -R $(whoami) $(npm config get prefix)这个方法能用但我更推荐用nvm来绕开权限问题。因为nvm装Node时会把所有全局包装到当前用户的家目录下根本不需要碰系统目录清爽得多。如果你不想用nvm也可以考虑给npm单独指定用户级目录mkdir -p ~/.npm-global npm config set prefix ~/.npm-global然后记得把目录加进PATH。这部分我做成了标准环境准备动作顺序固定避免每次装全局包都卡在同一步。2.3 确认9800端口没被占用superpowers服务默认监听9800端口。很多人装好之后一运行发现端口冲突服务起不来。与其到时候慌不如安装前就查一下。Windows下netstat -ano | findstr :9800macOS / Linux下lsof -i :9800有输出就说明端口被占用了可以先把占用进程关掉或者后面启动服务时通过参数改端口。顺便解释一下为什么这个端口这么重要superpowers的客户端和服务器之间不是普通的网页请求而是长连接的WebSocket。只要端口被防火墙掐掉、被别的进程抢占编辑器里就会出现断线、加载不出来、保存失败这些玄学问题。所以启动之前先确认端口畅通能省掉后面一大半的排错时间。3. 从安装到创建第一个项目全流程实际操作3.1 安装命令与安装验证环境准备做好之后安装动作本身非常简单npm install -g superpowers整个安装过程会把服务端依赖一起拉下来耗时取决于网络状况。装完之后先验证一下superpowers --version能打出版本号就说明命令已经进入了PATH可以往下一步走。如果这里报找不到命令十有八九是npm全局目录没有加进PATH按上面2.2里说的检查路径即可。顺带提一嘴我自己习惯用一个独立目录来跑这个服务比如~/superpowers-server。因为superpowers的项目数据都在启动服务的工作目录下固定目录启动本质上就是固定了你的项目存储位置后面备份、迁移、重启恢复都方便。3.2 启动服务并打开浏览器直接执行superpowers serve看到类似Server is listening on port 9800的输出就表示服务已经起来了。这时在浏览器地址栏输入http://localhost:9800浏览器会加载初始界面要求你设置一个用户名。这里的用户名相当于你的开发者ID协作时其他人会看到你的操作光标和身份名随便起一个方便识别就行。启动命令常用的几个参数我也列一下参数作用示例--host绑定的监听地址superpowers serve --host 0.0.0.0--port修改监听端口superpowers serve --port 9810--server-name给服务器起个名字superpowers serve --server-name class-demo如果你只需要本机自己玩默认参数就够了一旦要多人协作访问就要用--host 0.0.0.0把服务暴露到局域网。3.3 在浏览器里创建第一个项目进入Web界面后核心操作流程是找到新建项目入口选择项目模板。superpowers自带几个演示模板比如2D平台的示例、3D场景的示例。填上项目名称确认创建。创建后进入项目管理页点开场景正式进入编辑器。到了这一步需要先理解它的几个基础概念不然界面会显得有点空。场景对应你游戏里的一个世界/关卡实体是场景里的每一个对象一个角色、一个方块、一个光源都是实体组件挂在实体上负责给它渲染外观、加物理、挂脚本资源则是项目中用到的图片、音频、模型文件。这四者的关系和Unity里的Scene、GameObject、Component、Assets几乎是同一个套路如果你玩过Unity这套理解成本几乎为零。3.4 局域网多人协作怎么连多人协作是superpowers的核心卖点配置方式其实超简单只要服务启动时绑定了0.0.0.0同一局域网内的人就可以直接用你的IP访问。先查一下你机器的局域网IP。Windows下ipconfigmacOS下ifconfig | grep inet 拿到类似192.168.1.23这样的地址后告诉队友在浏览器里打开http://192.168.1.23:9800需要注意一点如果对方打不开先检查系统防火墙是否放行了9800端口。Windows的防火墙和macOS的隐私设置都可能在系统层面拦截外部访问这种问题在局域网协作里特别常见。如果你和队友不在同一个网络那就需要把superpowers服务部署到一台有公网地址的云服务器上然后把9800端口对外开放。这种做法我自己也试过一台低配云服务器跑起来完全够用体验和在本地局域网是差不多的。4. 第一次实操让方块动起来看见协作效果4.1 编辑器界面布局快速认识superpowers的编辑器界面初看可能有点素但功能分区其实很明确左侧的资源树列出当前项目的所有场景、资源、脚本文件。中间的视口区当前场景的2D/3D编辑视角可以直接拖动物体通过鼠标修改位置和旋转。右侧的属性面板选中实体后这里显示它的所有组件和可调参数。底部/侧边的代码编辑区内置的代码编辑器用来写TypeScript脚本。顶部的播放按钮点击后在浏览器里运行当前场景进入游戏预览状态。用生活化一点的方式理解资源树是“仓库”视口是“摆货的展示台”属性面板是“每件商品的标签”代码区是“控制商品行为的后台”播放按钮则是“通上电看商品活起来”。4.2 三步从空项目跑到一个游戏我用一个最简单的例子跑通全流程让一个方块从屏幕左边移动到右边。第一步在场景里创建一个实体给它挂上一个显示外观的组件。比如在2D场景里挂一个基本的Sprite渲染器给它指定一张默认方块图或纯色材质。第二步给这个实体挂一个脚本组件然后写入下面这段TypeScript代码// 挂在实体上的移动脚本 export class MoveBox extends Sup.Behavior { private speed 3; update() { // 每秒往右移动 speed 个单位 this.actor.x this.speed * Sup.Game.deltaTime; // 跑出屏幕后从左侧回来 if (this.actor.x 10) { this.actor.x -10; } } }第三步点击编辑器的播放按钮。方块会在预览画面中持续向右移动跑出右边后自动回到左边重新开始。就这么一个小循环一个最基础的游戏逻辑就跑通了。这里要特别解释一下为什么用TypeScript而不是JavaScript。superpowers整个项目是TS写的所以脚本也天然用TS来写。TS在类型检查上能帮你提前挡掉不少低级错误写的时候可能觉得“多打了几行类型定义”但真到项目复杂起来类型帮助非常大。4.3 内置插件能做什么superpowers的能力扩展主要靠插件。我实际接触到的几个常用插件包括SuperCanvas提供基于Canvas的2D渲染支持做界面、做2D图形很方便。SuperTiled加载Tiled地图编辑器导出的瓦片地图做2D关卡很省事。SuperParticles粒子系统用来做烟雾、火焰、爆炸这类特效。SuperDOM允许在游戏里使用DOM元素做UI做菜单、HUD很直接。插件的安装方式不复杂在项目管理界面找到插件列表选中安装并确认即可。装完之后对应的组件类型就会出现在编辑器里不需要重启服务。这块的思路和VSCode装扩展插件一个道理——基础IDE是壳能力靠插件填充。4.4 多人协作的真实体验协作这块光是看文档体会不深我建议你把场景打开再让一个队友同时打开同一个项目两个人一起操作一下。你会看到队友的光标在资源树和场景里实时移动像远程桌面但比远程桌面丝滑得多。你新建一个实体队友的编辑器里马上同步出现名字、位置、组件全都一致。两个人同时改同一个脚本时编辑窗口里可以互相看到对方的插入位置和选中内容不会出现“覆盖对方代码”的恐怖情况。我自己当时和一位朋友异地联调一个小2D原型我用一台服务器他用浏览器连上来改场景。原本预估要来回发文件、截图沟通的问题全都在同一块画布上解决了。这种“世界同一份改完即同步”的体验用一次就回不去了。5. 排坑记录安装和使用过程中我踩过的5个问题5.1 npm全局安装报EACCES这个在前面环境准备里提过了这里再补一个彻底解决思路。如果你已经装了nvm但全局安装还是报权限错误优先确认执行node和npm的可执行文件路径都指向了nvm管理的目录which node which npm如果路径显示是/usr/bin/node而不是~/.nvm/versions/node/...说明当前shell还在用系统自带的Node。执行一次nvm use 18再重新验证路径。这一步比跟着教程改系统目录权限要安全得多也最省心。5.2 启动服务时端口9800被占用这个我遇到过两次。一次是本机起了别的Web服务占用了端口另一次是旧进程没关干净导致端口处于TIME_WAIT状态。排查方法还是那两条命令。找到占用进程后直接用任务管理器或者kill把它结束掉然后重新启动superpowers serve --port 9800如果不想关掉占用程序用参数换个端口就行superpowers serve --port 9810改端口后所有浏览器访问地址都要同步改成http://localhost:9810这个别忘。5.3 改了代码但运行没有变化这个坑特容易让人怀疑人生。代码改了、保存了、播放了结果游戏跑起来还是旧逻辑。我后来排查发现根源基本都出在浏览器缓存上。编辑器的脚本资源也走HTTP加载浏览器可能缓存了旧的编译结果。解决办法很简单Windows / Linux下Ctrl F5macOS下Cmd Shift R如果在Superpowers编辑器内改完代码没有立刻生效检查一下是不是忘了切回编辑器、或者脚本组件还停在未激活状态。资源树里选中脚本确认状态正常后再播放。5.4 服务器重启之后项目找不到了这也是一个特别容易让人误以为“项目丢了”的坑。原因在于我之前提到的superpowers的项目全部保存为服务端工作目录下的文件。如果你随机在一个目录下启动superpowers serve项目数据就会跟那个目录绑定。我的处理习惯是建一个固定的数据目录比如~/superpowers-server每次启动前先cd进去再执行启动命令。这样服务器重启、甚至整个机器迁移只要把这个目录完整复制走新机器上同目录启动就能恢复全部项目。另外需要提醒的是正式使用前养成随手保存的习惯。编辑器的自动保存机制和传统IDE不太一样资源文件和脚本如果没手动触发保存遇到服务异常或浏览器卡死时改动可能就丢了。5.5 不同版本之间的兼容问题npm全局包的版本更新机制有时会把你坑到。你按照某篇老教程执行npm install -g superpowers装回来的可能是新版本而老教程里的命令和界面已经变了。我自己印象最深的是早期版本有独立的桌面客户端可下载后来的版本基本统一走Web自托管模式了。如果你在看一些老资料发现对不上号先不要慌查一下自己装的版本npm list -g superpowers然后以官方最新的文档说明为准。npm包版本升级可能导致项目格式向后兼容出问题别用npm update随便升级正在服务的项目除非你先把整个数据目录做一次完整备份。这句是我用真实教训换来的。6. 写在最后关于superpowers我最想说的几句如果你只把它当成一个游戏引擎来装那你大概率会觉得它“不过如此”但如果你冲着“浏览器里多人协作开发”这个点来它的体验确实很新鲜。我在实际使用中的体会是它最打动人的从来不是引擎多强而是把一群人的创作流动到了同一块屏幕上。这种“所有人在一台服务器上共同创作”的底层思路放到今天的协作工具大环境里依然值得借鉴。最后再分享一个小技巧如果你只是想先感受一下界面和协作效果不一定要立刻在本地部署可以先去官方演示项目里逛一圈等确认这就是你想要的玩法再回来照着这篇把本地服务装起来。如果你这两天也正准备安装superpowers希望这篇能帮你在前几个坎上省下点时间。进去折腾一圈之后你会发现这个名字起得确实有点道理——不是什么玄学超能力而是“环境配好、命令敲对、人人能上手”的那点踏实感。
前两天整理开源项目收藏夹翻出一个躺了大半年的链接superpowers。这名字挺大气实际是个基于浏览器的实时协作游戏开发环境。顺手搜了下相关热搜词“想要安装superpowers”排在很前面看来最近想入坑的朋友不少。这篇文章就把我从安装到跑通第一个协作项目的完整过程和踩坑记录一次性写清楚包含环境准备、启动参数、界面说明和几个常见报错。不管你是被“像写文档一样协作做游戏”这个卖点吸引还是单纯想找个体量轻的2D/3D游戏开发工具这篇都能帮你少走半天弯路。1. Superpowers是什么凭什么敢叫“超级力量”1.1 架构核心一台服务器N个浏览器客户端先说最关键的一点superpowers不是一个传统意义上的单机游戏引擎而是一整套自托管的Web协作开发环境。它的所有项目文件、场景数据、脚本代码都存在服务器端开发者通过浏览器访问同一个地址进行创作。这种架构带来的直接好处就是——协作被写进了核心基因。你和队友不需要像传统引擎那样各自开一个工程再靠Git合并代码、互相传资源包。在superpowers里大家打开的就是同一个库、同一个场景你的改动推送到服务器队友的画面上立刻就会出现。这个过程走的是WebSocket长连接实时性非常高体感上特别像多人编辑Google文档。服务端本身是用TypeScript写成的跑在Node.js环境上客户端界面则由浏览器渲染。整个项目MIT开源意味着你想怎么折腾、怎么二开都行。当年我第一回看到这个项目时脑子里闪过一个念头这不就是把开发工具本身做成了“一个网站”嘛。对它就是这么设计的。1.2 和Unity、Godot这些传统引擎到底差在哪很多人第一次听到superpowers会下意识拿它和Unity、Godot对比。说实话拿它去跟这些重型商业/开源引擎比渲染能力、比生态规模是没什么意义的。它压根不是去抢引擎市场的它解决的是另一类问题让一帮人不用装任何开发软件就能在同一个项目里同时动手。维度Unity / GodotSuperpowers编辑器形态桌面客户端需下载安装浏览器打开即用服务端自托管协作方式Git 资源互相拷贝多靠外部工具内置多人实时编辑光标同步上手门槛工具链复杂场景、预制体、组件体系庞大概念少几十秒就能建项目跑起来游戏类型2D/3D都有适合中大型项目侧重2D和一些轻量3D原型部署形态客户端安装包 / 浏览器导出项目直接构建成Web应用部署我在实际使用中最强烈的感受是superpowers的“引擎”其实是资产、场景和脚本的协调层它的技术含量不在渲染管线上而在状态同步和多人编辑那一套机制上。如果你已经习惯了Unity的预制体、材质球、物理系统那一套东西刚进superpowers会感觉特别“素”。但它本身也没打算给你一套庞杂的渲染体系它给你的是一个足够让几个人快速协作、快速出原型的空间。1.3 哪些人适合用这东西结合我自己的使用场景我觉得三类人最合适第一类是游戏开发教学场景。老师机器上跑一个superpowers服务学生不需要在每台电脑上装Node环境、配显卡驱动、设置工程路径浏览器输入地址就能开干。课堂上所有人都在同一个项目里谁做了什么改动一目了然教学演示的代入感特别强。第二类是Game Jam、黑客松这种限时协作。现场参赛者用同一个服务几个人分工做逻辑、做场景、做资源所有人的操作实时可见省掉了“你那边怎么没提交”“你场景先发我一下”这种沟通成本。第三类是快速原型验证。只想验证一个玩法、一个小机制不想为了几行代码开一个几个GB的IDEsuperpowers这种轻量方案会很顺手。它不适合做什么也很明确追求高画质、复杂光照、大世界规模的项目老老实实去用Unity/Unreal/Godot。superpowers的能力边界就在那里把它当作一个“协作式游戏原型工具”来用你会觉得它非常好用把它当成Unity替代品你会觉得它处处缺东西。2. 安装前的环境准备三个细节最容易被忽略2.1 Node.js版本怎么选因为superpowers是个npm全局包所以Node.js环境是绕不开的前提。这里我想多说一句版本太老不行太新也可能有兼容问题我建议直接选当时的LTS稳定版。如果你机器上已经装了Node先看一下版本node -v npm -v如果手里同时有多个Node版本强烈建议用nvm管理这样后面切换版本、解决权限问题都会省心很多。nvm的安装方式各平台不太一样装好之后常规操作是这样的nvm install 18 nvm use 18 node -v我自己的机器当时用的是Node 18 LTS版本实测安装和运行都没遇到和版本相关的报错。有些教程让你用Node 6、Node 8那种老版本那是针对远古版superpowers的现在没必要刻意降级只要别用特别激进的开发版Node就行。2.2 提前解决npm全局安装的权限问题这是新入坑最容易踩的坑之一。macOS和Linux用户在全新环境下直接执行全局安装经常会撞见这个报错Error: EACCES: permission denied原因很直接npm默认要把包写到系统目录比如/usr/lib/node_modules而当前用户对那个目录没有写权限。很多老教程会让你直接改目录归属比如sudo chown -R $(whoami) $(npm config get prefix)这个方法能用但我更推荐用nvm来绕开权限问题。因为nvm装Node时会把所有全局包装到当前用户的家目录下根本不需要碰系统目录清爽得多。如果你不想用nvm也可以考虑给npm单独指定用户级目录mkdir -p ~/.npm-global npm config set prefix ~/.npm-global然后记得把目录加进PATH。这部分我做成了标准环境准备动作顺序固定避免每次装全局包都卡在同一步。2.3 确认9800端口没被占用superpowers服务默认监听9800端口。很多人装好之后一运行发现端口冲突服务起不来。与其到时候慌不如安装前就查一下。Windows下netstat -ano | findstr :9800macOS / Linux下lsof -i :9800有输出就说明端口被占用了可以先把占用进程关掉或者后面启动服务时通过参数改端口。顺便解释一下为什么这个端口这么重要superpowers的客户端和服务器之间不是普通的网页请求而是长连接的WebSocket。只要端口被防火墙掐掉、被别的进程抢占编辑器里就会出现断线、加载不出来、保存失败这些玄学问题。所以启动之前先确认端口畅通能省掉后面一大半的排错时间。3. 从安装到创建第一个项目全流程实际操作3.1 安装命令与安装验证环境准备做好之后安装动作本身非常简单npm install -g superpowers整个安装过程会把服务端依赖一起拉下来耗时取决于网络状况。装完之后先验证一下superpowers --version能打出版本号就说明命令已经进入了PATH可以往下一步走。如果这里报找不到命令十有八九是npm全局目录没有加进PATH按上面2.2里说的检查路径即可。顺带提一嘴我自己习惯用一个独立目录来跑这个服务比如~/superpowers-server。因为superpowers的项目数据都在启动服务的工作目录下固定目录启动本质上就是固定了你的项目存储位置后面备份、迁移、重启恢复都方便。3.2 启动服务并打开浏览器直接执行superpowers serve看到类似Server is listening on port 9800的输出就表示服务已经起来了。这时在浏览器地址栏输入http://localhost:9800浏览器会加载初始界面要求你设置一个用户名。这里的用户名相当于你的开发者ID协作时其他人会看到你的操作光标和身份名随便起一个方便识别就行。启动命令常用的几个参数我也列一下参数作用示例--host绑定的监听地址superpowers serve --host 0.0.0.0--port修改监听端口superpowers serve --port 9810--server-name给服务器起个名字superpowers serve --server-name class-demo如果你只需要本机自己玩默认参数就够了一旦要多人协作访问就要用--host 0.0.0.0把服务暴露到局域网。3.3 在浏览器里创建第一个项目进入Web界面后核心操作流程是找到新建项目入口选择项目模板。superpowers自带几个演示模板比如2D平台的示例、3D场景的示例。填上项目名称确认创建。创建后进入项目管理页点开场景正式进入编辑器。到了这一步需要先理解它的几个基础概念不然界面会显得有点空。场景对应你游戏里的一个世界/关卡实体是场景里的每一个对象一个角色、一个方块、一个光源都是实体组件挂在实体上负责给它渲染外观、加物理、挂脚本资源则是项目中用到的图片、音频、模型文件。这四者的关系和Unity里的Scene、GameObject、Component、Assets几乎是同一个套路如果你玩过Unity这套理解成本几乎为零。3.4 局域网多人协作怎么连多人协作是superpowers的核心卖点配置方式其实超简单只要服务启动时绑定了0.0.0.0同一局域网内的人就可以直接用你的IP访问。先查一下你机器的局域网IP。Windows下ipconfigmacOS下ifconfig | grep inet 拿到类似192.168.1.23这样的地址后告诉队友在浏览器里打开http://192.168.1.23:9800需要注意一点如果对方打不开先检查系统防火墙是否放行了9800端口。Windows的防火墙和macOS的隐私设置都可能在系统层面拦截外部访问这种问题在局域网协作里特别常见。如果你和队友不在同一个网络那就需要把superpowers服务部署到一台有公网地址的云服务器上然后把9800端口对外开放。这种做法我自己也试过一台低配云服务器跑起来完全够用体验和在本地局域网是差不多的。4. 第一次实操让方块动起来看见协作效果4.1 编辑器界面布局快速认识superpowers的编辑器界面初看可能有点素但功能分区其实很明确左侧的资源树列出当前项目的所有场景、资源、脚本文件。中间的视口区当前场景的2D/3D编辑视角可以直接拖动物体通过鼠标修改位置和旋转。右侧的属性面板选中实体后这里显示它的所有组件和可调参数。底部/侧边的代码编辑区内置的代码编辑器用来写TypeScript脚本。顶部的播放按钮点击后在浏览器里运行当前场景进入游戏预览状态。用生活化一点的方式理解资源树是“仓库”视口是“摆货的展示台”属性面板是“每件商品的标签”代码区是“控制商品行为的后台”播放按钮则是“通上电看商品活起来”。4.2 三步从空项目跑到一个游戏我用一个最简单的例子跑通全流程让一个方块从屏幕左边移动到右边。第一步在场景里创建一个实体给它挂上一个显示外观的组件。比如在2D场景里挂一个基本的Sprite渲染器给它指定一张默认方块图或纯色材质。第二步给这个实体挂一个脚本组件然后写入下面这段TypeScript代码// 挂在实体上的移动脚本 export class MoveBox extends Sup.Behavior { private speed 3; update() { // 每秒往右移动 speed 个单位 this.actor.x this.speed * Sup.Game.deltaTime; // 跑出屏幕后从左侧回来 if (this.actor.x 10) { this.actor.x -10; } } }第三步点击编辑器的播放按钮。方块会在预览画面中持续向右移动跑出右边后自动回到左边重新开始。就这么一个小循环一个最基础的游戏逻辑就跑通了。这里要特别解释一下为什么用TypeScript而不是JavaScript。superpowers整个项目是TS写的所以脚本也天然用TS来写。TS在类型检查上能帮你提前挡掉不少低级错误写的时候可能觉得“多打了几行类型定义”但真到项目复杂起来类型帮助非常大。4.3 内置插件能做什么superpowers的能力扩展主要靠插件。我实际接触到的几个常用插件包括SuperCanvas提供基于Canvas的2D渲染支持做界面、做2D图形很方便。SuperTiled加载Tiled地图编辑器导出的瓦片地图做2D关卡很省事。SuperParticles粒子系统用来做烟雾、火焰、爆炸这类特效。SuperDOM允许在游戏里使用DOM元素做UI做菜单、HUD很直接。插件的安装方式不复杂在项目管理界面找到插件列表选中安装并确认即可。装完之后对应的组件类型就会出现在编辑器里不需要重启服务。这块的思路和VSCode装扩展插件一个道理——基础IDE是壳能力靠插件填充。4.4 多人协作的真实体验协作这块光是看文档体会不深我建议你把场景打开再让一个队友同时打开同一个项目两个人一起操作一下。你会看到队友的光标在资源树和场景里实时移动像远程桌面但比远程桌面丝滑得多。你新建一个实体队友的编辑器里马上同步出现名字、位置、组件全都一致。两个人同时改同一个脚本时编辑窗口里可以互相看到对方的插入位置和选中内容不会出现“覆盖对方代码”的恐怖情况。我自己当时和一位朋友异地联调一个小2D原型我用一台服务器他用浏览器连上来改场景。原本预估要来回发文件、截图沟通的问题全都在同一块画布上解决了。这种“世界同一份改完即同步”的体验用一次就回不去了。5. 排坑记录安装和使用过程中我踩过的5个问题5.1 npm全局安装报EACCES这个在前面环境准备里提过了这里再补一个彻底解决思路。如果你已经装了nvm但全局安装还是报权限错误优先确认执行node和npm的可执行文件路径都指向了nvm管理的目录which node which npm如果路径显示是/usr/bin/node而不是~/.nvm/versions/node/...说明当前shell还在用系统自带的Node。执行一次nvm use 18再重新验证路径。这一步比跟着教程改系统目录权限要安全得多也最省心。5.2 启动服务时端口9800被占用这个我遇到过两次。一次是本机起了别的Web服务占用了端口另一次是旧进程没关干净导致端口处于TIME_WAIT状态。排查方法还是那两条命令。找到占用进程后直接用任务管理器或者kill把它结束掉然后重新启动superpowers serve --port 9800如果不想关掉占用程序用参数换个端口就行superpowers serve --port 9810改端口后所有浏览器访问地址都要同步改成http://localhost:9810这个别忘。5.3 改了代码但运行没有变化这个坑特容易让人怀疑人生。代码改了、保存了、播放了结果游戏跑起来还是旧逻辑。我后来排查发现根源基本都出在浏览器缓存上。编辑器的脚本资源也走HTTP加载浏览器可能缓存了旧的编译结果。解决办法很简单Windows / Linux下Ctrl F5macOS下Cmd Shift R如果在Superpowers编辑器内改完代码没有立刻生效检查一下是不是忘了切回编辑器、或者脚本组件还停在未激活状态。资源树里选中脚本确认状态正常后再播放。5.4 服务器重启之后项目找不到了这也是一个特别容易让人误以为“项目丢了”的坑。原因在于我之前提到的superpowers的项目全部保存为服务端工作目录下的文件。如果你随机在一个目录下启动superpowers serve项目数据就会跟那个目录绑定。我的处理习惯是建一个固定的数据目录比如~/superpowers-server每次启动前先cd进去再执行启动命令。这样服务器重启、甚至整个机器迁移只要把这个目录完整复制走新机器上同目录启动就能恢复全部项目。另外需要提醒的是正式使用前养成随手保存的习惯。编辑器的自动保存机制和传统IDE不太一样资源文件和脚本如果没手动触发保存遇到服务异常或浏览器卡死时改动可能就丢了。5.5 不同版本之间的兼容问题npm全局包的版本更新机制有时会把你坑到。你按照某篇老教程执行npm install -g superpowers装回来的可能是新版本而老教程里的命令和界面已经变了。我自己印象最深的是早期版本有独立的桌面客户端可下载后来的版本基本统一走Web自托管模式了。如果你在看一些老资料发现对不上号先不要慌查一下自己装的版本npm list -g superpowers然后以官方最新的文档说明为准。npm包版本升级可能导致项目格式向后兼容出问题别用npm update随便升级正在服务的项目除非你先把整个数据目录做一次完整备份。这句是我用真实教训换来的。6. 写在最后关于superpowers我最想说的几句如果你只把它当成一个游戏引擎来装那你大概率会觉得它“不过如此”但如果你冲着“浏览器里多人协作开发”这个点来它的体验确实很新鲜。我在实际使用中的体会是它最打动人的从来不是引擎多强而是把一群人的创作流动到了同一块屏幕上。这种“所有人在一台服务器上共同创作”的底层思路放到今天的协作工具大环境里依然值得借鉴。最后再分享一个小技巧如果你只是想先感受一下界面和协作效果不一定要立刻在本地部署可以先去官方演示项目里逛一圈等确认这就是你想要的玩法再回来照着这篇把本地服务装起来。如果你这两天也正准备安装superpowers希望这篇能帮你在前几个坎上省下点时间。进去折腾一圈之后你会发现这个名字起得确实有点道理——不是什么玄学超能力而是“环境配好、命令敲对、人人能上手”的那点踏实感。
