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 上的原始碼開始。