如果你搜“superpowers”大概率会看到超级英雄盘点、励志演讲甚至一些绕来绕去的工具教程。但我想聊的是另一个东西一个叫 Superpowers 的开源 HTML5 游戏制作工具。它是我近几年用过的、真正配得上“超能力”这个名字的创作工具——一个浏览器加一台共享服务器就能和伙伴实时编辑同一个游戏项目像一起写文档那样做游戏。这篇文章我把自己折腾安装、研究“技能skills”的引入方式、以及用它从零搭一个可联动小游戏的过程完整写出来给想入坑的朋友一份能直接照着做的参考。Superpowers 不是很大众圈内讨论也不多但它的设计思路非常独特所谓“安装 superpowers”本质上是获得一套轻量的、以 Web 技术栈为主的游戏制作能力而社区里常说的“那些 skills”则对应编辑器里可复用的行为脚本和资源模板。下面我从工具定位讲到项目实操尽量说人话。1. 先说清楚Superpowers 到底是个什么东西1.1 它解决什么问题Superpowers 是一个开源、免费、跨平台的游戏和互动内容创作工具官方定位是“不管你在哪只要能打开浏览器就能一起创作”。我第一次被它吸引是因为一个很现实的痛点团队协作做小游戏时传统引擎的工程文件太大版本合并又麻烦。Superpowers 把整个项目放在服务器上客户端通过浏览器或桌面程序连上去几个人同时编辑同一个场景这种体验非常接近多人协作文档。它的体积和门槛也比 Unity、Godot 这类引擎轻太多。没有庞大的安装包不用配复杂的构建链启动后就是一个网页编辑器。适合独立游戏开发者快速做 2D 原型也适合老师带着学生做课堂游戏项目甚至可以做互动叙事、虚拟展厅这类偏创意的内容。1.2 设计思路的巧妙之处从技术角度看Superpowers 采用的是“客户端-服务器”架构。服务器负责保存项目数据、广播协作消息客户端只负责渲染和交互。每个场景、脚本、资源都像数据库里的记录一样被版本化管理所以多人同时改动不会互相踩踏。这种设计直接带来三个好处协作零成本只要有服务器地址伙伴用浏览器就能加入不用安装任何客户端实时看到你的光标和你改的每一个属性。平台无感Windows、macOS、Linux 都能跑甚至平板设备的浏览器也能打开项目配置资源。天然可远程只要服务器部署在一台有公网地址的机器上你在办公室改两笔、回家接着改状态都在服务器里。我自己的体会是它的编辑器界面很像“游戏引擎版 Google Docs”。初次上手可能会觉得功能密度没有大引擎高但一旦进入“边改边跑、伙伴同时在看”的节奏那种协作效率是一般引擎很难给的。2. 安装与部署三条路径按需选择2.1 在线试水零安装体验最快体验 Superpowers 的方式是打开官网的在线演示入口。它会直接拉起一个浏览器编辑器你可以随便建场景、放方块、挂脚本跑通一遍流程。这个模式不用装任何东西适合第一次接触的人先感受一下“编辑器长什么样”“脚本改完会不会即时生效”。不过在线演示默认不保存你的长期项目数据随时可能被重置。所以认真做东西的话还是走下面两条路。2.2 桌面客户端单机使用的最省心方案如果你只是一个人做点小游戏手头又不想折腾命令行直接用桌面客户端最省心。去 GitHub Releases 页面下载对应系统的安装包Windows、macOS、Linux 都有装完打开客户端会自带一个本地服务器。你在 Hub 界面新建项目编辑器启动后会以浏览器标签页的方式工作但数据都存在本地。这个方案的优点是完全不需要懂 Node.js 或命令行适合纯新手和只想安心做内容的人。缺点是它的客户端本质上还是包了一个本地服务如果你想要伙伴远程协作就得回到自建服务器方案。2.3 自建服务器多人协作的正确打开方式想要真正“多人实时协作”我建议自建服务器。步骤如下# 1. 安装 Node.js建议 12 LTS 或更高 # 2. 全局安装 superpowers npm install -g superpowers # 3. 启动服务器 superpowers server启动后终端会输出本机访问地址默认端口是 4237。浏览器打开http://localhost:4237就能进入 Hub看到这台服务器上的所有项目面板。注意默认监听的是本机回环地址局域网内的伙伴可以通过你的局域网 IP 访问如果需要公网访问得在启动命令上绑定0.0.0.0并确保防火墙放行对应端口。提示绑定公网前一定要想清楚Superpowers 的账号体系比较轻量默认不设严格密码。如果服务器暴露到公网任何人都能创建项目。建议只在可信网络环境部署或者用内网隧道方案先做个访问控制。安装过程中最容易踩的坑是权限问题。如果npm install -g报EACCES错误要么给命令加sudo要么更推荐去修一下 npm 的全局目录权限避免以后每次都要提权。实测下来Node 版本太老也会导致客户端无法启动编辑器尽量保持 Node 版本不要太旧。3. “技能skills”到底指什么怎么引入3.1 先破除一个误解搜索“superpowers”的热门关键词里很多人问的是“有那些 skills”“怎么引入这些技能”。我一开始也以为是像装插件一样装一个技能包就能获得某种能力。实际用过之后才知道Superpowers 语境里的“技能”核心是三类东西行为脚本Behaviors、资源模板、以及完整的项目示例。它们共同构成了你可以复用的“技能库”。行为脚本用 TypeScript 写的类挂到场景里的 Actor 上就能让这个对象动起来、响应输入、播放动画。资源模板现成的图片、音频、模型、粒子效果直接拖进项目就能用。项目示例官方和社区发布的完整工程你可以下载下来像拆解玩具一样研究别人的场景设计和代码组织。3.2 内置技能全景开箱即用能做什么Superpowers 默认给了一套很实用的编辑器工具链我整理了一张表能力分类具体功能适合场景场景编辑2D/3D 混合场景、图层管理、相机控制搭建关卡、布置UIActor 系统对对象挂渲染器、脚本、物理组件一切游戏实体行为脚本TypeScript 实时编译、类型提示写交互、写玩法逻辑粒子系统GPU 粒子粒子数可很大特效、氛围表现音频支持 wav/ogg内置简单音效编辑器背景音乐、打击反馈芯片音乐内置 Chip 编辑器可做芯片音乐复古风音效Tween可以在编辑器里配补间动画UI 动画、简单物体的位移动画插件机制加载第三方编辑器扩展物理引擎增强等进阶需求这里面最值得提的是 Tween。很多引擎里做动画要写代码或拖动画曲线Superpowers 把 Tween 也做成了一种可视化资源你可以直接从编辑器创建补间动画不需要写一行代码就能让一个方块平移、旋转、缩放。对新手特别友好。3.3 引入外部技能的正确姿势如果从网上找到一个别人写好的 Behavior 脚本或整个项目引入方式基本是两种。第一种直接把.ts脚本放进项目的 Assets 面板。Superpowers 会自动把它纳入编译范围编译通过后这个脚本就会出现在右上角的“行为”选择列表里。你可以像给对象挂组件一样把它挂到任意 Actor 上。这一步不需要重启编辑器很符合“即时技能”的感觉。第二种从 GitHub 上克隆整个项目然后在自己的 Hub 面板里选择“打开项目”。Superpowers 的项目通常包含一个.superpowers文件夹和若干服务器数据你可以用官方导入功能把完整的场景、脚本、资源一次性地拉进你的服务器。我经常用这种方式拆解社区作品相当于直接把别人的“技能组合”拷贝过来站在肩膀上做修改。提示引入外部脚本后第一件事不是急着挂脚本而是看它的类名是不是和目标 Actor 需要的参数匹配。Behavior 可以通过编辑器暴露“速度”“攻击力”这类参数这些参数定义在类的 public 字段里。如果脚本没有 public 字段声明挂上去后你在编辑器里看不到任何可用参数这是很多新手误以为“脚本没生效”的最大原因。3.4 手写一个自定义技能最小示例自己写一个技能可能比找别人的更快。我强烈建议从一个小而完整的 Behavior 开始练手。下面是一个让 Actor 用 WASD 控制移动的脚本在项目内新建行为脚本后把类名写成PlayerMovement并挂到角色 Actor 上class PlayerMovement extends Sup.Behavior { speed 3; update() { const keyboard Sup.Input.getKeyboard(); let moveX 0; let moveY 0; if (keyboard.isKeyDown(W)) moveY 1; if (keyboard.isKeyDown(S)) moveY - 1; if (keyboard.isKeyDown(A)) moveX - 1; if (keyboard.isKeyDown(D)) moveX 1; const length Math.sqrt(moveX * moveX moveY * moveY); if (length 0) { moveX (moveX / length) * this.speed * Sup.Game.getDeltaTime(); moveY (moveY / length) * this.speed * Sup.Game.getDeltaTime(); this.actor.move(new Sup.Math.Vector2(moveX, moveY)); } } }解释几个关键点类必须继承Sup.BehaviorSuperpowers 才能在编辑器里把它识别成“可挂载行为”。update()是引擎每帧调用的方法主流游戏引擎都是这个套路有 Unity 经验的人会非常亲切。Sup.Input.getKeyboard()负责读取当前帧的键盘状态isKeyDown(W)在按键按住时返回 true。我刻意做了向量归一化处理这样斜向移动时不会比直向移动更快。这个细节很多人忽略实际做出来手感会差很多。保存脚本后编辑器会自动编译右侧属性面板如果没有报错你就能在 Actor 上添加这个 Behavior并且看到speed参数出现在面板里。想调移动速度直接改面板里的值就行连代码都不用碰。这种“改参数不动代码”的体验就是所谓“技能”的便利性所在。4. 实操一个协作项目双人移动小游戏4.1 项目设计思路光讲概念不落地总觉得差点意思。我带大家完整走一遍在自建服务器上从零做一个简单的双人竞技场原型。两个玩家分别用 WASD 和方向键控制自己的方块在场景里移动抢中央的能量球碰到的就得分。这个项目不大但能覆盖场景搭建、渲染器、行为脚本、协作开发这几个核心环节。整体设计上我会把“移动脚本”写成一个通用基础技能再生成两个不同参数的 Actor一个绑定 WASD 控制脚本一个绑定方向键控制脚本。这样演示了 Behavior 参数复用也符合“技能”的思路——写一次到处挂。4.2 创建项目和场景在 Hub 面板点击新建项目填入项目名进入编辑器。左侧是资源面板中间是场景视图右侧是选中对象的属性面板顶部有运行按钮和程序托管选项卡。先在资源面板新建一个场景命名 MainScene。双击新建的场景进入场景编辑状态。接下来创建几个地面和挡墙方块新建一个 Actor命名为 Ground。给它添加渲染器选择 SpriteRenderer2D 精灵渲染器指定一张纯色纹理。在属性面板里设置缩放让它成为一个长条形地板。再建几个小方块作为障碍物摆出简单的迷宫感。4.3 写两个不同输入模式的控制技能刚才那个PlayerMovement已经支持 WASD 了我复制一份改名PlayerMovementArrow把键盘判断改成方向键class PlayerMovementArrow extends Sup.Behavior { speed 3; update() { const keyboard Sup.Input.getKeyboard(); let moveX 0; let moveY 0; if (keyboard.isKeyDown(UP)) moveY 1; if (keyboard.isKeyDown(DOWN)) moveY - 1; if (keyboard.isKeyDown(LEFT)) moveX - 1; if (keyboard.isKeyDown(RIGHT)) moveX 1; const length Math.sqrt(moveX * moveX moveY * moveY); if (length 0) { moveX (moveX / length) * this.speed * Sup.Game.getDeltaTime(); moveY (moveY / length) * this.speed * Sup.Game.getDeltaTime(); this.actor.move(new Sup.Math.Vector2(moveX, moveY)); } } }然后创建两个角色 Actor名为 PlayerRed 和 PlayerBlue。给它们挂上对应的 Behavior并设置不同的坐标位置。渲染器方面选 SpriteRenderer用不同颜色的纹理区分。为了保证能看到完整的移动效果给场景加一个主相机把它对准场地中央。4.4 实时运行测试点编辑器顶部的运行按钮游戏会进入播放模式。你可以分别按 WASD 和方向键测试两个角色能否移动。如果发现角色移动方向和预期相反检查脚本里的坐标正负如果不移动优先看右侧属性面板是否已经添加 Behavior以及编辑器是否出现编译错误信息。我之前遇到过一类奇怪现象脚本明明保存了属性面板也能看到但运行时角色就是不动。后来发现是我把this.actor.move()写在了awake()里只执行一次角色在游戏第一帧就移了一下之后每帧都没有执行。移动逻辑必须放在update()中才会被持续调用。这是很典型的“生命周期方法用错”问题。4.5 多人协作把地址发给伙伴单机跑通后协作的优势就出来了。你把服务器地址告诉伙伴伙伴在浏览器打开在同一台服务器的 Hub 面板里看到你的项目点击打开就进入同一个场景了。屏幕上会出现伙伴的彩色光标他移动鼠标、选择对象、改属性你都能实时看到。协作中有两个特别爽的体验你改脚本的同时伙伴可以继续摆场景互不干扰。你保存脚本后编辑器会立即重新编译伙伴那边会自动看到最新效果不需要手动刷新页面。但也有个小教训多人同时修改同一个文本文件、比如同一个 Behavior 脚本时虽然系统不会直接崩但编辑内容可能会来回覆盖。建议约定好脚本代码一人负责场景布置可以多人同时动。类似于文档协作里“一个段落别挤两个人同时改”的规则。5. 常见问题与排查技巧实录5.1 问题速查表在实际使用中我统计过自己踩过的坑也看过不少社区和群里的提问整理成一张速查表现象原因解决办法npm install -g superpowers权限报错系统 npm 全局目录没有写权限用sudo安装或重新配置 npm 全局目录启动服务器后外部电脑打不开服务绑定了本机回环地址启动命令绑定0.0.0.0检查防火墙端口编辑器页面白屏/黑屏浏览器不支持 WebGL换新版本 Chrome/Edge更新显卡驱动脚本编译报 TS 类型错误类型引用不正、命名空间不存在看属性面板的报错信息核对类名和命名空间游戏运行时报“找不到 Actor”Sup.getActor里引用的名字拼错核对 Actor 的准确名字注意大小写Behavior 挂上后不生效逻辑写错生命周期或没有挂到正确 Actor检查 update 是否存在检查 Actor 层级多人改同一个脚本互相覆盖协作编辑冲突约定专人改脚本或先讨论再改5.2 新手最容易忽略的四个细节第一行为脚本的参数默认值要区分“面板当前值”。你在代码里把speed 3改成了speed 5场景里已经挂上去的旧实例并不会自动跟着变因为面板保存的是实例自己的参数快照。想全局生效要么手动改面板要么重新把 Behavior 拖上去。这个小机制很坑但理解了就很好办。第二项目备份别只靠服务器。虽然服务器保存了项目状态但在做重要项目时我强烈建议定期用项目面板里的导入导出功能把项目完整导出成一个文件存档。服务器又不是不会挂养成“导出本地备份”的习惯能救命。第三编辑器里对象的命名风格。中文字符作为 Actor 名字在多数版本里没问题但在某些老版本或第三方脚本的拼接逻辑里会出怪问题。我个人的习惯是全部用英文字母命名资源名、脚本名、Actor 名统一小驼峰省去很多意外。第四性能瓶颈往往出在粒子数量和实时阴影上。Superpowers 跑小型 2D 项目非常流畅但如果你在同一个场景里放了几万个粒子或者大量动态光源浏览器帧率还是会掉。先用任务管理器确认你运行项目的是独立显卡再在项目设置里调低粒子上限通常就能救回来。5.3 调试脚本的高效方法Superpowers 的编辑器本质上跑在浏览器里所以调试条件天然比桌面引擎好。运行游戏时按浏览器开发者工具的快捷键一般是 F12可以在控制台里看到 Superpowers 引擎输出的日志和错误信息。我写脚本的时候喜欢在关键分支补console.log()然后通过开发者工具观察每帧的值变化比单靠猜快得多。如果你把代码改出了问题编辑器会直接停止编译并在属性面板的顶部显示红色错误条。点击错误信息通常能精准定位到出错的行。这个反馈速度实际用起来比很多传统引擎的“编译-运行”循环都顺畅。收个尾我的实际感受和一个小技巧折腾 Superpowers 这一路的体会是它确实不适合替代 Unity 或 Godot 去搞重型商业项目它的场景是那些“想快速做个小游戏、想带团队协作出个原型、想给学生一个零门槛的理解工具”的时刻。它最打动我的不是单机功能有多强而是“实时协作创作”这个理念落地得极其扎实。我第一次和远在另一个城市的朋友一起在同一台服务器上改同一个场景时真的有种“我把超能力装进了浏览器”的爽感。最后分享一个实用小技巧如果你在项目里放了大量的角色和逻辑想快速看清哪些 Actor 挂载了同一个 Behavior直接在场景视图里按 Actor 名字排序然后看右侧属性面板的行为列表就好。如果你想再做深入一点我会建议把移动逻辑、攻击逻辑、动画逻辑全部拆成独立的 Behavior一个 Actor 挂多个 Behavior互相之间通过公共字段通信。这种组件化写法才是 Superpowers 这套“技能”机制最值得玩味的地方。希望这篇内容能帮你在自己的项目里少走几步弯路。