BENNE：基于 Phaser 4 与 TypeScript 的免费网页点击冒险游戏引擎

abe · 2026年11月14日

BENNE 是一款采用 MIT 许可证的免费引擎和 VS Code 编辑器，专门用来制作在浏览器里运行的经典点击冒险游戏。本文介绍它的功能、如何创建项目，以及如何发布到 itch.io。

BENNE 是一款面向网页的免费点击冒险游戏引擎。 它基于 Phaser 4 构建，核心使用 TypeScript，并自带 Visual Studio Code 编辑器扩展。你可以用它制作包含房间、动词、物品栏和对话的经典冒险游戏，再发布成浏览器游戏。引擎由开发者 Bennethon 制作，采用 MIT 许可证发布。

如果你是玩着像素冒险游戏长大的，对什么东西都要先点一下“Look at”（查看），那么 BENNE 想用现代网页工具还原的正是这种感觉。本文会介绍引擎里有什么、如何创建第一个项目，以及如何把做好的游戏发布到 itch.io。

BENNE 速览


是什么	用于制作点击冒险游戏的引擎 + VS Code 编辑器
开发者	Bennethon
技术基础	Phaser 4、TypeScript、Vite
许可证	MIT（免费、开源）
运行平台	任何现代浏览器；Windows 桌面版可选
最新版本	v0.1.3（2026 年 10 月 25 日），见 GitHub
首款用它制作的游戏	Hank Steele and the AI Apocalypse（Game Jam 作品，免费）
官方网站	benne.games

版本号透露了一个重要信息：BENNE 还很年轻。首个 0.1 版本在 2026 年 10 月才发布，因此各版本之间可能会有变化，更新现有项目前请先阅读发布说明。

点击冒险引擎能帮你做什么

点击冒险游戏在屏幕上看起来很简单，但背后需要大量底层工作：能绕开障碍物行走的角色、可点击的热点、动词系统、能把物品用在其他东西上的物品栏、分支对话、过场动画以及存档。Phaser 这样的通用引擎提供精灵、输入和声音，却不包含这些冒险游戏规则。

BENNE 就是在 Phaser 4 之上补齐了这一层。根据官方指南，它的灵感来自 Adventure Game Studio 和 LucasArts 的 SCUMM 引擎，内置了：

房间、角色、物品栏和对话等现成的构建模块。
带状态跟踪的对话树，选项可以随着剧情推进出现或消失。
基于区域的透视缩放和着色，角色走“进”场景深处时会逐渐变小。
物品对目标使用、过场动画、画面淡入淡出、角色跟随，以及保存语音/音频设置。
音乐、音效、配音对话和视频过场，全部通过可自动补全的命名资源调用。
由 JSON 驱动的界面系统，支持九宫格（9-slice）图片、按钮、滑块、列表框和文本输入框。

你可以亲自试试：官方主页上有一个可以试玩的小演示，你可以在开发者的办公室里四处走动。

动词、交互风格和“有主见”的规则

交互风格在 game-config.json 文件中定义。也就是说，同一个引擎既能做带 LucasArts 风格动词栏（“Walk to”“Look at”“Use”…）的经典九动词游戏，也能做现代的两键点击游戏（左键执行、右键查看），还能做 Sierra 风格或混合式的设置。

BENNE 在一些地方还刻意设定了严格规则，让项目保持一致：

方面	BENNE 的规则	对你意味着什么
精灵	使用带标签动画的 Aseprite 精灵表	在 Aseprite 里做动画；其他导入方式已列入路线图
文字	只支持位图字体	任何缩放比例下像素文字都清晰锐利
分辨率	较低的内部分辨率，通常为 320×240 到 640×480	整数或接近整数的缩放，让像素画保持清晰
世界形状	用多边形定义可行走区域、热点和区域	没有瓦片地图或网格；你在编辑器里直接画形状
脚本	BenneScript 按顺序逐行执行	一次行走或一句台词结束后，才会执行下一行

如果你想要一个适用于任何类型的自由引擎，这些限制可能会显得有点紧。如果你想快速做出一款复古冒险游戏，它们能帮你省掉大量决定。

如何创建第一个 BENNE 项目

官方安装指南列出了三样准备工作：Visual Studio Code 1.106 或更新版本、当前 LTS 版本的 Node.js，以及推荐用来制作精灵的 Aseprite。然后：

在 VS Code 中打开扩展（Extensions）视图，搜索 BENNE Editor 并安装。活动栏（Activity Bar）上会出现 BENNE 图标。
打开命令面板（Command Palette），运行 BENNE: Create New Game。
选择模板：9-verb（经典动词栏）、2-click（极简操作）或 Blank（空白，不推荐新手使用）。
为项目命名并选择文件夹。扩展会自动生成文件，并替你运行 npm install。
打开新文件夹，运行 npm run dev，启动支持热重载的开发服务器。

