Superpowers：开源HTML5游戏编辑器，浏览器内完成2D游戏与多人协作

如果你最近在开发者社区里看到 superpowers 这个关键词被反复提起别急着把它往“超级英雄”的方向联想。这里说的 Superpowers是一款实打实的开源 HTML5 游戏创作工具——它让你直接在浏览器里完成 2D 游戏的场景搭建、逻辑编写和实时协作从原型到可玩版本的过程非常顺滑而且对独立开发者、教学场景和小型团队都相当友好。我最初接触它是因为一个独立游戏项目需要在两周内快速出交互原型试了一圈主流引擎之后反而被这个“非主流选手”留住了。这篇文章不打算写成官方文档的中文翻译版而是把我从安装、部署、写脚本到多人协作踩过的坑、验证过的流程完整地整理出来。不管你是想用 Superpowers 做一个小游戏练手还是打算把它作为一个可自托管的团队创作工具这篇文章都能让你少走不少弯路。1. 扒一扒 Superpowers 的底细它凭什么敢叫“超能力”1.1 它不是游戏模板而是一套完整的创作环境很多人第一次搜到 superpowers 时会误以为它是一个“技能包”或者“特效库”装上之后游戏素材就能一键变强。实际上完全不是这么回事。Superpowers 是一个开放源代码的游戏开发编辑器它的核心是用可视化场景编辑器加 TypeScript 脚本来完成整个游戏创作流程。你可以理解为一个“在线版 GameMaker 代码编辑器”的结合体。项目本体使用 TypeScript 和 Web 技术栈构建支持 2D 和 3D 游戏创作但社区里的实际作品绝大多数集中在 2D 像素风和小体量休闲游戏上。最有意思的是它的协作基因从一开始就不是单人工具而是设计成“像多人协作编辑文档一样做游戏”的创作环境。这一点在同类开源引擎里非常少见。1.2 与主流引擎的定位差异不是对标是补充为了让大家更直观地理解它在工具链里的位置我画个简单的对比工具定位核心脚本语言多人实时协作自托管上手难度Unity全平台商业引擎C#需要第三方方案不支持高Godot全功能开源引擎GDScript/C#有限支持中高Construct 32D 可视化游戏工具事件表/JS云项目不支持低Superpowers协作式 HTML5 游戏编辑器TypeScript内置支持中低用“编辑器”而不是“引擎”来称呼它可能更准确。它并不追求照片级渲染、复杂物理系统或者资源管线而是把所有高频操作压缩到极简拖一个精灵到场景里挂一段脚本点运行马上看到结果。对于快速验证玩法、做教学演示、以及小团队在线头脑风暴式的开发这个定位恰好补上了主流引擎的空白。1.3 为什么选择 TypeScript而不是 Lua 或者 GDScriptSuperpowers 的脚本层直接建立在 TypeScript 之上这意味着你不用学习一门“专用的游戏脚本语言”。如果你以前写过任何 JavaScript / TypeScript几乎可以零成本进入。更关键的是TypeScript 的静态类型系统和编辑器内置的代码补全、类型检查在浏览器编辑器里体验非常接近 VS Code。我实际写下来最大的感受是这种选择降低了“环境分裂感”。场景编辑在浏览器里完成脚本也用浏览器编辑器写发布导出后还是面向浏览器的产物。整个链路从输入到输出都在同一套 Web 技术栈里闭环心智负担很小。2. 安装之前必须想清楚的几件事2.1 桌面客户端还是自托管服务器Superpowers 的官方发行包分为两类一类是打包好的桌面客户端基于 Electron适合个人单机使用另一类是纯服务端版本可以部署到自己的云服务器上团队成员通过浏览器访问。我的建议是自己一个人快速体验用桌面客户端装完双击启动最省事。打算长期做项目、或者有 2 到 5 人协作需求直接上自托管版本收益远大于成本。用于课程教学或工作坊自托管版本更好它能让你统一分发地址学生不用各自安装环境。2.2 安装依赖与版本选择无论哪种方式只要走源码安装或 npm 全局安装都需要预先装好 Node.js。我建议 Node.js 使用 LTS 版本因为项目的依赖链相对传统太新的 Node 偶尔会出现原生模块编译问题。除此之外没有任何强制依赖不装数据库、不装 Redis这点非常友好。如果你下载的是官方桌面安装包双击安装就行Windows、macOS、Linux 都有对应版本。唯一需要注意的是 macOS 首次打开时可能因为签名问题被 Gatekeeper 拦下需要在“系统设置-隐私与安全性”里手动允许。2.3 两种主流安装方式实操步骤方式一npm 全局安装打开终端执行npm install -g superpowers安装完成后直接运行superpowers服务启动后终端会打印出访问地址。默认情况下是http://localhost:4237用浏览器打开这个地址就能看到项目管理界面。这种方式最适合想快速尝试的人。方式二Git 拉取源码自托管如果你想部署到团队服务器建议用这种方式git clone https://github.com/superpowers/superpowers.git cd superpowers npm install npm start这样做的好处是后续升级直接git pull再重启即可。由于代码完全在你手里你还可以自由定制登录逻辑、端口、访问控制等行为。2.4 第一次启动后该做什么打开浏览器进入编辑器首页后会看到一个空的项目列表。第一次使用需要创建一个项目模板选择这里我强烈建议新手选“2D”模板。项目创建完成后编辑器会自动打开主界面。主界面分为几块顶部是场景层级树中间是可视化场景视图右侧是属性检查器底部是资源浏览器和脚本编辑器面板。不要被这个布局吓到你只需要记住一个核心操作流在资源区新建素材拖到场景视图选中物体后在属性面板调整参数需要逻辑时挂脚本。到这一步你的 Superpowers 环境就算真正跑起来了。接下来就是实操环节。3. 从零做出第一个可玩的 2D 小游戏3.1 场景搭建地图、角色与碰撞区域我以一个最简单的“键盘控制角色移动并收集星星”的小游戏为例带你完整走一遍。这个例子几乎覆盖了日常开发会用到的核心功能。先创建场景。如果你用的是 2D 模板打开后场景里会有一个默认的 Main Camera。首先要把摄像机设置好在“场景树”里选中 Main Camera在属性面板找到“正投影”相关设置2D 游戏通常不做透视用正投影更合适。我这里把正交投影缩放调成合适的大小确保场景视口里能看到完整的游戏区域。接下来新建一个 Sprite。操作流程是在下方的资源浏览器区域右键选择“新建素材”类型选“Sprite”然后从素材库中导入一个角色图片。Superpowers 自带的资源插件提供了一批可用的基础素材如果没有合适的人形角色你也可以先用一个简单的色块图片代替后面再替换。将 Sprite 拖入场景视图后它就出现在场景层级里了此时按住 Shift 拖动可以平移整个场景右键拖拽可以旋转视角在 2D 模式下意义不大我一般只用来切换视图角度。碰撞区域这里要注意一个细节新建一个 Sprite 后它默认是不带物理碰撞体的。我们需要在其“属性检查器”里找到“添加组件”按钮然后选择 2D 物理中的“矩形碰撞体”这样才能让角色与地图边界、障碍物产生碰撞反馈。组件加完之后如果你的角色图片有透明边距需要手动微调碰撞体的尺寸和偏移否则会出现角色“还没到障碍物就被挡住”的古怪手感。3.2 写第一段 TypeScript 脚本键盘控制角色移动Superpowers 中所有逻辑都是通过脚本组件挂载到 Actor场景对象上的。先在资源区右键新建一个脚本文件命名为 PlayerBehavior双击打开编辑器输入以下内容class PlayerBehavior extends Sup.Behavior { speed 0.15; update() { let moveX 0; let moveY 0; if (Sup.Input.isKeyDown(LEFT)) moveX - 1; if (Sup.Input.isKeyDown(RIGHT)) moveX 1; if (Sup.Input.isKeyDown(UP)) moveY 1; if (Sup.Input.isKeyDown(DOWN)) moveY - 1; // normalize 避免斜向移动速度变快 if (moveX ! 0 || moveY ! 0) { const length Math.sqrt(moveX * moveX moveY * moveY); moveX (moveX / length) * this.speed; moveY (moveY / length) * this.speed; } this.actor.moveX(moveX); this.actor.moveY(moveY); } } Sup.registerBehavior(PlayerBehavior);写完之后回到场景树选中角色对象在属性面板的“组件”区域点“添加组件”选择刚才这个脚本组件。保存一下当前项目Superpowers 的快捷键是 Ctrl/Cmd S然后点击顶部工具栏的“运行游戏”按钮浏览器会打开一个新的预览页。这时候你用方向键就能看到角色在场景里移动了。这里我单独解释一下 normalize归一化这件事。如果只是简单地把speed速度分别加到 X 和 Y 轴上斜向移动的速度会等于水平移动的 1.4 倍左右角色跑起来“发飘”。这个细节在几乎所有 2D 引擎里都会遇到Superpowers 因为把 API 暴露得很直接反而好处理——用勾股定理归一化一下方向向量是标准做法。3.3 让角色收集物体并触发反馈收集逻辑本质上就是检查两个 Actor 是否碰撞。Superpowers 提供了简单的触发区域接口在星星的碰撞体组件勾选“传感器 Trigger”之后脚本里就能收到进入事件。我在星星对象上挂这样一个脚本class StarBehavior extends Sup.Behavior { start() { this.actor.setVisible(true); } onTriggerEnter(other: Sup.Actor) { if (other.getName() Player) { this.actor.destroy(); // 这里可以播放音效、加分、更新 UI } } } Sup.registerBehavior(StarBehavior);需要留意的是碰撞双方必须至少有一个对象带 Rigidbody刚体并且传感器标识设置正确onTriggerEnter才会稳定触发。如果发现事件不触发优先检查物理组件的“传感器”属性和层Layer设置这是我在实践中遇到的最频繁的乌龙。3.4 运行、调试与游戏视角控制预览模式虽然方便但每次修改代码后都要重新运行调试体验一般。我更推荐在工作原理里直接调整把“场景视图”和“运行预览”分屏并排改完脚本后保存切回预览页刷新迭代速度会快很多。Superpowers 的脚本错误会在预览窗口底部显示红字提示但有些类型错误只会在编辑器编译时报出所以写完脚本要留意右下角的编译信息栏有报错先解决再运行。对于更复杂的游戏我会把摄像机做成一个独立 Actor并在逻辑里让摄像机跟随玩家。做法很简单在update中把摄像机位置设置到玩家坐标上再叠加一个屏幕边界偏移量。这样场景的“可见范围”就完全由你控制不必依赖编辑器里的静态摄像机。4. 多人实时协作像写文档一样做游戏4.1 协作机制的工作原理Superpowers 的实时协作能力基于 WebSocket 同步。项目状态保存在服务端每个客户端修改场景、资产、脚本时都会生成增量操作指令发送到服务端再由服务端广播给同一项目的其他客户端。也就是说项目文件不是以整个文件覆盖的方式同步而是以“操作日志”的方式同步。这个机制非常像协同文档好处是多人同时编辑同一个场景时不会互相覆盖冲突概率大幅降低。实际体验下来两个人同时编辑脚本文件是可行的一个人改类名另一个人改方法体编辑器会逐字节合并。但如果两个人同时修改同一个文件的同一行后保存的人会看到版本冲突提示需要用“解决冲突”功能手动合并。不过这种场景在实际开发里很少出现大部分时候我们是一个人在场景编辑器里摆物体另一个人负责写逻辑互不干扰。4.2 创建协作服务器并邀请成员如果你走的是源码自托管路线项目管理后台里会有“服务器配置”面板可以设置项目名称、项目密码、最大在线人数等。成员连接时在浏览器地址栏输入你的服务器地址进入项目列表后点击目标项目输入密码即可加入。这个流程比我自己预想的简单甚至不需要注册账号体系非常适合临时小组和教学环境。有一点要提醒官方默认配置里项目列表是公开可见的只是加入项目需要密码。如果你不想让别人看到项目列表需要在服务器配置里把“列出项目”关闭或者设置一个完全独立的根项目入口。如果部署在公网这块务必处理一下不要图省事。4.3 自托管端口与安全配置建议自托管时默认监听端口是 4237。如果直接裸奔在服务器上我建议至少做三件事一是用 Nginx 做反向代理将 80/443 端口转发到内部 127.0.0.1:4237二是配置 HTTPS 证书因为浏览器在访问没有证书的服务时可能会因为 WebSocket 加密策略问题出现连接失败三是设置 IP 白名单或防火墙规则限制可访问的网段。Nginx 的配置大致是这样你把域名和证书路径换成自己的即可server { listen 443 ssl; server_name your-domain.com; ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem; location / { proxy_pass http://127.0.0.1:4237; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; } }注意那个Upgrade头WebSocket 连接能否穿透反向代理全靠它。漏了这段配置协作功能会时好时坏典型表现是“进入项目后几秒钟就掉线”。5. 真实项目中的踩坑记录与排查速查表5.1 安装与启动阶段的高频问题现象原因解决方案运行superpowers报找不到命令npm 全局目录不在 PATH 中执行npm bin -g查看全局路径将其加入 PATH启动后浏览器访问 localhost:4237 卡住首次启动正在初始化数据库文件和素材库等待约 10 秒刷新页面;如果长期卡住则检查磁盘权限端口被占用其他进程占用 4237修改启动参数或杀掉占用进程协作连接几秒后断开反向代理未配置 WebSocket 头补上proxy_set_header Upgrade配置预览页面脚本运行时报Cannot read property脚本组件未正确挂载到 Actor回到场景树检查组件挂载对象和脚本编译报错5.2 资源导入与素材管理的实战经验很多人会尝试直接把自己找的 PNG 图片拖进资源面板。Superpowers 对图片导入支持得不错但有几个注意点首先是图片尺寸虽然引擎能缩放显示但纹理存储和渲染实际是按原始尺寸来的一张 4096 像素的插画被缩放成 64 像素显示会造成多余显存占用。建议导入前把资源按实际用途切好尺寸素材命名也统一用小写字母加下划线。其次是素材分类。我从一个项目里总结出来的习惯是根目录下分 scenes、sprites、scripts、audio 四个文件夹每个场景文件、素材、脚本各归其位。刚开始不觉得这有什么必要等游戏做到十几个场景、上百个脚本文件时有个清晰的目录结构能节省大量搜索时间。Superpowers 的资源面板没有“全局搜索”功能如果文件全堆在根目录找起来真的会想砸键盘。5.3 渲染性能与像素风优化心得2D 游戏项目做到中等规模最常见的性能瓶颈来自过多的高分辨率贴图和透明的重叠绘制。我的优化顺序很简单先检查场景中有没有非必要的超大贴图再把不需要参与物理计算的碰撞体移除最后检查同屏粒子数量。Superpowers 自带的性能监视面板运行预览时按快捷键可打开统计信息可以实时查看绘制调用数如果这个数字偏高优先合并同图集的素材。像素风游戏还有一个特有坑摄像机缩放如果不设置为整数倍画面会出现像素抖动或模糊。我在项目里把所有缩放值强制设为 1、2、3 这样的整数同时把贴图的“过滤模式”设置为“最近邻”最终画面才呈现出干净利落的像素颗粒感。5.4 团队流程中值得养成的几个习惯如果你真的带人用 Superpowers 协作做项目我建议约定几条简单的规矩每个人负责一个独立场景文件避免多人长期停留在同一个场景里。脚本文件的添加和重命名统一由一个人操作其他人只改代码内容减少文件合并冲突。每次工作结束前在项目管理页面复制一份项目备份。Superpowers 支持项目导出为压缩包这一步成本极低但关键时刻能救命。公共消息统一写在项目描述区域不要依赖聊天工具里的上下文。这些规矩不复杂却能规避掉团队协作中最常见的摩擦。6. 一些值得马上试一下的扩展玩法做完了第一个小游戏之后Superpowers 还能玩出不少花样这里选几个我觉得性价比最高的方向供你参考。做一套更强的关卡编辑器你可以把每个关卡做成一个独立场景再用一个场景作为“关卡管理器”通过脚本按名称切换场景。这个过程非常适合把“进游戏-选关-通关-回选关界面”的完整循环跑通。加入音效与背景音乐新建 Audio 素材拖入场景并在脚本里调用播放接口即可。音效资源体积小、接入快能给游戏观感带来立竿见影的提升。自己写一个简单的对象池如果游戏里有大量重复生成的敌人、弹幕对象池是避免卡顿的基础手段。Superpowers 的 Actor 销毁和创建开销不算小池化之后性能提升非常明显。我个人在实际操作中的体会是Superpowers 最大的价值不是让你做出一款“大作”而是用极低的摩擦成本把一个不完全的玩法快速变成能跑通的画面。很多次我在纸上画了半天的设计案拿到 Superpowers 里一个小时就能把核心手感调出来这种即时反馈带来的推进感是其他重引擎很难给的。最后再分享一个小技巧如果你觉得浏览器里的内置脚本编辑器写起来不够顺手可以打开“偏好设置”把外部编辑器设置为 VS Code。这样脚本文件修改后回到 Superpowers 里保存项目即可刷新就能享受外置编辑器的全套插件体验。这个设置藏得有点深我用了一个星期才发现建议第一次用就改掉。