最近好几个做独立游戏的朋友都在问同一个词superpowers。我一开始以为他们说的是某款超能力题材的新游戏直到有位朋友发来一张浏览器截图我才反应过来——他们问的是开源协作游戏开发工具 Superpowers一个真正能让你不装全家桶 IDE直接在浏览器里做 2D 和 3D 游戏的开源平台。这工具最适合谁适合想快速验证玩法原型的人、喜欢远程协作的小团队以及厌倦了 Unity 和 Godot 那种动辄几十 GB 工程和漫长加载的人。今天我就把从下载安装到跑通第一个项目的完整过程写明白包括我实际遇到的坑和排查方法。如果你正好搜到“想要安装 superpowers”这一篇基本上够用了。1. 先搞清楚 Superpowers 到底是什么1.1 一眼看穿它的定位Superpowers 本质上是一个自托管的 Web 游戏开发平台。下载回来的不是一个双击就写入注册表的安装器而是一个压缩包。你把压缩包解压运行里面的可执行文件它会启动一个本地服务然后浏览器会自动打开http://127.0.0.1:9800。你在浏览器里看到的那个页面就是完整的游戏编辑器。这个设计跟传统引擎有本质区别。Unity 要把编辑器装到本地项目文件和工程配置都绑在你自己的电脑上而 Superpowers 把编辑器和项目数据都放在服务器端浏览器只是充当显示和交互终端。也就是说谁启动了服务谁那台机器就是团队共享的“开发服务器”。其他成员不需要安装任何东西只要浏览器能访问那个 IP 和端口就能进入同一个项目操作。核心技术栈是 TypeScript 和 WebGL。底层渲染走浏览器脚本语言也是 TypeScript这一点对熟悉前端或者做过 Node.js 的人特别友好。你可以直接在一个继承Sup.Behavior的类里写游戏逻辑保存后立即生效不需要编译成原生程序。整个体验更像是在网页里写代码、拖场景、跑预览。1.2 为什么说它是“超级能力”名字叫 superpowers确实有点一语双关。一方面这是工具名另一方面它也确实给了小型开发者一个非常轻量的“超能力”。我对比过几个主流路子。Unity 适合正经项目但每次打开都要等很久而且多人协作往往要上 Plastic SCM 或者 Git LFS光配置版本控制就能劝退不少新人。Godot 很优秀但多人实时协作编辑场景这个事默认也不支持。Superpowers 不一样它的核心卖点就是实时协作类似 Google Docs 那种效果。两个人可以同时改一个场景一个调材质一个摆 Actor双方的修改都会实时同步到对方屏幕上。对做 Game Jam 或者极速原型验证来说这个能力太值钱了。我们以前做 48 小时游戏挑战最怕的就是队友改了场景但没提交其他人拉到旧版本。换成 Superpowers 之后大家分工同时动手谁做了什么改动一目了然。即便不搞协作自己一个人用也舒服换电脑不用装环境同一个项目目录拷过去启动即用。内置能力也算完整。2D、3D 渲染都有精灵、图集、瓦片地图、音频、物理、粒子效果这些常见模块都能找到。对于做小游戏、互动页面、教学演示来说它覆盖了大部分基础需求。2. 安装前的准备别急着双击 exe2.1 运行环境要求其实 Superpowers 对硬件要求低得不像一个游戏开发工具。只要你有台能跑现代浏览器的电脑基本都能跑。操作系统方面官方提供 Windows、Linux、macOS 三个平台的版本建议用 64 位系统。内存方面日常做小项目 4GB 就够用如果同时开一堆高清素材建议 8GB 以上。显卡不要求独立显卡但浏览器要支持 WebGL否则 3D 场景和某些渲染效果会直接黑屏。浏览器请尽量用 Chrome 或者 EdgeFirefox 也行但我实测下来 Chrome 对 WebGL 的兼容性最稳。不要在 IP 地址后面带错协议服务地址明确是http://而不是https://这一点后面排查问题会用到。磁盘空间不用太担心解压完也就几百兆比起现代引擎动辄上 GB 的体积轻太多了。2.2 下载安装包的正确姿势官网域名是superpowers.dev直接进 Download 页面。下载时一定要选对应系统的二进制包千万别点成Source code源码包。源码包也是可以运行的但需要自己装一堆依赖对普通用户来说就是给自己找麻烦。下载完成后强烈建议先校验一下哈希值。官网每个安装包旁边基本都给了 SHA256 校验值这是防止文件损坏和下载不完整的最直接方法。Windows 的 PowerShell 里执行Get-FileHash .\superpowers-*.zipLinux 或 macOS 终端里执行sha256sum superpowers-*.zip把输出值和官网显示的字符串对比一致就说明文件完整。我见过不少人下载到一半断网解压时报“文件损坏”浪费大量时间排查。如果你没有对校验和的经验直接从 Download 页复制粘贴校验值最稳妥。3. 一步步完成安装我的实操过程3.1 解压、运行、访问本地服务第一步是解压。这里有一个我自己踩过的坑解压路径不要放在带中文或者空格的文件夹里比如D:\游戏开发\super powers很容易出现莫名其妙的访问失败。推荐放在类似D:\dev\superpowers这种纯英文路径下。解压完成后进入目录。Windows 直接双击Superpowers.exe。Linux 用户在终端执行./Superpowers如果提示权限不足先执行chmod x SuperpowersmacOS 用户直接右键打开应用首次可能会遇到系统安全提示去“系统设置 - 隐私与安全性”里选择“仍要打开”即可。启动后你会看到终端窗口里输出一段日志然后浏览器自动访问 9800 端口。如果浏览器没弹出来手动输入http://127.0.0.1:9800/也一样。这里的关键点是那个终端窗口绝对不能关Service 是前台进程。你把它最小化可以关掉了本地服务也就停了。我当时刚用的时候经常误关还以为软件崩了后来顺手把解压目录扔到了任务栏固定区才改掉这个毛病。3.2 首次启动管理员账号和第一个项目第一次访问网页系统会引导你创建一个管理员账号。用户名和密码可以随便设置但一定要记住因为局域网其他人登录也要用这个账号体系。密码不要用太弱的虽然大部分场景是内网使用但万一你把端口映射到了公网弱密码就容易被人直接进来搞破坏。登录以后你会看到项目列表页面通常是空的。点新建项目填一个项目名比如my_first_game模板按默认选择。Superpowers 的默认模板已经包含一个基础场景方便你立刻看到东西在动。点击项目名称进入编辑器后安装基本就算成功了。看到编辑器界面后我建议你第一件事先点右上角的项目设置找到数据目录看一眼你的项目文件到底存在哪个位置。这个目录非常重要备份项目就是备份它换机器迁移也是拷它。4. 浏览器里的编辑器到底怎么用4.1 编辑器界面四个核心面板进入编辑器后不要慌它跟主流引擎的布局其实很像四块区域分别负责不同事情。左侧是资源树类似 Unity 的 Project 面板。这里管理 Sprite、场景、脚本、音频、模型等所有资源。资源是游戏开发的原材料场景里看到的每个物体背后一定有一个资源在支撑。中间最大的区域是场景编辑器用来摆放 Actor。你可以拖拽旋转缩放物体也可以直接在此观察场景效果。场景顶部有运行按钮按下后模拟游戏运行状态。右侧是属性检查器。选中任何一个 Actor右侧就会列出它的 Transform、SpriteRenderer、Script 等组件属性。比如你想让某个图片移动就在这里改坐标值想调透明度就在这里改 alpha。底部是控制台用来输出日志和报错。写 TypeScript 脚本时Sup.log(xxx)的内容会出现在这里。我的习惯是每次写完脚本先看底部有没有红字先解决编译错误再想逻辑问题。4.2 理解资源、场景、Actor 三者关系这个工具的核心概念其实只有三个资源、场景、Actor。资源是磁盘上的素材比如一张 PNG 图片导入后生成 Sprite 资源一段音频导入后生成 Audio 资源。场景是游戏世界的一个容器一个项目里可以有多个场景场景之间可以切换。Actor 是场景里的实体一个空 Actor 带一个 Transform 组件就有了位置、旋转、缩放属性。给 Actor 挂上 SpriteRenderer 组件并指定一个 Sprite 资源它就成了画面里的可见物体。写脚本也是同样的逻辑。你创建一个 Script 资源写好继承Sup.Behavior的类然后在场景里选中 Actor添加 Script 组件把脚本资源拖进去。这个 Actor 就被赋予了特殊行为。我推荐新手做一个练习先导入一张图片新建 Sprite 资源再新建场景把 Sprite 从资源面板拖进场景。看到画面中出现图片后再添加一个脚本让图片动起来。能完成这两步你对整个编辑器的运作逻辑就基本入门了。5. 写第一个脚本验证整个工具链没问题5.1 搭建一个能跑起来的 2D 场景验证安装有没有问题的最好方式不是看界面而是让一个 Actor 动起来。操作路径是这样的。先准备一张正方形图片尺寸建议是 512x512 的 PNG。在资源树里右键选择新建 Sprite然后双击新的 Sprite 资源在弹出的窗口里选择图片文件导入。导入后一个 Sprite 资源就创建好了。接着新建一个场景取名叫Main。双击打开Main场景在场景空白处右键新建 Actor命名为Player。保持Player选中状态在右侧属性检查器里点击 Add Component选择 SpriteRenderer再将刚才创建的 Sprite 资源拖到 Sprite 属性上。到这一步场景预览框里应该能看到你的图片了。如果看不见检查一下 Actor 的 Transform 里的坐标是否在合理范围不要跑到 (0, 0) 以后因为摄像机位置不对而看不见。5.2 给 Actor 加上 TypeScript 行为有了画面接下来就是让它动起来。在资源树里右键新建 Script命名为Motion双击打开代码编辑器。我用的示例代码很简单直接让 Actor 每个逻辑帧沿 X 轴移动一点class Motion extends Sup.Behavior { start() { Sup.log(脚本已启动); } update() { this.actor.position.x 0.01; Sup.log(this.actor.position.x); } }保存脚本后回到场景选中Player这个 ActorAdd Component 选择 Script把Motion脚本资源拖到这个组件上。点击顶部运行按钮你会看到下面两个现象预览画面里的图片在缓慢向右移动底部控制台不停输出坐标值。这两个现象同时出现说明安装、渲染、脚本执行、日志输出整个链路都是通的。如果这一步没问题那就不是安装环境的问题后面出问题都可以在项目代码里找原因。顺便提醒一句正常运行状态不要像我这串代码一样在update里写日志否则控制台会刷屏性能也受影响。我正式项目里解决不了的问题才会临时加日志解决完立刻删掉。5.3 构建导出把游戏变成网页Superpowers 导出的目标平台目前主要是 Web。顶部工具栏有一个 Build 按钮点开可以看到 Web 平台选项。选择后点击 Build工具会自动打包场景、脚本和资源生成一个包含 HTML、JavaScript、CSS 文件的目录。这个目录就是最终成品。你可以上传到 GitHub Pages、自己的服务器或者直接双击其中的 index.html 在浏览器里跑起来。对做小游戏分享来说这个流程特别爽因为省去了打包安装包、适配各种 App Store 的麻烦。我第一次构建完先在浏览器里打开生成文件确认游戏运行正常才算整个安装流程的完整闭环。如果你连 Build 出来的版本都跑得通那你的开发环境就彻底没有问题了。6. 多人协作Superpowers 的灵魂功能6.1 局域网实时协作的正确打开方式Superpowers 最吸引我的点就是它能像在线文档一样协作开发。默认情况下服务和数据都在启动者的机器上。要让别人加入你只需要做三件事第一保证所有人的电脑在同一局域网第二确保启动服务的电脑防火墙放行 9800 端口第三把启动者电脑的局域网 IP 发给队友。队友在浏览器里输入http://192.168.x.x:9800用你创建的用户账号登录就能看到同一个项目列表。点击同一个项目进入后大家就处在了同一个实时协作环境里。这时候你可以做一个测试让队友在场景里新建一个 Actor你自己在另一台电脑上观察几乎是瞬间就会出现在你的场景里。这种体验在传统工作流里很难得到它跳过了提交、拉取、合并的过程所有人的修改直接被合并进当前状态。6.2 协作时我踩过的具体坑协作功能好用但也不是没有代价。第一个问题是权限。默认情况下任何登录的人都能修改项目里的任何资源。如果团队里有新人手贱误删了主场景又没有备份那是真的欲哭无泪。我后来在项目设置里尽量收紧权限给参与协作的同学开普通权限只在需要的时候临时提升。千万不要全员管理员。第二个问题是同时编辑同一个脚本时的互相覆盖。Superpowers 对资源的实时同步做得很好但对代码文件的冲突策略没有 Git 那么成熟。两个人同时打开同一个脚本各自写各自的内容再保存后保存的人会覆盖先保存的人。我们的解决方法是脚本文件按功能拆分到足够小约定谁改哪个模块尽量避免同时修改同一行。配合语音工具讲清楚进度基本不会出乱子。第三个问题是不要手动碰项目数据目录里的内部文件。项目数据全部以二进制或内部格式存在数据目录里你在外部改文件名、删文件轻则项目打不开重则数据损坏。所有资源操作都应该在编辑器界面里完成。这一点我用过一次血泪教训后来再也没动过数据目录内部的指头。7. 常见问题排查实录7.1 双击没反应或者端口被占用Windows 用户最常遇到的是双击 EXE 没反应。多半是杀毒软件误拦或者解压文件不完整。遇到这种情况先不要急着重装重新解压一份到新的目录然后用管理员身份运行一次。如果看到终端日志里报端口错误说明 9800 端口被其他程序占用了。Windows 下用命令netstat -ano | findstr 9800看到占用进程的 PID然后在任务管理器里结束那个进程或者换一台机器启动。端口是 Superpowers 的生命线它不通浏览器就进不去编辑器。Linux 下如果启动后浏览器空白优先检查系统是不是缺少浏览器依赖。换用 Google Chrome 打开试试不要用老旧的 Firefox 版本。大部分空白问题都是 WebGL 没起来。7.2 页面能打开但场景加载非常慢项目里素材如果很多首次加载时浏览器会请求大量美术资源慢是正常的。Superpowers 会在本地建立缓存索引第二次进入同一个项目会快很多。如果一直卡在空白页不要反复刷新。看服务端终端窗口里的日志有没有报错或者资源加载失败。再检查浏览器开发者工具里的 Console 面板有大段红色报错就要针对性处理。最常见的原因是图片格式不被支持尽量用 PNG 或 JPG别用 WEBP 等特殊格式。7.3 队友在浏览器里打不开地址或者看不到你的项目先检查三件事。第一队友输入的是不是http://开头很多手快的人输成https://结果连不上。第二防火墙是否放行。Windows 用户可以在防火墙高级设置里新建入站规则端口选 TCP指定 9800然后允许连接。这一步做完基本就能通了。第三确认你给队友的 IP 是启动服务那台电脑的局域网 IP不是公网 IP也不是 127.0.0.1。127.0.0.1只能本机访问别人访问只会看到自己的电脑。如果是跨公网协作就需要在路由器上做端口映射把公网端口转发到内网机器的 9800。这个涉及路由器配置我建议没有经验的人先局域网内联机调试远程协作以后有需求再研究。我的个人经验是Superpowers 这种小体量工具最怕的不是功能不够用而是遇到问题时没有清晰的排查思路。绝大多数安装失败无非是路径不对、渠道不对、端口不通、浏览器不兼容这四类。把这四条背下来基本上能解决九成问题。最后再分享一个小技巧把项目的完整数据目录定期压缩备份。我每次做完一个功能就手动备份一次因为 Superpowers 不像传统引擎那样集成 Git 流程自己动手备份是最靠谱的。别嫌麻烦没了备份真出事的时候你会非常怀念那个多花的十分钟。 
长河君 · 2026/10/15 4:01:46 · 阅读 1.2k Superpowers：基于浏览器的开源协作游戏开发平台
最近好几个做独立游戏的朋友都在问同一个词superpowers。我一开始以为他们说的是某款超能力题材的新游戏直到有位朋友发来一张浏览器截图我才反应过来——他们问的是开源协作游戏开发工具 Superpowers一个真正能让你不装全家桶 IDE直接在浏览器里做 2D 和 3D 游戏的开源平台。这工具最适合谁适合想快速验证玩法原型的人、喜欢远程协作的小团队以及厌倦了 Unity 和 Godot 那种动辄几十 GB 工程和漫长加载的人。今天我就把从下载安装到跑通第一个项目的完整过程写明白包括我实际遇到的坑和排查方法。如果你正好搜到“想要安装 superpowers”这一篇基本上够用了。1. 先搞清楚 Superpowers 到底是什么1.1 一眼看穿它的定位Superpowers 本质上是一个自托管的 Web 游戏开发平台。下载回来的不是一个双击就写入注册表的安装器而是一个压缩包。你把压缩包解压运行里面的可执行文件它会启动一个本地服务然后浏览器会自动打开http://127.0.0.1:9800。你在浏览器里看到的那个页面就是完整的游戏编辑器。这个设计跟传统引擎有本质区别。Unity 要把编辑器装到本地项目文件和工程配置都绑在你自己的电脑上而 Superpowers 把编辑器和项目数据都放在服务器端浏览器只是充当显示和交互终端。也就是说谁启动了服务谁那台机器就是团队共享的“开发服务器”。其他成员不需要安装任何东西只要浏览器能访问那个 IP 和端口就能进入同一个项目操作。核心技术栈是 TypeScript 和 WebGL。底层渲染走浏览器脚本语言也是 TypeScript这一点对熟悉前端或者做过 Node.js 的人特别友好。你可以直接在一个继承Sup.Behavior的类里写游戏逻辑保存后立即生效不需要编译成原生程序。整个体验更像是在网页里写代码、拖场景、跑预览。1.2 为什么说它是“超级能力”名字叫 superpowers确实有点一语双关。一方面这是工具名另一方面它也确实给了小型开发者一个非常轻量的“超能力”。我对比过几个主流路子。Unity 适合正经项目但每次打开都要等很久而且多人协作往往要上 Plastic SCM 或者 Git LFS光配置版本控制就能劝退不少新人。Godot 很优秀但多人实时协作编辑场景这个事默认也不支持。Superpowers 不一样它的核心卖点就是实时协作类似 Google Docs 那种效果。两个人可以同时改一个场景一个调材质一个摆 Actor双方的修改都会实时同步到对方屏幕上。对做 Game Jam 或者极速原型验证来说这个能力太值钱了。我们以前做 48 小时游戏挑战最怕的就是队友改了场景但没提交其他人拉到旧版本。换成 Superpowers 之后大家分工同时动手谁做了什么改动一目了然。即便不搞协作自己一个人用也舒服换电脑不用装环境同一个项目目录拷过去启动即用。内置能力也算完整。2D、3D 渲染都有精灵、图集、瓦片地图、音频、物理、粒子效果这些常见模块都能找到。对于做小游戏、互动页面、教学演示来说它覆盖了大部分基础需求。2. 安装前的准备别急着双击 exe2.1 运行环境要求其实 Superpowers 对硬件要求低得不像一个游戏开发工具。只要你有台能跑现代浏览器的电脑基本都能跑。操作系统方面官方提供 Windows、Linux、macOS 三个平台的版本建议用 64 位系统。内存方面日常做小项目 4GB 就够用如果同时开一堆高清素材建议 8GB 以上。显卡不要求独立显卡但浏览器要支持 WebGL否则 3D 场景和某些渲染效果会直接黑屏。浏览器请尽量用 Chrome 或者 EdgeFirefox 也行但我实测下来 Chrome 对 WebGL 的兼容性最稳。不要在 IP 地址后面带错协议服务地址明确是http://而不是https://这一点后面排查问题会用到。磁盘空间不用太担心解压完也就几百兆比起现代引擎动辄上 GB 的体积轻太多了。2.2 下载安装包的正确姿势官网域名是superpowers.dev直接进 Download 页面。下载时一定要选对应系统的二进制包千万别点成Source code源码包。源码包也是可以运行的但需要自己装一堆依赖对普通用户来说就是给自己找麻烦。下载完成后强烈建议先校验一下哈希值。官网每个安装包旁边基本都给了 SHA256 校验值这是防止文件损坏和下载不完整的最直接方法。Windows 的 PowerShell 里执行Get-FileHash .\superpowers-*.zipLinux 或 macOS 终端里执行sha256sum superpowers-*.zip把输出值和官网显示的字符串对比一致就说明文件完整。我见过不少人下载到一半断网解压时报“文件损坏”浪费大量时间排查。如果你没有对校验和的经验直接从 Download 页复制粘贴校验值最稳妥。3. 一步步完成安装我的实操过程3.1 解压、运行、访问本地服务第一步是解压。这里有一个我自己踩过的坑解压路径不要放在带中文或者空格的文件夹里比如D:\游戏开发\super powers很容易出现莫名其妙的访问失败。推荐放在类似D:\dev\superpowers这种纯英文路径下。解压完成后进入目录。Windows 直接双击Superpowers.exe。Linux 用户在终端执行./Superpowers如果提示权限不足先执行chmod x SuperpowersmacOS 用户直接右键打开应用首次可能会遇到系统安全提示去“系统设置 - 隐私与安全性”里选择“仍要打开”即可。启动后你会看到终端窗口里输出一段日志然后浏览器自动访问 9800 端口。如果浏览器没弹出来手动输入http://127.0.0.1:9800/也一样。这里的关键点是那个终端窗口绝对不能关Service 是前台进程。你把它最小化可以关掉了本地服务也就停了。我当时刚用的时候经常误关还以为软件崩了后来顺手把解压目录扔到了任务栏固定区才改掉这个毛病。3.2 首次启动管理员账号和第一个项目第一次访问网页系统会引导你创建一个管理员账号。用户名和密码可以随便设置但一定要记住因为局域网其他人登录也要用这个账号体系。密码不要用太弱的虽然大部分场景是内网使用但万一你把端口映射到了公网弱密码就容易被人直接进来搞破坏。登录以后你会看到项目列表页面通常是空的。点新建项目填一个项目名比如my_first_game模板按默认选择。Superpowers 的默认模板已经包含一个基础场景方便你立刻看到东西在动。点击项目名称进入编辑器后安装基本就算成功了。看到编辑器界面后我建议你第一件事先点右上角的项目设置找到数据目录看一眼你的项目文件到底存在哪个位置。这个目录非常重要备份项目就是备份它换机器迁移也是拷它。4. 浏览器里的编辑器到底怎么用4.1 编辑器界面四个核心面板进入编辑器后不要慌它跟主流引擎的布局其实很像四块区域分别负责不同事情。左侧是资源树类似 Unity 的 Project 面板。这里管理 Sprite、场景、脚本、音频、模型等所有资源。资源是游戏开发的原材料场景里看到的每个物体背后一定有一个资源在支撑。中间最大的区域是场景编辑器用来摆放 Actor。你可以拖拽旋转缩放物体也可以直接在此观察场景效果。场景顶部有运行按钮按下后模拟游戏运行状态。右侧是属性检查器。选中任何一个 Actor右侧就会列出它的 Transform、SpriteRenderer、Script 等组件属性。比如你想让某个图片移动就在这里改坐标值想调透明度就在这里改 alpha。底部是控制台用来输出日志和报错。写 TypeScript 脚本时Sup.log(xxx)的内容会出现在这里。我的习惯是每次写完脚本先看底部有没有红字先解决编译错误再想逻辑问题。4.2 理解资源、场景、Actor 三者关系这个工具的核心概念其实只有三个资源、场景、Actor。资源是磁盘上的素材比如一张 PNG 图片导入后生成 Sprite 资源一段音频导入后生成 Audio 资源。场景是游戏世界的一个容器一个项目里可以有多个场景场景之间可以切换。Actor 是场景里的实体一个空 Actor 带一个 Transform 组件就有了位置、旋转、缩放属性。给 Actor 挂上 SpriteRenderer 组件并指定一个 Sprite 资源它就成了画面里的可见物体。写脚本也是同样的逻辑。你创建一个 Script 资源写好继承Sup.Behavior的类然后在场景里选中 Actor添加 Script 组件把脚本资源拖进去。这个 Actor 就被赋予了特殊行为。我推荐新手做一个练习先导入一张图片新建 Sprite 资源再新建场景把 Sprite 从资源面板拖进场景。看到画面中出现图片后再添加一个脚本让图片动起来。能完成这两步你对整个编辑器的运作逻辑就基本入门了。5. 写第一个脚本验证整个工具链没问题5.1 搭建一个能跑起来的 2D 场景验证安装有没有问题的最好方式不是看界面而是让一个 Actor 动起来。操作路径是这样的。先准备一张正方形图片尺寸建议是 512x512 的 PNG。在资源树里右键选择新建 Sprite然后双击新的 Sprite 资源在弹出的窗口里选择图片文件导入。导入后一个 Sprite 资源就创建好了。接着新建一个场景取名叫Main。双击打开Main场景在场景空白处右键新建 Actor命名为Player。保持Player选中状态在右侧属性检查器里点击 Add Component选择 SpriteRenderer再将刚才创建的 Sprite 资源拖到 Sprite 属性上。到这一步场景预览框里应该能看到你的图片了。如果看不见检查一下 Actor 的 Transform 里的坐标是否在合理范围不要跑到 (0, 0) 以后因为摄像机位置不对而看不见。5.2 给 Actor 加上 TypeScript 行为有了画面接下来就是让它动起来。在资源树里右键新建 Script命名为Motion双击打开代码编辑器。我用的示例代码很简单直接让 Actor 每个逻辑帧沿 X 轴移动一点class Motion extends Sup.Behavior { start() { Sup.log(脚本已启动); } update() { this.actor.position.x 0.01; Sup.log(this.actor.position.x); } }保存脚本后回到场景选中Player这个 ActorAdd Component 选择 Script把Motion脚本资源拖到这个组件上。点击顶部运行按钮你会看到下面两个现象预览画面里的图片在缓慢向右移动底部控制台不停输出坐标值。这两个现象同时出现说明安装、渲染、脚本执行、日志输出整个链路都是通的。如果这一步没问题那就不是安装环境的问题后面出问题都可以在项目代码里找原因。顺便提醒一句正常运行状态不要像我这串代码一样在update里写日志否则控制台会刷屏性能也受影响。我正式项目里解决不了的问题才会临时加日志解决完立刻删掉。5.3 构建导出把游戏变成网页Superpowers 导出的目标平台目前主要是 Web。顶部工具栏有一个 Build 按钮点开可以看到 Web 平台选项。选择后点击 Build工具会自动打包场景、脚本和资源生成一个包含 HTML、JavaScript、CSS 文件的目录。这个目录就是最终成品。你可以上传到 GitHub Pages、自己的服务器或者直接双击其中的 index.html 在浏览器里跑起来。对做小游戏分享来说这个流程特别爽因为省去了打包安装包、适配各种 App Store 的麻烦。我第一次构建完先在浏览器里打开生成文件确认游戏运行正常才算整个安装流程的完整闭环。如果你连 Build 出来的版本都跑得通那你的开发环境就彻底没有问题了。6. 多人协作Superpowers 的灵魂功能6.1 局域网实时协作的正确打开方式Superpowers 最吸引我的点就是它能像在线文档一样协作开发。默认情况下服务和数据都在启动者的机器上。要让别人加入你只需要做三件事第一保证所有人的电脑在同一局域网第二确保启动服务的电脑防火墙放行 9800 端口第三把启动者电脑的局域网 IP 发给队友。队友在浏览器里输入http://192.168.x.x:9800用你创建的用户账号登录就能看到同一个项目列表。点击同一个项目进入后大家就处在了同一个实时协作环境里。这时候你可以做一个测试让队友在场景里新建一个 Actor你自己在另一台电脑上观察几乎是瞬间就会出现在你的场景里。这种体验在传统工作流里很难得到它跳过了提交、拉取、合并的过程所有人的修改直接被合并进当前状态。6.2 协作时我踩过的具体坑协作功能好用但也不是没有代价。第一个问题是权限。默认情况下任何登录的人都能修改项目里的任何资源。如果团队里有新人手贱误删了主场景又没有备份那是真的欲哭无泪。我后来在项目设置里尽量收紧权限给参与协作的同学开普通权限只在需要的时候临时提升。千万不要全员管理员。第二个问题是同时编辑同一个脚本时的互相覆盖。Superpowers 对资源的实时同步做得很好但对代码文件的冲突策略没有 Git 那么成熟。两个人同时打开同一个脚本各自写各自的内容再保存后保存的人会覆盖先保存的人。我们的解决方法是脚本文件按功能拆分到足够小约定谁改哪个模块尽量避免同时修改同一行。配合语音工具讲清楚进度基本不会出乱子。第三个问题是不要手动碰项目数据目录里的内部文件。项目数据全部以二进制或内部格式存在数据目录里你在外部改文件名、删文件轻则项目打不开重则数据损坏。所有资源操作都应该在编辑器界面里完成。这一点我用过一次血泪教训后来再也没动过数据目录内部的指头。7. 常见问题排查实录7.1 双击没反应或者端口被占用Windows 用户最常遇到的是双击 EXE 没反应。多半是杀毒软件误拦或者解压文件不完整。遇到这种情况先不要急着重装重新解压一份到新的目录然后用管理员身份运行一次。如果看到终端日志里报端口错误说明 9800 端口被其他程序占用了。Windows 下用命令netstat -ano | findstr 9800看到占用进程的 PID然后在任务管理器里结束那个进程或者换一台机器启动。端口是 Superpowers 的生命线它不通浏览器就进不去编辑器。Linux 下如果启动后浏览器空白优先检查系统是不是缺少浏览器依赖。换用 Google Chrome 打开试试不要用老旧的 Firefox 版本。大部分空白问题都是 WebGL 没起来。7.2 页面能打开但场景加载非常慢项目里素材如果很多首次加载时浏览器会请求大量美术资源慢是正常的。Superpowers 会在本地建立缓存索引第二次进入同一个项目会快很多。如果一直卡在空白页不要反复刷新。看服务端终端窗口里的日志有没有报错或者资源加载失败。再检查浏览器开发者工具里的 Console 面板有大段红色报错就要针对性处理。最常见的原因是图片格式不被支持尽量用 PNG 或 JPG别用 WEBP 等特殊格式。7.3 队友在浏览器里打不开地址或者看不到你的项目先检查三件事。第一队友输入的是不是http://开头很多手快的人输成https://结果连不上。第二防火墙是否放行。Windows 用户可以在防火墙高级设置里新建入站规则端口选 TCP指定 9800然后允许连接。这一步做完基本就能通了。第三确认你给队友的 IP 是启动服务那台电脑的局域网 IP不是公网 IP也不是 127.0.0.1。127.0.0.1只能本机访问别人访问只会看到自己的电脑。如果是跨公网协作就需要在路由器上做端口映射把公网端口转发到内网机器的 9800。这个涉及路由器配置我建议没有经验的人先局域网内联机调试远程协作以后有需求再研究。我的个人经验是Superpowers 这种小体量工具最怕的不是功能不够用而是遇到问题时没有清晰的排查思路。绝大多数安装失败无非是路径不对、渠道不对、端口不通、浏览器不兼容这四类。把这四条背下来基本上能解决九成问题。最后再分享一个小技巧把项目的完整数据目录定期压缩备份。我每次做完一个功能就手动备份一次因为 Superpowers 不像传统引擎那样集成 Git 流程自己动手备份是最靠谱的。别嫌麻烦没了备份真出事的时候你会非常怀念那个多花的十分钟。