你自己的所有内容都放在 src/game/ 中：房间、角色、界面、物品栏、对话、资源和 game-config.json。引擎文件夹由编辑器管理，所以更新引擎不会覆盖你的剧情。

BenneScript 长什么样

脚本使用 TypeScript 编写，但 BenneScript 让你可以像写剧本一样写冒险逻辑。像 Hank: `It's open!` 这样一行就能让角色说话，而且你不必为每个动作都写 await。一个典型的开门脚本会用 walkToClicked() 让玩家走到门前，用 inventory.remove(items.key) 移除钥匙，播放一段音效，用 wait(0.75) 等待，然后切换门的动画。

官方指南中的其他几个命令：

rooms.<name>.goTo() 切换到另一个房间。
cutscene(() => { … }) 包裹一段玩家可以按 Esc 跳过的场景。
.now、together(…) 和 background(…) 可以让多个动作同时进行。
npm run lint 检查脚本中的常见错误。

房间、道具、物品和声音都是根据你的内容生成的类型化名称，因此编辑器能自动补全，并尽早发现拼写错误。

把 BENNE 游戏发布到 itch.io 和 Windows

对网页游戏开发者来说，发布环节是 BENNE 最有用的地方，因为它会处理那些经常让 HTML5 上传出错的细节。

在游戏文件夹中运行 npm run build:itch。它会进行类型检查、构建、检查 itch.io 的文件数量和大小限制，并生成 releases/<package-name>-itch.zip。
用 npm run preview 测试生产版本。直接打开 dist/index.html 的效果和真实的网页托管并不一样。
在 itch.io 上把 ZIP 作为 HTML 项目上传，并勾选“playable in the browser”（可在浏览器中游玩）。index.html 文件已经位于 ZIP 根目录。
可选：运行 npm run build:windows，得到打包了 Electron 的便携版 Windows ZIP。玩家解压后运行 .exe 即可，不需要 Node.js。把它作为单独的文件上传并标记为 Windows。

指南中的两条实用提示：Windows 版本没有签名，请先在真正的 Windows 电脑上测试；浏览器版和桌面版的存档是分开保存的。在脚本中，game.isDesktop 可以告诉你当前运行的是哪个版本，方便在浏览器里隐藏“Quit”（退出）按钮。

Hank Steele：14 天做出的 BENNE 游戏是什么样子

第一款用 BENNE 制作的游戏是 Hank Steele and the AI Apocalypse。这是一款喜剧冒险游戏，讲述一名清洁工穿越到十年后、AI 已经掌控世界的未来，必须修好时光机才能回家。Bennethon 用 14 天为 $110 Adventure Game Challenge 制作了这款游戏，这场 Game Jam 的主题是“Delayed Consequences”（延迟的后果）。游戏在 itch.io 上免费提供，可在浏览器或 Windows 上游玩，流程约半小时。

itch.io 页面注明，AI 工具参与了这款游戏的代码、美术和音效制作。BENNE 本身并不需要 AI，你完全可以在 Aseprite 里手绘每一帧。

谁适合试试 BENNE

会一点编程的冒险游戏爱好者：模板和 BenneScript 让你把精力放在谜题和笑点上。
网页游戏开发者：你会得到一个可阅读、可扩展的 Phaser 4 + TypeScript 项目，外加干净利落的 itch.io 导出。
Game Jam 团队：已经有一款 14 天完成的 Jam 游戏，短周期开发是现实可行的。

如果你需要基于瓦片的世界、高分辨率美术，或者现在就要一个稳定的 1.0 引擎来做长期商业项目，它就不太合适。

常见问题

BENNE 是免费的吗？

是的。官方网站标明 BENNE 采用 MIT 许可证，所以你可以免费使用，包括用在你自己的游戏里。

使用 BENNE 需要懂 Phaser 吗？

不需要。BENNE 会帮你处理房间、动词、物品栏和对话。懂 TypeScript 会有帮助；如果想扩展引擎，Phaser 知识会很有用。

BENNE 游戏能在手机上运行吗？

BENNE 的构建可以在任何现代浏览器中运行。不过引擎是围绕鼠标式指点操作设计的，所以在承诺支持移动端之前，请先在手机上测试触控操作。

BENNE 游戏应该用什么分辨率？

指南建议使用较低的内部分辨率，通常在 320×240 到 640×480 之间，并按整数倍放大，让像素画保持清晰。

如何把 BENNE 游戏上传到 itch.io？

运行 npm run build:itch，把 releases 文件夹中的 ZIP 作为 HTML 项目上传，并标记为可在浏览器中游玩。

在哪里可以了解更多？

可以从 BENNE 官方指南、发布指南和 GitHub 上的源代码开始。