企业官网建设流程全解析

1. 为什么我说 Superpowers 是个“被低估”的开源游戏开发工具

如果你在搜索引擎里敲下“superpowers 安装”，大概率是刷到了某个用浏览器做独立游戏的开源项目。这里要说的 Superpowers，是 Sparklin Labs 出品的开源 2D 游戏开发环境，MIT 协议，免费，自托管，整套工具跑在你自己的机器上。它的思路和 Unity、Godot 完全不一样：不需要装几个 GB 的编辑器，不需要配复杂的工程环境，只要机器上有 Node.js，装一个 npm 包，敲一条命令，浏览器打开就是完整的游戏编辑器。

我第一次接触它是在好几年前，当时被一个功能震住了：两个人可以在同一个项目里同时改场景和代码，所有改动实时同步到对方的画面上。这个在今天的开发工具里不算稀奇，但在那个年代，一个开源项目能做成“多人共同编辑游戏工程”，确实有点超能力的意思。这也是它名字的由来——给你一种快速创造游戏的能力。

它适合的人很明确：想学游戏开发但被 Unity/Godot 的界面和概念劝退的新手；想在一两个小时内把点子做成可玩原型的人；需要和小伙伴在同一个项目上协作做 Game Jam 的团队；还有喜欢研究开源代码的折腾型选手。如果你只是想快速验证一个游戏玩法，又不想背着一整套重型引擎走，这个工具很值得装来试试。

2. 安装前的关键决策：先理解运行模型再动手

2.1 Superpowers 到底是怎么跑的

Superpowers 不是一个传统意义上的“安装包”，它是一套客户端-服务器架构。核心是一个运行在 Node.js 上的服务端程序，负责保存项目数据、管理账号、同步多人编辑的操作；而编辑器本身是网页，跑在浏览器里。你执行superpowers命令后，本机起了一个服务，浏览器访问本地地址就能打开编辑器。

这个设计的好处是环境隔离：你的电脑只装一个 Node.js 就够了，剩下的东西都在浏览器里加载，换台电脑打开同一个地址，界面和工程一模一样。坏处也很明显：项目数据都存在服务端的数据目录里，备份、迁移、多人部署都得围绕这个目录来操作。我建议你从一开始就弄清楚数据存哪儿，后面踩坑会少很多。

2.2 Node.js 版本可能是你遇到的第一个大坑

Superpowers 的维护高峰期大概在 2017 到 2018 年，官方文档要求的是 Node.js，但这些年 Node 版本迭代飞快。如果你手头是最新的 Node 20 甚至更新，启动时可能直接报错，或者运行到一半依赖包崩溃。这大概率不是你的问题，而是项目依赖了比较旧的模块，跟新版 Node 不兼容。

我的实践建议是：优先用 Node 10 或 12 这类当年的 LTS 版本。如果你机器上已经装了新版 Node，别卸，用 nvm 这种版本管理工具切一个旧 LTS 出来，单独给 Superpowers 用，其他项目继续用新版。具体命令后面会写。很多人卡在第一步就是因为在最新 Node 上装完跑不起来，然后以为项目坏了。

2.3 三种运行方式怎么选

个人建议：第一次用，老老实实走 npm 全局安装。原因很简单，一是官方文档就是这个流程，网上教程最多；二是排查问题的时候，大家遇到的报错基本都在同一条路上，容易搜到解法。Docker 适合你已经确认要用它跑一个长期服务，比如搭给团队当公共开发环境；源码方式等着你要改造它的时候再碰。

3. 动手安装：三步把 Superpowers 跑起来

3.1 准备好 Node.js 环境

如果你还没装 Node.js，去官网下载安装包，选 LTS 版本就行。装完打开终端，确认两个命令能用：

node -v npm -v

能打印出版本号就说明基础环境没问题。如果你需要切换旧版本，我用的方案是 nvm，装完以后执行：

nvm install 10 nvm use 10

这样当前终端会话就切到了 Node 10，不影响系统里其他项目。注意装完 nvm 之后要重新开一个终端窗口，不然命令识别不到。

3.2 全局安装 superpowers 命令

环境没问题之后，开始安装：

npm install -g superpowers

为什么用-g全局安装？因为superpowers是一个命令行工具，需要放到系统的可执行路径里，你在任意目录下都能直接敲它。装完之后验证一下：

superpowers --version

如果提示找不到命令，在 Windows 上多半是 npm 的全局目录没加到 PATH，重装 Node 时勾选自动加入 PATH 通常能解决；在 Linux/macOS 上，npm 全局目录默认在当前用户目录下，检查一下~/.npm-global之类的路径是否在 PATH 里。如果遇到权限报错，Linux/macOS 用sudo npm install -g superpowers，Windows 用管理员身份打开终端再装。

网络不好的时候，建议先切 npm 镜像源再装，速度会快很多：

npm config set registry https://registry.npmmirror.com

装完再切回官方源也行，这个按你自己习惯来。

3.3 启动服务、创建账号和项目

在终端敲：

superpowers

正常情况下，终端会打印服务启动信息，并自动打开浏览器访问http://localhost:4237。如果浏览器没弹出来，手动访问这个地址即可。第一次进入会要求创建本地账号，随便填用户名和密码就行——这个账号只存在你自己的服务器上，跟任何云服务无关，纯粹是为了区分协作时的编辑者身份。

登录后是项目列表页，点新建项目，填个名字，选空白模板。创建成功后进入编辑器，你会看到一个由素材面板、场景画布、属性面板组成的界面，乍一看有点乱，但核心概念很好懂。

