企业官网建设流程全解析

第一次在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 对比。虽然三者都叫游戏引擎，但定位差异很大。我做了一张简单对比：

从表格能看出来，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。如果你同时需要维护老版本和新版本项目，可以考虑安装 nvm（Node Version Manager）来切换不同版本的 Node，这是 Windows / macOS / Linux 下都适用的方案。

检查当前 Node 版本用这个命令：

node -v npm -v

npm 会随着 Node 一起安装，不用单独处理。确认版本号能正常输出，Node 环境就算准备好了。

2.2 下载 Superpowers 的正确姿势

Superpowers 有两个层级的仓库要搞清楚：

• 一个是核心引擎仓库，包含服务器代码和编辑器前端
• 一个是启动器（launcher），负责自动下载、更新引擎并启动服务

在 GitHub 上搜索 “Superpowers” 时，你会看到原版创始人仓库和社区维护仓库。我的建议是优先选择社区维护版本，因为原版已经很久不更新了，社区版本修复了一些现代系统上的兼容问题，也支持更新的 Node 版本。

下载时直接找 Releases 页面，选择对应系统的压缩包。Windows 用户下载 zip，macOS 用户下载 dmg 或 tar，Linux 用户一般用 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 场景视图，用于摆放对象
• 右侧是属性面板，显示当前选中对象的设置和脚本组件
• 底部或侧边是代码编辑区，双击脚本在这里打开

和传统引擎不同的是，整个界面都是网页。你拖动窗口、切换工具、选中对象时，操作非常流畅，这是因为编辑器的交互层就在浏览器本地，只有保存和同步的时候才和服务器通信。这种架构带来的体验很舒服：改动是即时保存的，基本上不存在“忘记保存导致几个小时工作白费”的情况。

不过也要注意，既然它是网页应用，那浏览器崩溃、标签页被误关、电脑突然断电，同样会导致未同步的数据丢失。虽然它设计上会尽量减少这种风险，我依然建议你养成习惯：每次结束工作前，在编辑器里手动确认所有脚本都已保存（一般按 Ctrl+S 保代码），然后再关闭页面。

这个时候，你已经具备开始做游戏的全部条件了。下一节，我们进入真正动手的环节。

4. 核心实操：写代码让游戏跑起来

4.1 Actor、组件、行为：理解 Superpowers 的对象模型

Superpowers 的对象模型其实不复杂，核心就是三个概念：

• 场景（Scene）：一个游戏世界的容器，相当于 Unity 里一个 Level
• Actor：场景里的一个对象，可以是一个方块、一个角色、一个空物体
• 组件（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脚本。这个时候脚本就绑定到物体上了。

第四步，点击顶部工具栏的运行小圆钮，游戏开始播放。你应该能看到方块在持续旋转。如果没反应，按下 Ctrl+Shift+P 之类的快捷键打开浏览器控制台，看看有没有报错，脚本绑定是否成功。

这个流程看起来简单，但是它是 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 相关入口，进入导出设置界面，里面通常会让你配置：

• 游戏标题，会显示在浏览器标签页上
• 画布尺寸，也就是游戏窗口的分辨率
• 是否显示加载进度条
• 图标和默认背景色

填好之后点 Build，Superpowers 会在你指定目录生成一个完整的静态站点，一般包含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 运行报错与性能问题排查清单

我把自己遇到过的、以及身边朋友问过最多的问题整理成一个表格，方便你直接对着排查：

6.3 我给新手的避坑清单

最后再给新手朋友一份避坑清单，这些都是在实际使用中一点点攒出来的经验：

• 不要把 Superpowers 装在中文路径里，哪怕你觉得自己系统支持得很好，也不要赌
• 新建脚本后不要马上开写，先看一遍内置文档对应的 API，Superpowers 的文档质量真的值得你花 10 分钟
• 场景中的 Actor 命名要规范，前期随便取名 “asdasd”，后期找人会非常痛苦
• 制作 2D 游戏时，尽量保持贴图尺寸为 2 的幂（如 256x256、512x512），减少渲染性能问题
• 定期提交 git 记录，给自己保留后悔药
• 如果团队协作，给每个人都建立独立账号，不要共用一个管理员账号
• 导出前在浏览器里测试一遍，尤其注意刷新后是否还能正常回到主界面

老实说，Superpowers 并不是一个完美无缺的引擎，它有学习曲线，有些 API 细节在不同版本间有差异，3D 能力也比不上那些大型引擎。但它的轻量、免费、协作特性，让它在我心中是一个特别适合游戏开发入门和小团队快速迭代的工具。

我在实际使用中最深的感受是：当一个项目能同时被几个人实时编辑，那种“我们一起把一个东西从无到有做出来”的实时反馈感，是其他引擎很难提供的。如果你正准备和伙伴开启新的小项目，或者想尝试一把不依赖大引擎的网页游戏开发，Superpowers 值得你花一个下午认真装一遍、玩一遍。