最近群里好几个做独立游戏的朋友都在问同一件事搜 Superpowers 查出来的结果又杂又多什么编程工具、浏览器插件都有到底哪个才是那个能直接在浏览器里写游戏、还能跟队友实时协作的开源项目这个话题我去年就折腾过一轮这次为了写这篇又重新搭了一遍环境从下载到跑通前后不到十分钟。这篇文章我就把完整的安装过程、核心设计思路、实操步骤和踩坑记录全部拆开讲给想动手试的朋友一条能直接照着走的路。Superpowers 是一个开源、免费的 HTML5 游戏开发环境最特别的地方在于它没有传统意义上的桌面编辑器而是先在本地跑起一个服务端再用浏览器打开控制台干活。游戏脚本用 TypeScript 写2D 渲染走 Pixi.js3D 走 Three.js多人协作是内置功能而不是后期插件。适合独立开发者、三五人的小团队、带孩子学编程的老师以及 Game Jam 这种需要短时间内快速产出的临时队伍。门槛不算高会一点 JS 就能上手完全零基础也能靠它内置的示例项目先找到感觉。1. 项目到底是个啥Superpowers 的前因后果很多人第一次听到Superpowers这个名字第一反应是超能力或者某个励志课程其实放到技术圈里它是一个很早就开始做、后来开源出来的协作式游戏制作工具。它不是引擎更准确地说是一套游戏开发环境引擎的部分由 Pixi.js 和 Three.js 扛着它自己负责把场景编辑、资源管理、代码编辑、即时预览和多人同步这些活儿全部整合进一个浏览器页面里。1.1 先搞清楚它和 Phaser、Unity、Godot 有什么不同Superpowers 最容易被误解的地方就是它是不是又一个引擎。不是。引擎解决的是画面怎么渲染物理怎么算而 Superpowers 解决的是一群人怎么在一个舒服的环境里把游戏做出来。它的定位更像是自带协作能力的网页版 IDE 资源管线 场景编辑器。用生活化的方式理解Unity 和 Godot 像是一间设备齐全的工作室单人干活很舒服Superpowers 则更像一个共享写字楼里的开放工位桌子是公用的谁都能随时看到别人桌面上改了什么东西。它的核心卖点从来不是画面多强、物理多真而是打开浏览器就能开始做拉个人进来就能一起改。1.2 为什么值得花时间试它先说结论如果你是想做像素风 2D 小游戏、原型验证、教学演示Superpowers 非常值得一试。优势集中在三块。第一是真协作。它支持多人同时打开同一个项目光标、选中区域、代码改动都能实时同步这让我想起早年用 Google Docs 一起写文档的感觉。做 Game Jam 的时候一个人搭场景另一个人写角色控制脚本完全不会互相踩。第二是零环境折腾。客户端就是一个现代浏览器不管你是 Windows、macOS 还是 Linux只要服务端能跑剩下的活儿全在浏览器里完成。这对团队里用不同系统的人特别友好不用再纠结你用的编辑器我打不开这种问题。第三是技术栈干净。脚本统一用 TypeScript渲染部分被封装得很好你做 2D 游戏甚至不用直接碰 Pixi 的底层 API。对想深入学习渲染原理的人TypeScript 的类型提示反而能帮你把 Pixi 对象结构看得更清楚。1.3 同名项目太多先避坑搜索Superpowers的时候你会看到不少同名东西npm 上有一个做变异测试的superpowers包VS Code 市场里有叫 Superpowers 的快捷键增强插件还有一个 Chrome 扩展也叫这名字。要做游戏认准的是能打开服务端、在浏览器里编辑场景的那一套它的安装产物是一个提供了 Web 控制台的服务端程序而不是编辑器插件。怎么快速辨认很简单正主安装以后你需要在浏览器地址栏访问类似localhost:4237这样的地址看到的是一个深色主题、左侧有项目列表的网页界面。如果你装完得到的是一个命令行工具库或者编辑器侧边栏那多半装错了项目。2. 安装与启动从零到先把服务跑起来这块我踩的坑最多所以单独拿出来写细一点。先说结论官方推荐的方式是下载对应系统的安装包但我个人在 Windows 上遇到过一次安装包下载慢的问题后来直接用 Node.js 方式跑通了两种方法都讲一下。2.1 前置条件与版本选择不管用哪种方式安装服务端都需要 Node.js 环境。Superpowers 的服务端是 Node.js 写的这是确定的事但要注意版本兼容我最初装了当时最新的 Node 22结果启动时日志报了一个和旧版工具链相关的小问题切换到 Node 18 LTS 后一切正常。这类项目通常不会第一时间适配最新的大版本所以建议直接用 LTS 版本省心。浏览器方面Chrome、Edge、Firefox 的当前稳定版都支持老一点的浏览器比如 IE肯定不行因为编辑器界面依赖现代 Web 技术。不用装任何浏览器插件。2.2 安装的完整操作步骤如果走安装包路线流程是这样的去官方仓库的 Releases 页面下载对应系统的压缩包解压到一个固定目录双击启动脚本。Windows 上通常是一个.cmd或者带 GUI 的启动器macOS 和 Linux 上是通过终端执行启动命令。这里要注意解压目录一旦定下来就尽量不要挪动因为项目数据默认存放在服务端程序同级的目录里挪动会导致路径失效之前建的项目可能找不到。我实际用的是 npm 全局安装的方式操作如下# 先用 nvm 或 nvm-windows 切到 Node LTS 版本 nvm install 18 nvm use 18 # 全局安装 superpowers-launcher这里的包名以官方发布信息为准 npm install -g superpowers-launcher # 启动 superpowers首次启动会让服务端在一个目录里初始化数据默认会在当前用户目录下创建一个Superpowers文件夹里面存放项目配置、日志和后续所有项目的源文件。启动成功的标志是终端里出现类似Server running on port 4237的日志同时浏览器会自动打开如果没自动打开就手动访问http://localhost:4237。2.3 创建第一个项目的实际操作服务端跑起来之后浏览器界面会出现一个服务器管理页面。第一次进入需要创建一个管理员账号这个是用来管理本地项目和协作用户的相当于一个本地登录系统。创建完账号之后进入项目列表点击新建项目会让你填项目名称、选初始模板。模板有几种可选空的 2D 项目、空的 3D 项目以及带示例内容的演示项目。我是强烈建议新手选带示例的那个因为里面已经有角色、地板、脚本和 UI 元素你可以立刻开始改改完马上看到效果比从空项目一点点搭要有成就感得多。注意服务端每次开机都要手动启动如果你想设成开机自启Windows 上可以用任务计划程序创建一个开机启动任务指向你的启动脚本macOS 上可以用launchctl。不过我自己不建议这么做游戏项目服务器这种工具随用随开就行常驻后台只会白白占内存。3. 核心设计理念与原理拆解用过一段时间之后我对 Superpowers 的架构设计越来越佩服。很多看起来很理所应当的功能背后其实有不少值得品味的取舍。3.1 为什么要把编辑器放在浏览器里这是我最初最不理解的地方好好的桌面工具不做为什么偏要把编辑器塞进浏览器后来想明白了核心原因是协作。桌面应用做协作要么自己写网络层要么嵌入第三方框架成本很高而基于浏览器天然就有 WebSocket 和成熟的实时同步方案服务端就是权威数据源每个客户端只是视图。更妙的是这个设计让自己在哪台电脑上干活变得不重要。我在台式机上建了项目出门用笔记本打开同一个地址登录同一账号项目还在那里。配合局域网访问手机上都能打开编辑器查看运行效果——虽然手机编辑体验一般但用来跑一下看看完全够用。这个架构也带来了一个副作用服务端一停所有人都没法干活。所以千万不要在协作中途随便关终端窗口这是新手最容易犯的错误。3.2 场景、角色、脚本三者关系Superpowers 的项目结构里有几个核心概念最基础的是这三个。场景Scene是游戏世界的容器里面摆放着各种角色Actor。角色是场景里的实体可以是一个精灵图片、一个 3D 模型、一盏灯、一个空节点甚至一个 UI 面板。每个角色身上可以挂组件比如碰撞器、渲染器、自定义脚本。脚本Script是驱动游戏逻辑的核心。每个角色的脚本本质上是一个 TypeScript 类通过构造函数接收角色对象然后在生命周期方法里写逻辑。典型结构大概长这样class MovementScript extends Sup.ActorScript { constructor(actor: Sup.Actor) { super(actor); // 这个角色对象的引用后续所有逻辑都用它 this.actor actor; } update() { // 每帧调用 const pos this.actor.getPosition(); this.actor.setPosition(pos.x 0.1, pos.y, pos.z); // 或者用 Sup.Input 获取键盘状态控制方向 } }这套 API 风格和 Unity 的 MonoBehaviour 很像只是没有可视化拖拽所有组件挂接都写在代码里。对习惯面向对象写法的开发者来说上手速度很快。3.3 资源管线图片、音频和自动处理Superpowers 的资源管理也值得一提。把图片拖进资源面板它会自动生成可用的素材对象音频会有压缩、格式预览字体也做了内建支持。对于像素游戏最常用的 sprite sheet精灵图集它支持直接切割省下了我用外部工具切图的步骤。协作模式下每个人拖资源进来其他人立刻就能在资源面板里看到。这意味着美术同学一个人往项目里丢素材程序同学那边马上就能引用谁都不用传文件。我参与过一次小规模 Game Jam切图的人一边导出 PNG 一边往项目里拖代码这边实时就能做碰撞调试这种体验传统工作流很难复制。3.4 2D 与 3D 渲染的基本盘Superpowers 的底层渲染没有重新造轮子。2D 用的是 Pixi.js3D 用的是 Three.js。这两个库的成熟度都非常高社区生态庞大。Superpowers 做的事情是在它们上层封装了一层游戏对象模型让用户用统一的方式操作角色、组件和场景而不是直接面对渲染器的底层 API。换句话说如果是 2D 项目最终渲染走 Pixi 的 WebGL 管线3D 项目则走 Three.js 的 WebGLRenderer。浏览器不兼容 WebGL 的老机器会退回 Canvas 模式但功能会受限所以做 3D 项目时还是尽量用支持 WebGL 的现代设备。4. 实操记录做一个 5 分钟能跑的小 Demo纸上谈兵没意思下面是我今天实际从零做一个键盘控制方块跳跃小例子的完整记录。整个过程不到五分钟每一步我都把关键操作和原理写出来。4.1 搭场景与放角色创建项目时选择 2D 模板进入编辑器后先在场景面板右键新建场景命名Main。然后在资源面板新建一个Actor作为地板再新建一个Actor作为玩家方块。为了让玩家方块有颜色选中它之后在属性面板里添加一个 Sprite 组件新建一张纯色纹理比如白色小图然后把纹理指派给它。如果你想更省事也可以直接用内置的形状生成功能做一个矩形或圆形精灵属性面板里就能设置颜色、尺寸。这里有个细节Superpowers 里纹理和 Sprite 是两个概念纹理是图片数据Sprite 是渲染实例。一个纹理可以被多个 Sprite 引用所以背景地面和角色如果用同一张纹理只需在资源里建一次然后分别建两个 Sprite 组件指向它就行。4.2 写控制脚本选中玩家方块添加一个 Script 组件新建脚本命名为PlayerMovement然后双击脚本打开内置代码编辑器。核心逻辑如下class PlayerMovement extends Sup.ActorScript { speed: number 0.2; velocity: Sup.Math.Vector3 new Sup.Math.Vector3(0, 0, 0); constructor(actor: Sup.Actor) { super(actor); } update() { // Sup.Input 是内置输入管理器 if (Sup.Input.isKeyDown(left)) this.velocity.x -this.speed; else if (Sup.Input.isKeyDown(right)) this.velocity.x this.speed; else this.velocity.x 0; if (Sup.Input.isKeyDown(up) this.actor.getY() 0) { this.velocity.y 0.5; } // 简化版重力 this.velocity.y - 0.01; // 更新位置并且防止掉出屏幕 const pos this.actor.getPosition(); let newY pos.y this.velocity.y; if (newY 0) newY 0; this.actor.setPosition(pos.x this.velocity.x, newY, pos.z); } }写完脚本后不需要手动编译保存后回到场景编辑页面按上方的运行按钮一个受键盘控制的方块就出来了。按上下左右就能移动和跳跃落地判定我用了一个比较粗暴的办法y 轴小于 0 就归位到 0。如果你想做真正的跳上平台玩法需要给角色加 Box2D 物理组件这里只是演示基本逻辑。4.3 实时预览与导出的方式Superpowers 的预览方式很直接服务端把项目解析成一个网页应用在编辑器里点运行新标签页里就是可交互的游戏画面。这个页面可以直接分享给局域网内的其他人访问用来做真机测试或者给别人试玩都很方便。但要注意这个运行页面是依赖服务端的服务端停了页面也就打不开了。要真正发布成独立网页需要走构建导出流程在项目面板选择导出/发布选择目标平台为 WebSuperpowers 会生成一套静态文件里面是打包好的 HTML JS 资源。把这套文件扔到任意静态服务器Nginx、GitHub Pages、对象存储都行上任何人打开网址就能玩。实操心得导出前记得先把项目里所有未保存的脚本保存一遍否则导出产物可能是不完整状态。这个坑我踩过一次折腾半天才发现是脚本忘了保存导出的是旧版本逻辑。5. 常见问题与排查实录实际使用中总会遇到各种幺蛾子下面这些是我自己遇到过、或者在社区里常见的问题整理成速查表方便直接对照解决。问题现象可能原因处理办法浏览器访问localhost:4237打不开服务端没启动成功回到终端看日志确认端口是否被占用端口被占用服务起不来另一个程序占用了 4237换一个端口或者在系统设置里放行该端口编辑器卡顿、操作延迟浏览器硬件加速未开启在浏览器设置里开启硬件加速或换 Chrome 稳定版多人协作时对方看不到我的改动对方用了不同登录账号或未刷新确认在同一服务器、统一账号必要时刷新页面脚本报错但不影响运行代码运行时异常被忽略打开浏览器控制台看完整堆栈导出页面白屏静态目录放错层级把 index.html 放在根目录检查资源路径中文乱码编码不一致确保服务端和项目都使用 UTF-8不要用系统默认 ANSI5.1 服务端启动报错的排查思路最常见的就是 Node 版本问题。遇到启动日志里出现语法错误、找不到模块这类问题先检查 Node 大版本最好是切到 LTS。如果你用了 nvm就nvm ls看看当前版本如果没有 nvm直接去 Node 官网装 LTS 安装包。还有一种情况是杀毒软件或系统防火墙拦截了本地端口的监听。Windows 上出现过明明服务端日志显示启动成功但浏览器就是连不上的情况后来发现是防火墙弹窗被默认拒绝了。解决办法是在防火墙规则里允许 Node.js 接收本地回环连接或者在初次弹窗时选择允许。5.2 协作功能连不上的实战记录我带着一台笔记本和一台台式机测试多端协作台式机开服务端笔记本打算通过局域网 IP 访问。结果笔记本一直提示连接超时。排查过程给大家参考先ping主机 IP 确认网络通再在服务端所在机器上执行netstat -an | grep 4237确认端口监听状态最后发现是通信的 WebSocket 端口被安全软件拦了。把端口加入白名单后立刻连上。还遇到过一个更隐蔽的问题笔记本和台式机时间不同步导致某些基于时间戳的同步校验异常。虽然这个项目本身对这种问题容忍度较高但为了保证协作稳定各设备开启自动时间同步是个好习惯。5.3 性能与内存问题的避坑经验项目变大之后场景里角色一多浏览器编辑器可能会出现明显的掉帧。这时候先不要急着怪电脑试试把不用的角色从场景中临时隐藏或者把预览窗口的分辨率调低。资源面板里如果堆积了大量没使用的纹理也会占用显存和内存定期清理无用资源是个好习惯。导出成 Web 产品后如果包体很大多半是音频和纹理没有压缩。Superpowers 默认会对部分资源做压缩处理但导入原始素材时尽量用体积合理的格式图片用 PNG 或 WebP音频用 OGG 和 MP3 双格式做兼容。这样发布后用户加载速度快很多。6. 我的实操心得与后续扩展想法写到最后分享一点比较主观的东西。Superpowers 不是一个什么都能做的万能工具它有明确的能力边界适合 2D 像素风、原型验证、教学协作、Game Jam不适合做大型 3D 商业项目也替代不了重度引擎的生态。但如果你正好在它擅长的那条路上它会给你非常特别的体验。6.1 用了它以后我对协作开发的理解变了以前我做小游戏协作方式基本是各自分工、文件交换、冲突解决有了 Superpowers 之后边聊边改、眼睛看着对方改代码成为可能。它把游戏开发里最难的沟通成本问题给抹掉了一大截。虽然机制上它不是第一款做协作的引擎但它是把协作做得最轻的一个不需要额外账号体系、不需要自建服务器本地即可、不需要折腾 Netcode。这种轻量感让它特别适合小团队的教学和原型阶段。6.2 想继续深入可以扩展些什么如果你玩完基础功能想更进一步我建议按这几个方向探索一是自己写插件。Superpowers 提供了插件机制你可以扩展编辑器面板、添加新的资源类型甚至把自定义构建流程接进去。很多成熟的游戏模板比如俯视角 RPG 框架都是社区插件做出来的。二是研究它的事件系统和内置通信机制。除了每帧的 update它还有消息传递、异步工具等能力理解这些能让脚本结构更优雅避免把所有逻辑都堆在一个大类里。三是把它的导出流程接进自己的部署管线。我的做法是导出后用脚本自动压缩、上传到对象存储然后生成一个带版本号的分享链接。这样每次改完游戏团队拿到的是一个真实可分享的 URL而不是来我电脑上看一眼。最后再分享一个小技巧如果你打算长期用建议定时把整个项目数据目录复制一份做备份。因为这些数据是本地文件不存在什么云同步保证一旦磁盘出问题项目就真的没了。我自己的习惯是每次 Game Jam 结束后把整个工作目录打成 tar 包丢到移动硬盘里一年多下来攒了很多当时的源码和素材翻回去看还挺有意思的。