尧图网站建设 
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 容器运行中等想隔离环境、服务器部署社区镜像版本可能偏旧源码直接运行较高想二次开发、读源码学习需要拉仓库并自行处理依赖个人建议第一次用老老实实走 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 superpowersWindows 用管理员身份打开终端再装。网络不好的时候建议先切 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 从一张图片到 Sprite2D 游戏的基本素材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不然容易互相打架。虽然编辑器有冲突处理机制但我在实 Superpowers开源游戏开发工具：Node.js环境搭建与多人协作实战
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 容器运行中等想隔离环境、服务器部署社区镜像版本可能偏旧源码直接运行较高想二次开发、读源码学习需要拉仓库并自行处理依赖个人建议第一次用老老实实走 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 superpowersWindows 用管理员身份打开终端再装。网络不好的时候建议先切 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 从一张图片到 Sprite2D 游戏的基本素材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不然容易互相打架。虽然编辑器有冲突处理机制但我在实