这里顺便说一个我踩过的坑：Superpowers 的项目数据默认保存在你启动命令的那个用户目录下，具体位置在不同操作系统上不一样，但一定是你本机的某个文件夹。以后想备份整个项目，直接把那个数据目录打包就行，不用在编辑器里找导出按钮。

4. 搭建第一个场景：编辑器的核心工作流

4.1 先认识界面的四个区域

打开一个空白项目后，编辑器界面大致分四块：左侧是素材树，所有图片、脚本、场景、字体都在这里管理；中间是主视图，可以用来打开场景和脚本；右边是属性面板，选中场景里的任何一个东西，它的组件和参数都会显示在这里；底部是脚本编辑区域，打开 TypeScript 脚本后排错和改代码都在这儿。

第一次用的时候别急着点，先把素材树和属性面板之间的关系搞清楚：素材树里的“场景”是你要摆东西的地方，素材树里的“脚本”是可复用的代码块，属性面板是给场景里的对象添加组件和调参的地方。理解了这个逻辑，后面操作就很顺。

我个人的习惯是先建几个文件夹，比如Sprites、Scripts、Scenes，把素材分类管理。素材多了以后如果全部堆在一起，找东西非常痛苦，而且脚本引用素材是按路径来的，路径乱了很容易出问题。

4.2 从一张图片到 Sprite：2D 游戏的基本素材

Superpowers 里做 2D 游戏，最核心的素材就是 Sprite。流程是：先准备一张 PNG 图片，通常在素材树空白处点右键，选择导入，把图片拖进编辑器，它会变成贴图资源；然后再在素材树里新建一个 Sprite 资源，在属性面板里指定使用这张贴图，并设置好每一帧的宽高——如果你用的是精灵图集，可以在这里一次性切出多帧。

新手最简单的方式是用一张纯色方块图片，比如 32x32 的白色 PNG。没素材的话，去 Kenney 这类免费游戏素材站下载 CC0 协议的图包，或者直接用系统画图工具画一个，几秒钟的事。不需要一开始就追求美术效果，先让东西在场景里动起来，比什么都重要。

4.3 场景、Actor 和组件

场景是游戏的舞台。在素材树里新建一个场景并打开，左边会显示当前场景里的所有 Actor。Actor 是场景里所有对象的统称，你看到的角色、金币、敌人，本质上都是挂了一堆组件的 Actor。组件决定这个 Actor 能做什么：挂 SpriteRenderer 就能显示图片；挂 ArcadeBody2D 就有了碰撞体，可以用来检测碰撞和做简单物理。

我建议每次建 Actor 都养成改名的习惯。默认名字全是Actor、Actor (2)这种，后面写代码要通过名字引用它们，名字太乱根本没法维护。比如玩家就叫Player，金币就叫Coin，敌人就叫Enemy。

4.4 用 Behavior 写第一段脚本

Superpowers 的脚本就是 TypeScript，文件名随便起，但文件里必须有且只有一个继承Sup.Behavior的类，并在文件末尾调用Sup.registerBehavior注册。一个空脚本长这样：

class MyBehavior extends Sup.Behavior { awake() { // Actor 加载时调用 } start() { // 第一帧更新前调用 } update() { // 每一帧调用 } } Sup.registerBehavior(MyBehavior);

在编辑器里选中一个 Actor，在属性面板点添加组件，选择Sup.Behavior对应的脚本，这个脚本就挂到了 Actor 上。脚本里的this.actor指向挂脚本的那个 Actor，这是最常用的引用方式。

Superpowers 的脚本热更新做得不错：你在底部脚本区改代码保存，场景里的运行状态会立刻用新逻辑重新编译，不用重启服务。但注意，热更新会重置脚本模块里的全局变量，所以我后来很少在脚本顶层放可变状态，而是放进 Behavior 的实例属性里，或者专门用一个管理类来持有。

5. Flux 数据流与多人协作：两个容易被忽视的核心机制

5.1 Flux 到底是什么

Superpowers 编辑器的底层有一套叫 Flux 的数据流框架。它的核心概念是“存储数据”和“操作函数”：存储数据相当于一块共享黑板，操作函数是定义在黑板上的一组动作。每当有人修改数据，所有关联到这块数据的界面和对象都会自动刷新。

你不用在任何地方直接操作 Flux，因为写代码通常用 Behavior 就够了。但理解它有个实际好处：你能明白为什么在属性面板改一个数值，场景视图和其他协作者的画面会同步变化——因为大家都连到了同一份数据上。如果你想去读源代码或者写编辑器插件，Flux 是绕不开的入口。

5.2 Behavior 之间怎么传数据

多人协作之外，游戏里多个对象之间经常要互相通信。早期我走了不少弯路，试过在全局变量里存一堆东西，结果热更新一触发就全丢了。后面摸索出一个比较稳的模式：在一个公共 Actor 上挂一个“游戏管理”脚本，其他脚本通过this.actor.getBehavior(某Behavior)去拿它的实例，再读写它的属性。

比如玩家碰到金币，金币脚本不需要自己管全局计数，它只需要找到玩家身上的玩家脚本，调用一个方法，或者给一个属性加一。这样每个脚本只管自己那一小块逻辑，数据集中在合适的地方维护，出问题了也容易查。

5.3 多人实时协作怎么用起来

既然支持多人协作，实际怎么操作？最简单的方式是在同一局域网内：启动 Superpowers 的那台机器记下局域网 IP，比如192.168.x.x，然后把http://192.168.x.x:4237发给队友。队友在浏览器里打开，注册自己的账号，就能看到同一个项目列表，你们可以同时打开同一个项目开始编辑。

协作时每个人都要注意不要乱拖别人正在操作的 Actor，不然容易互相打架。虽然编辑器有冲突处理机制，但我在实