第一次在Game Jam现场看到别人用 Superpowers 做游戏时我第一反应是这不就是网页版 Scratch 吗直到后来我自己搭好环境、做出第一个能玩的 HTML5 小游戏才意识到这个项目的野心比想象中大得多。作为一个免费开源的游戏开发平台Superpowers 把编辑器直接做进了浏览器底层语言是 TypeScript还天然支持多人实时协作。如果你正打算做网页小游戏、带学生入门游戏开发或者想和两三个朋友远程盯同一个项目那这篇文章就是为你准备的。我会从环境准备、安装部署、写脚本、做动画、多人协作到最终发布完整走一遍并把我在实操中踩过的坑一并交代清楚。1. 先搞清楚 Superpowers 是什么1.1 一个长在浏览器里的游戏开发引擎Superpowers 本质上是一个“本地服务器 浏览器编辑器”的组合。你在自己电脑上跑起一个服务然后用 Chrome 或 Firefox 打开编辑器页面项目资源、场景、代码全都在这个网页界面里管理。这和传统游戏引擎的思维很不一样Unity、Godot 是下载一个巨大的桌面软件所有功能都塞在客户端里Superpowers 把编辑器放到了浏览器端发布时也不需要额外的桌面运行时游戏逻辑用 TypeScript 编写编译和运行都在本地 Node.js 环境里完成打个比方Superpowers 就像 Google Docs 和游戏引擎的混合体文档和数据存在远端其实是你本地的 workspace 目录但操作界面在网页里。你拖拽一个方块、改一段代码整个过程都被记录别人登录同一个服务器时也能实时看到你的操作。这里有个容易误解的点Superpowers 不是“在线网站帮你做游戏”那种云平台。它不需要你把项目上传到某个商业服务器所有东西都保留在本地。如果你愿意甚至可以把它部署到自己的云主机上做长期托管和远程协作。1.2 它与 Unity、Godot 有什么不一样很多刚接触 Superpowers 的同学会习惯性拿它和 Unity、Godot 对比。虽然三者都叫游戏引擎但定位差异很大。我做了一张简单对比维度SuperpowersGodotUnity编辑器形态浏览器内运行桌面客户端桌面客户端主要语言TypeScriptGDScript / C#C#2D/3D 支持2D 为主、3D 基础2D/3D 都强2D/3D 都强多人协作原生支持实时同步需要配合第三方方案需要配合第三方方案安装包体量很小几十兆几百兆几个 G目标平台HTML5 网页桌面 / 移动 / Web桌面 / 移动 / 主机价格免费开源免费开源个人免费商业有授权要求从表格能看出来Superpowers 的优势非常聚焦做 HTML5 网页游戏、强调快速上手、重视小团队协作。它不是一个要取代 Unity 的全能型引擎而是“网页游戏时代里的轻量创作工具”。如果你需要导出到 Steam、PlayStation 这些平台Superpowers 并不适合但如果你就想做一个能在浏览器里打开、发到 itch.io 上让别人直接玩的游戏这个流程会非常顺畅。我个人的建议是不要抱着“我要用它做 3A 大作”的心态来装 Superpowers。把它当作快速原型工具、教学工具、Game Jam 神器这样你对它的满意度会高很多。2. 安装前准备把环境盘明白2.1 Node.js 的版本选择Superpowers 的核心服务基于 Node.js所以装 Superpowers 之前先把 Node 环境搞定。这里我要多说一句不要随手装最新版 Node 就觉得自己没问题了。不同时期的 Superpowers 版本对 Node 的要求差别很大早期 2017 年左右的版本用 Node 6/8 很稳社区维护版本一般要求 Node 12 及以上如果你在启动时遇到进程秒退、报各种模块版本错误多半是 Node 版本和 Superpowers 不匹配我的建议是去官方 Release 页面看说明它一般会标注 recommended Node version。如果你同时需要维护老版本和新版本项目可以考虑安装 nvmNode Version Manager来切换不同版本的 Node这是 Windows / macOS / Linux 下都适用的方案。检查当前 Node 版本用这个命令node -v npm -vnpm 会随着 Node 一起安装不用单独处理。确认版本号能正常输出Node 环境就算准备好了。2.2 下载 Superpowers 的正确姿势Superpowers 有两个层级的仓库要搞清楚一个是核心引擎仓库包含服务器代码和编辑器前端一个是启动器launcher负责自动下载、更新引擎并启动服务在 GitHub 上搜索 “Superpowers” 时你会看到原版创始人仓库和社区维护仓库。我的建议是优先选择社区维护版本因为原版已经很久不更新了社区版本修复了一些现代系统上的兼容问题也支持更新的 Node 版本。下载时直接找 Releases 页面选择对应系统的压缩包。Windows 用户下载 zipmacOS 用户下载 dmg 或 tarLinux 用户一般用 tar 包。解压后你会得到一个目录里面有一个 app 脚本或 server 目录。这里有个非常实在的提醒把解压后的目录放到一个纯英文路径下比如D:\dev\superpowers。如果你放进D:\游戏开发\超能力\这种带中文的路径运行时很容易出现资源路径编码问题到时候你查半天都查不出来为什么编辑器白屏。2.3 目录与文件先认识一圈解压后Superpowers 的目录结构大致是这样superpowers/ ├── app.js // 服务器启动入口 ├── config.json // 服务器配置 ├── packages/ // 内置插件和依赖 ├── static/ // 编辑器前端静态文件 └── workspace/ // 你的项目数据存放目录第一次启动后Superpowers 会要求你选择一个工作区workspace目录这个目录就是所有游戏项目的“一切档”。场景文件、代码、图片音频素材、资源引用关系全部存在这里。你可以把它理解成一个独立的项目数据库目录后续做备份也好、迁移到别的电脑也好直接处理这个目录就行。如果你用的是新版启动器工作区的路径一般会在配置文件里自动生成或者首次启动时让你手动选。无论哪种方式我强烈建议你用一个专门目录比如D:\superpowers-workspace并且自己也清楚它到底在哪。因为我见过太多人用默认路径结果项目文件散落在系统盘里重装系统后全没了。3. 开始安装从启动到第一个项目3.1 启动服务与管理后台环境没问题之后启动服务非常简单。在解压目录下打开终端运行node app.js正常情况下终端会输出类似 “Server running on port 4237” 的信息。然后打开浏览器访问http://localhost:4237你就能看到 Superpowers 的首页。如果你是第一次启动页面会引导你设置管理员密码。这一步别跳过也别嫌麻烦随便设个 123456 这种弱密码在本地感觉无所谓但如果你之后要开放给团队成员远程访问弱密码就是裸奔。建议至少给个像样的密码。首页还有一个关键字段是 workspace 路径。你要提前想好项目存在哪然后在这里配置。配置完之后Superpowers 会自动创建好目录结构并在里面生成默认配置文件。这里要提醒两个小坑端口占用问题。如果你本地的 4237 端口被其他程序占用页面会打开失败终端里会报EADDRINUSE错误。这时你去配置里改端口即可或者在启动时用环境变量指定新端口。如果不会查占用Windows 用户可以用netstat -ano | findstr 4237看到占用进程 PID然后在任务管理器结束它。防火墙弹窗。第一次启动时 Windows 防火墙可能弹出提示问你是否允许 Node.js 通过防火墙。如果你只是本机使用点“取消”也没事但如果你马上要做局域网协作记得允许专用网络访问。3.2 创建项目并熟悉编辑器界面服务跑起来后首页上会有一个创建新项目的入口。给项目起一个能记住的名字比如MyFirstGame然后点确定。稍等几秒Superpowers 会进入编辑器主界面。第一次看到这个界面你会觉得它像 IDE 和场景编辑器的混血儿。界面主要分为四个区域左侧是资源和对象树所有图片、音频、场景、脚本都在这里中间是 3D/2D 场景视图用于摆放对象右侧是属性面板显示当前选中对象的设置和脚本组件底部或侧边是代码编辑区双击脚本在这里打开和传统引擎不同的是整个界面都是网页。你拖动窗口、切换工具、选中对象时操作非常流畅这是因为编辑器的交互层就在浏览器本地只有保存和同步的时候才和服务器通信。这种架构带来的体验很舒服改动是即时保存的基本上不存在“忘记保存导致几个小时工作白费”的情况。不过也要注意既然它是网页应用那浏览器崩溃、标签页被误关、电脑突然断电同样会导致未同步的数据丢失。虽然它设计上会尽量减少这种风险我依然建议你养成习惯每次结束工作前在编辑器里手动确认所有脚本都已保存一般按 CtrlS 保代码然后再关闭页面。这个时候你已经具备开始做游戏的全部条件了。下一节我们进入真正动手的环节。4. 核心实操写代码让游戏跑起来4.1 Actor、组件、行为理解 Superpowers 的对象模型Superpowers 的对象模型其实不复杂核心就是三个概念场景Scene一个游戏世界的容器相当于 Unity 里一个 LevelActor场景里的一个对象可以是一个方块、一个角色、一个空物体组件Component附加在 Actor 上的数据或行为比如渲染组件、碰撞组件、脚本组件写游戏逻辑时你写的脚本组件会挂在 Actor 上Superpowers 会在游戏运行时自动调用脚本里的方法。所有脚本必须继承Sup.Behavior这个基类并在类上标注Component()装饰器。一个最简单的脚本大概长这样Component() export default class HelloWorld extends Sup.Behavior { start() { console.log(游戏开始了); } update() { // 每一帧执行一次 } }start在组件被启用时调用一次update每帧调用一次。这个模式和 Unity 的Start/Update很像Unity 转过来的同学应该能快速进入状态。我这里要强调一个经验很多新人会把所有逻辑写在一个很大的脚本文件里一个脚本从头管到尾。这在 Superpowers 里不是不行但会很痛苦。更好的做法是让每个 Actor 自己管自己的事比如玩家控制脚本只管移动子弹脚本只管飞行和碰撞Boss 脚本只管状态切换。这种组件式写法也是 Superpowers 设计上希望你用的方式。4.2 让一个方块自动旋转第一个脚本实操我们先做一个最简单的效果在场景里放一个方块让它自动旋转。这个步骤能帮你完整走通“创建物体 - 挂脚本 - 运行游戏”的流程。第一步在中间场景视图里新建一个 Actor。你可以右键场景树选择新建 Actor默认会生成一个空物体。然后给这个 Actor 在右侧属性面板里添加一个渲染组件。Superpowers 内置了基础模型比如 Cube所以你不用自己准备美术资源直接选 Cube 就会在场景里显示一个立方体。第二步在资源面板里新建一个脚本命名为Rotator。双击打开代码编辑器写入如下代码Component() export default class Rotator extends Sup.Behavior { speed: number 60; update() { const dt Sup.Game.deltaTime; this.actor.rotateEuler(0, this.speed * dt, 0); } }这里我要说明一下Sup.Game.deltaTime的具体调用方式在不同版本里可能会有差别我自己用的是 2.x 版本是这样写的。如果你的编辑器里报错按下 F1 打开内置 API 文档搜索Game.deltaTime或者actor.rotateEuler很快就能找到对应用法。Superpowers 的优点之一就是内置文档做得很全几乎每个 API 都有示例。第三步选中场景里的 Cube 物体在属性面板中点击“添加组件”选择刚才写好的Rotator脚本。这个时候脚本就绑定到物体上了。第四步点击顶部工具栏的运行小圆钮游戏开始播放。你应该能看到方块在持续旋转。如果没反应按下 CtrlShiftP 之类的快捷键打开浏览器控制台看看有没有报错脚本绑定是否成功。这个流程看起来简单但是它是 Superpowers 全部工作的原型。之后你做的任何游戏功能本质上都是在这个基础上叠加复杂性。4.3 用键盘控制移动输入处理与场景切换接下来我们增加交互用方向键或 WASD 控制方块移动。这里会用到 Superpowers 的输入系统。Component() export default class Mover extends Sup.Behavior { speed: number 5; update() { const dt Sup.Game.deltaTime; const move new Sup.Math.Vector3(0, 0, 0); if (Sup.Input.isKeyDown(W)) { move.y this.speed * dt; } if (Sup.Input.isKeyDown(S)) { move.y - this.speed * dt; } if (Sup.Input.isKeyDown(A)) { move.x - this.speed * dt; } if (Sup.Input.isKeyDown(D)) { move.x this.speed * dt; } this.actor.move(move); } }写完之后把它挂到同一个 Actor 上再次运行。你按 W 的时候方块向上移动按 D 的时候向右移动方向感非常直觉。如果你想让角色朝某个方向“转过去”不要用move而是结合actor.lookAt或者手动设置欧拉角。另外游戏肯定不止一个场景。你可以在资源面板里新建多个场景然后用代码切换Sup.loadScene(MainMenu);只要传入场景名称即可Superpowers 会销毁当前场景、加载新场景并启动新场景中所有 Actor 的start。注意场景名是字符串必须和你的场景资源名称完全一致连大小写都不能错。到这里你已经具备了做一个简单小游戏的全部基础能力场景、物体、脚本、输入、旋转、移动、场景切换。再往下就是素材管理、碰撞检测、动画、UI 这些锦上添花的功能。你可以通过查阅内置文档逐步掌握接下来我重点聊聊天时最容易卡住的多人协作和维护问题。5. 多人协作与日常项目维护5.1 局域网协作怎么玩Superpowers 最让我喜欢的一点是多人协作是原生支持的不用装额外插件、不用配代码仓库同一台服务器上的多个用户可以直接同时编辑同一个项目。如果你和同事在同一个局域网你只要把本机 IP 告诉对方对方在浏览器里打开http://你的IP:4237登录你创建好的账号进入同一个项目即可。这个时候有意思的事情发生了你在场景里移动一个物体对方的编辑器里会同步看到移动过程你在写代码对方的界面上也能实时看到你敲的内容两个人都改了不同 Actor 的属性时互不干扰这种体验和 Google Docs 的多人协同几乎一样。我第一次和队友一起用一个项目做 Game Jam 的时候两个人一个负责场景布局、一个负责脚本逻辑效率比之前各自开发再合并高太多了。不过有个关键前提账号权限要设置好。在 Superpowers 的管理后台你可以创建多个用户并分配不同角色。建议不要让所有成员都用管理员账号操作否则有人误删场景、误改全局设置你很难追溯。5.2 公网访问与账号权限配置局域网协作能满足大多数小团队需求但如果你和队友不在同一网络就需要让 Superpowers 服务被公网访问到。这里我给一个最传统也最可控的方案把 Superpowers 部署到一台有公网 IP 的云服务器上。服务器上用 Node 正常运行app.js然后开放 4237 端口。你只需要在防火墙规则里放行这个端口其他人就能通过http://服务器IP:4237访问编辑器。但这会带来安全风险必须注意几点一定在首次启动时设置强密码不要用简单数字不要把管理员账号分享给所有人给队友单独开账号有条件的话用反向代理配置 HTTPS 访问避免明文密码在网络中传输如果服务器带宽比较小多人同时在线编辑可能会有点卡这是正常现象不要慌我不推荐大家随便把本地电脑暴露到公网除非你清楚知道自己在做什么。因为公网环境下的扫描攻击很频繁任何暴露在公网上的服务都可能成为靶子。如果你只是偶尔远程协作建议任务结束后就把端口防火墙关掉。5.3 项目备份与版本管理这部分内容看起来不炫酷但真的能救命。Superpowers 的 workspace 目录本质上就是所有项目文件的集合所以最简单粗暴的备份方式就是定期复制整个 workspace。但是“复制”这种方式的问题在于你只能备份最新状态没法回到昨天甚至上周的版本。所以更推荐的方式是把 workspace 接入版本控制工具。我自己通常这样做在 workspace 目录里初始化 git 仓库确保服务器和临时文件不纳入版本管理比如.gitignore里忽略缓存和临时文件每次完成一个重要功能或者每天结束工作前提交一次变更多人协作时如果每个人都连到同一台 Superpowers 服务器那 git 其实只是你备份的“快照”工具不承担多人协作的主要职能。但一旦有人在编辑器里误删了整个场景你还能从 git 历史里恢复回来这个价值是无价的。我再说一个自己的真实教训有一次我连续改了三个小时的游戏逻辑自我感觉很满意。结果第二天打开电脑发现 workspace 目录同步异常编辑器提示数据损坏。幸好我前一天晚上提交过一次 git 记录只损失了最后半小时的工作。从那以后我就养成习惯每次暂停工作前先提交一次。6. 发布游戏与常见问题排查6.1 导出 HTML5 并发布到网页平台当你觉得游戏能玩了下一步自然是发布。Superpowers 对 HTML5 游戏的支持非常友好你可以直接导出为一个可部署的静态网站。在编辑器顶部找到 Build 相关入口进入导出设置界面里面通常会让你配置游戏标题会显示在浏览器标签页上画布尺寸也就是游戏窗口的分辨率是否显示加载进度条图标和默认背景色填好之后点 BuildSuperpowers 会在你指定目录生成一个完整的静态站点一般包含index.html、JavaScript 逻辑文件、资源文件夹等。这里有个极易踩的坑很多人导出后用鼠标双击index.html本地打开结果发现一片空白或者资源加载不出来。这不是游戏写错了而是现代浏览器出于安全限制不允许网页通过file://协议跨目录加载各类资源。解决办法很简单把导出的文件夹丢到一个静态服务器里。你可以在命令行里运行cd your-game-folder npx serve .然后浏览器访问http://localhost:3000就能正常看到游戏。如果你想发布到 itch.io 这种平台操作也很顺把导出的整个文件夹压缩成 zip在 itch.io 项目设置里选择 HTML5 类型然后上传 zip。itch.io 会自动识别入口文件玩家直接在网页里就能玩这对 Game Jam 和作品展示是刚需。6.2 运行报错与性能问题排查清单我把自己遇到过的、以及身边朋友问过最多的问题整理成一个表格方便你直接对着排查问题现象常见原因处理方式启动服务时终端报EADDRINUSE4237 端口被占用用netstat -ano查找占用进程结束进程或换端口Node 版本过新导致启动报错版本不兼容用 nvm 切换到 release 推荐的 Node 版本浏览器打开编辑器白屏服务没起来或路径含中文查看终端输出把目录改到纯英文路径多人无法访问编辑器防火墙未放行端口防火墙入站规则中放行 TCP 4237游戏运行帧率不稳素材过大场景物体过多压缩图片控制粒子数量减少每帧运算量导出后本地打开无内容浏览器 file 协议限制使用本地静态服务器预览脚本组件没生效未挂载或脚本有编译错误检查浏览器 console 报错重新绑定组件6.3 我给新手的避坑清单最后再给新手朋友一份避坑清单这些都是在实际使用中一点点攒出来的经验不要把 Superpowers 装在中文路径里哪怕你觉得自己系统支持得很好也不要赌新建脚本后不要马上开写先看一遍内置文档对应的 APISuperpowers 的文档质量真的值得你花 10 分钟场景中的 Actor 命名要规范前期随便取名 “asdasd”后期找人会非常痛苦制作 2D 游戏时尽量保持贴图尺寸为 2 的幂如 256x256、512x512减少渲染性能问题定期提交 git 记录给自己保留后悔药如果团队协作给每个人都建立独立账号不要共用一个管理员账号导出前在浏览器里测试一遍尤其注意刷新后是否还能正常回到主界面老实说Superpowers 并不是一个完美无缺的引擎它有学习曲线有些 API 细节在不同版本间有差异3D 能力也比不上那些大型引擎。但它的轻量、免费、协作特性让它在我心中是一个特别适合游戏开发入门和小团队快速迭代的工具。我在实际使用中最深的感受是当一个项目能同时被几个人实时编辑那种“我们一起把一个东西从无到有做出来”的实时反馈感是其他引擎很难提供的。如果你正准备和伙伴开启新的小项目或者想尝试一把不依赖大引擎的网页游戏开发Superpowers 值得你花一个下午认真装一遍、玩一遍。