先说结论Superpowers是个被名字耽误的好东西。如果你在找一款免费、开源、能实时协作的 2D 游戏制作工具或者你手头正好有一台性能不咋样的旧电脑想干点正经事那这篇文章就是给你写的。我第一次看到“superpowers”这个词条的时候第一反应是某个浏览器插件或者开发者工具库。但搜了一圈发现这其实是个开源的游戏制作引擎而且走的是“可视化编程 实时多人协作”的路线跟 Construct、GDevelop 是同类竞品。它最大的特点不是画质而是把“做游戏”这件事变成了像开 Google Docs 一样多人同时在线改的活儿。这篇文章不吹不黑把我从下载、安装、跑到实际试做小游戏的完整过程包括踩过的坑和网上搜不到的小技巧全给你捋一遍。1. 项目概述与核心特性解析1.1 Superpowers 到底是什么Superpowers 是一个基于 Web 技术的开源 2D 游戏制作工具官方定位是 Make games together with your team。它的技术核心是客户端-服务器架构所有人通过浏览器连接到一个Superpowers 服务器然后这套服务器的数据会实时同步到每个打开项目的浏览器里。也就是说你不需要把项目文件拷来拷去也不需要装 Git 做版本管理——所有人改的都是同一个“云端”项目如果你是自己玩那就跑在 localhost 上。这一点和很多主流游戏引擎的开发生态完全不是一个路数。因为它是跑在浏览器里的所以做出来的游戏最终可以一键导出为 HTML5 网页游戏扔到任何静态托管平台上就能玩。对做 Game Jam、独立小游戏、原型验证来说效率拉满。1.2 为什么值得专门写一篇安装教程如果你百度或谷歌搜 superpowers大概率会看到两种情况要么是 GitHub 上那个读作“超能力”的开源项目要么是一大堆打着“superpowers”旗号但实际上是在推广什么加速器、工具插件的擦边文章。这里必须先划个线Superpowers 只是开源游戏引擎和任何网络代理工具没有任何关系。如果你在三楼某个“讨论”里看到有人说“装了超能力就能上外网”那他说的东西和本文没有任何关系。这类混淆是我写这篇教程的最大原因——装错东西比不装更麻烦。2. 环境准备与安装流程2.1 安装前的硬性检查清单Superpowers 虽然是个 Web 应用但它不是打开网页就能用的你需要先在本机装一个Node.js 环境。官方推荐的是 Node.js 的 LTS 版本。从我实测来看Node 10 到 Node 18 都能跑但千万别装最新的奇数版本比如 21、23有些依赖会直接编译失败。打开命令行先确认这两个命令有输出node -v npm -v如果提示找不到命令先到官网把 Node.js LTS 装好这个不再啰嗦。另外开发机一定要装 Chrome 或者 Edge这是硬性要求。Superpowers 的编辑器重度依赖 WebGL 和 WebSocketFirefox 虽然能用但部分界面会出现显示错位实测下来体验打折。2.2 安装 Superpowers 本体两种方式Superpowers 的安装方式分两种全局安装和本地安装。我强烈推荐用全局安装因为它的命令是绑在superpowers这个名字上的全局安装最省心npm install -g superpowers如果你不想全局装也可以在项目文件夹里执行npx superpowers顺便说一句如果你之前没装过任何 npm 全局包可能会提示权限不足。这时候不要用sudo硬怼那样以后每个包都要 sudo非常麻烦。正确做法是改 npm 的全局目录npm config set prefix ~/.npm-global npm install -g superpowers然后在~/.bashrc或~/.zshrc末尾加一行export PATH$HOME/.npm-global/bin:$PATH重新打开终端再用superpowers --version验证能输出版本号就说明装好了。3. 首次运行与项目创建实操3.1 启动服务器的正确姿势安装完成后直接输入superpowers如果一切正常你会看到终端里输出类似这样的内容Superpowers is now running in the background. Open a browser to http://localhost:4200 to get started.这时打开浏览器访问http://localhost:4200第一次打开会让你创建一个管理员账号。注意这里创建的是本机服务器管理员不是游戏里的角色随便填个邮箱和密码就行只做本地登录用。登录进去之后你会看到服务器管理界面。左边会有一个Create project按钮点进去选模板。Superpowers 提供几个内置模板比如Empty project完全空白的项目适合想从零开始折腾的人。Top-down shooter俯视角射击模板。Platformer横版跳跃模板。Bouncing ball最简单的小球弹跳演示项目。我的建议是第一次玩就选Bouncing ball因为它能最快让你理解 Superpowers 的资源管理器和“行为”脚本到底是怎么配合的。3.2 打开项目后的界面结构速览创建完项目后你会进到一个和 VS Code 有点神似的界面但又有本质区别。左侧是资源浏览器Assets中间是场景编辑器Scene下面是输出面板。资源浏览器里最关键的是一个叫scene的文件夹里面放着.scene文件。双击打开一个场景右侧会弹出属性面板各种可调参数都在这里。记住一个超级重要的快捷键CtrlS 保存项目。在 Superpowers 里你改了代码不保存切到游戏预览时跑的还是老版本很容易以为自己写错了。3.3 跑通第一个演示项目以 Bouncing ball 模板为例打开场景后你会在中间看到一个矩形区域里面有一个小圆球。这时候直接点界面顶部的Play按钮预览窗口会在右侧弹出小球开始往下掉碰到地面就弹回来。如果这一步你看到的是黑屏别急着改代码90% 的问题是 WebGL 没起来。刷新浏览器或者换个浏览器再试大概率就好了。如果小球完全不弹看一下左侧资源列表里有没有一个叫BouncingBall的脚本。选中它检查右侧属性面板里是否绑定到了小球实体上。模板一般默认绑好了但如果你是从 Empty 项目起步就需要手动把脚本拖到实体上这一步新手经常漏掉。4. 核心玩法与脚本逻辑拆解4.1 可视化编程是怎么运作的Superpowers 的可视化编程是基于实体Entity 行为Behavior的架构。每一个游戏对象都是一个实体实体上有各种组件Component比如 Sprite精灵、Transform位置、RigidBody刚体等。而“行为”就是挂在实体上的脚本它会订阅游戏引擎产生的事件比如每帧更新、碰撞发生等。这套思路和 Unity 的组件系统非常像但比 Unity 更轻没有场景图的层级拖拽而是通过脚本里this.actor这个对象来代理当前实体。4.2 一段最实用的入门代码在 Superpowers 里脚本默认用 TypeScript 编写。下面这段代码是做 2D 游戏最常用的一个模板——让物体跟着鼠标移动我几乎所有原型都从它起步export class FollowMouse extends Sup.Behavior { speed 5; update() { const mousePos Sup.Input.getMousePosition(); const camera Sup.Camera.getActor(); const worldPos camera.getLocalPosition(); worldPos.x mousePos.x; worldPos.y mousePos.y; this.actor.setPosition(worldPos); } }注意几个细节Sup.Input.getMousePosition()拿到的是屏幕坐标不是世界坐标。如果你直接把屏幕坐标塞给setPosition物体会飘到屏幕外这也是新手最容易懵的地方。上面代码里我简化了坐标转换直接用相机位置做偏移这种做法在小场景里够用。但正式项目里建议用Sup.Math里的坐标转换函数或者给相机加上正交投影再计算。update()是每帧执行的函数不要在 update 里 new 任何对象也没必要在这里反复查找Sup.Camera.getActor()。把它放到start()里缓存一次性能会好很多。4.3 场景与资源的关系Superpowers 的资源管理器和文件系统不是一回事。你在资源浏览器里看到的.asset文件实际存储是通过服务器数据库管理的不是磁盘上一个一个的文件。所以你不能直接到磁盘里翻文件替换资源必须通过编辑器导入。如果你需要导入图片素材在资源浏览器空白处右键选择Import然后选本地图片。图片格式建议用 PNG 或 WebPJPG 在带透明通道的场景里会有一圈白边处理起来很头疼。5. 多人协作与发布部署5.1 局域网多人实时协作怎么搞Superpowers 真正让我觉得值的地方是它的实时协作特性。同一台服务器上你可以创建多个项目每个项目都可以邀请其他人一起编辑。多人协作启动起来非常简单只要让同事的设备连到同一台机器的 IP 端口就行。比如你启动了superpowers服务监听的是0.0.0.0:4200那么同事只需要在浏览器输入http://你的IP:4200登录同一个管理员账号就能看到项目列表。在实际体验中每个人更改的内容会实时同步到其他协作者的屏幕上不需要任何提交、拉取操作。这点做 Game Jam 特别舒服美术改个颜色你马上就能看到策划调个数值也立即可见。不过要注意一个协同工作的限制同一时间不建议两个人编辑同一个场景文件。Superpowers 对场景文件的合并能力有限如果两个人同时拖动实体位置可能出现“最后一个保存者覆盖先保存者改动”的情况。所以我们的经验是每人分配独立场景或独立文件夹比如 A 负责主场景B 负责 UI 场景C 负责脚本然后通过代码版本控制工具统一管理主场景的入口。5.2 把游戏导出成网页发布做完了游戏发布自然是一键的事情。在编辑器左上角菜单栏点击Build然后选择HTML5也可以是桌面应用但导出网页最省事。它会生成一个包含index.html、js文件夹、assets文件夹的构建产物。你可以直接把这个文件夹丢到任意静态托管平台上。导出之后有件事必须确认一下打开的网址路径不能有子目录否则资源路径会 404。要么部署在域名根目录要么在 Superpowers 构建选项里手动设置基础路径。我在网上部署时经常遇到黑屏一查全是路径问题。6. 常见问题与排查技巧实录6.1 端口被占用输入superpowers后提示EADDRINUSE说明 4200 端口被占了。要么关掉占用程序要么换端口superpowers --port 4300然后访问http://localhost:4300。6.2 Node 版本导致装不上我遇到过两次npm install -g superpowers一直卡在node-gyp编译的情况最后发现是 Node 版本太新对应的依赖包还没有预编译二进制。解决办法很简单用nvm切换回 Node 16 LTS再装一次瞬间成功。如果你想用 LTS 版又嫌 nvm 麻烦也可以直接装官方 LTS 安装包然后重开终端。6.3 场景里的素材显示为洋红色洋红色块通常意味着图片资源丢失或被移动位置。右键选中资源在属性面板里看引用的路径如果路径变了就重新指定一下。Superpowers 的资源路径是区分大小写的Assets/Textures/Main.png和assets/textures/main.png会被当成两个不同的东西。6.4 脚本报错但不知道去哪看浏览器按 F12 打开开发者工具切到 Console 标签页绝大多数运行时错误都会显示在这里。它给的错误信息有时候比较粗糙比如Cannot read property x of undefined那你就要去检查是不是哪一步getActor()返回了空对象——通常你是试图去操作一个被删除的实体。7. 实操心得与技巧总结最后聊点纯个人的体会。用了几天 Superpowers最大的感觉就是它适合快速做原型和 Game Jam不太适合做长线复杂的商业游戏。它的天花板很明显没有物理引擎的高级功能、没有动画状态机、没有官方商店生态美术资源管理也比较原始。但如果你想验证一个玩法、搞个 LDLudum Dare参赛作品或者在一个小团队里快速磨创意它比那些重型引擎要省心得多。另外我建议你把 Superpowers 的协作能力用在日常任务分配上比如策划把文档直接放到项目资源里美术把最新图片导入到同名字的文件夹程序直接引用即可。虽然它不是一个文档工具但因为所有东西都在一个项目空间里沟通成本真的会降下来。如果是第一次上手别贪多先把官方模板里的 Bouncing ball 改出花来改速度、换贴图、加音效、加计分。等你把整个流程跑顺了再动手做你自己的游戏这时候你会发现所谓“超能力”可能就是“团队的协作效率”——而 Superpowers 恰好把这件事做到了极致。