gohud

用一份資源驅動的遊戲 UI

gohud 是給 Godot 4.6 以上使用的 HUD 與 UI 套件。浮動視窗、底部面板、對話方塊、表單、 訊息條、導覽標記、HUD 量條、快捷格與虛擬搖桿全都靠一份佈景主題和一組可抽換的圖示組驅動, 並且替你處理好安全區域、虛擬鍵盤、RTL 與觸控目標。 六種預設集 — 預設、科幻與中世紀,每種都有深色與淺色 — 一行程式碼就換掉顏色與形狀。

Godot 4.6+ v1.0.1 純 GDScript 不需要自動載入 MIT 6 種預設集 21 種語言 內含 100 個圖示

在遊戲裡長什麼樣

中世紀與科幻預設集 — 角色面板、背包與任務;表單、格狀排列與提示卡;稜角分明的面板與觸控操作。 切換預設集只要一行程式碼。

gohud 中世紀佈景主題 — 角色面板上有生命、魔力與體力量條,一只裝著快捷格的行囊,以及鍛金框內的任務日誌
中世紀 — 角色、背包與任務
gohud 中世紀佈景主題 — 輸入面板上有名稱欄位、切換開關、核取方塊與音量滑桿,一片方塊格狀排列,以及帶有接受與拒絕的組隊邀請提示卡
中世紀 — 表單、格狀排列與提示卡
gohud 科幻佈景主題 — 切角的觸控操作面板,內有六邊形搖桿、固定/跟隨/相對切換,以及圓形動作按鈕
科幻 — 稜角分明的面板與觸控操作

六種預設集與切換方式 →

它替你處理掉的事

遊戲 UI 最花時間的從來不是按鈕長什麼樣 — 而是那些在不同裝置之間逐漸走樣的一切。 gohud 把這些走樣集中在一個地方處理。

每個尺寸都是一個 token

間距、圓角與文字大小都用名稱呼叫,不寫死成數字。換一份佈景主題,整個畫面就跟著動。

看得到的尺寸 ≠ 按得到的尺寸

關閉按鈕看起來是 36dp,觸控範圍卻是 48dp。快捷格擠在一起而互相重疊時,中心比較近的那一個接下這次按壓。

瀏海與鍵盤

HUD 零件待在安全區域內,虛擬鍵盤跳出來時輸入欄會升到它上面。

返回一次只關一層

Escape 與 Android 的返回鍵只關掉最上層那一層介面。疊在一起的視窗不會一起消失。

訊息條不會搶走輸入

按在訊息條上,底下的按鈕照樣收得到。焦點也不會被拿走。

圖示按名稱索取

控制項只認得 GoIconSet.CLOSE。換掉整組圖示,所有圖案都跟著換,一行程式碼都不必動。

六種外觀,一行切換

GoUi.use_preset() 一次換掉佈景主題、外觀與圖示 — 圓角、切角的科幻,或鍛造的中世紀框。

清晰度是量出來的

每一份佈景主題都對照 WCAG 檢查過,包含按鈕的各種狀態,以及半透明 HUD 面板疊在純白與純黑上的情形。

不啟用外掛程式也一樣能用。啟用之後會多一個 GoRuntime 自動載入,負責追蹤視窗大小、dp 縮放 與鍵盤高度,另外還多了設定資源與預設集的專案設定 — 那些是方便,不是必要。

安裝 gohud

兩條路:讓 AI 代理替你裝,或把資料夾放進專案 —— 此外不必設定任何東西。

安裝

快速上手

五行程式碼就能顯示帶佈景主題的畫面。完整流程請見安裝頁。

快速上手

換外觀 — 顏色形狀一起

Theme 只能重新樣式化引擎畫出來的東西。StyleBoxFlat 只有圓角這一種角, 而搖桿、快捷格與導覽標記是用程式碼畫的 — 光靠佈景主題永遠改不了它們的形狀。 所以 gohud 附上預設集:佈景主題、外觀與圖示組當成一個整體一起挑。

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # 佈景主題、外觀與圖示一起換
預設集外觀
default_dark最初的 gohud — 圓角,柔和的藍色強調色
default_light同樣的形狀,換成淺色調色盤
scifi_dark切角,青色霓虹邊與光暈,六邊形搖桿,瞄準框角
scifi_light同樣稜角分明的形狀,換成明亮的藍圖調色盤
medieval_dark暗鐵與皮革、古金色框、鉚釘、雕刻圖示、Cinzel 標題
medieval_light羊皮紙、墨水與青銅,配上同樣的鍛造框
套用 default_dark 預設集的 gohud 藝廊 — 圓角,藍色強調色
default_dark — 圓角,柔和的藍色強調色
default_light 預設集 — 同樣的形狀,換成淺色調色盤
default_light — 同樣的形狀,淺色調色盤
scifi_dark 預設集 — 切角與青色霓虹
scifi_dark — 切角,青色霓虹
scifi_light 預設集 — 同樣稜角分明的形狀,換成藍圖調色盤
scifi_light — 同樣稜角分明的形狀,藍圖調色盤

這四張是同一個藝廊畫面。沒有一行程式碼不同 — 只有預設集的名稱不同。 按鈕圓角、切換開關的形狀、清單列與輸入框邊框全都一起改變。

中世紀系列

medieval_dark 把鐵與皮革配上古金色;medieval_light 用的是羊皮紙 與墨水。選單框上有一顆鉚釘和一小塊角落裝飾,而始終顯示的 HUD 保持安靜; 16 個雕刻圖示重畫了物品名稱,只有標題與副標題用到內附的 Cinzel 字型。

medieval_dark — 角色面板、裝著快捷格的行囊與任務日誌
medieval_dark — 鐵與皮革
medieval_light — 同樣的角色、行囊與任務畫面,畫在羊皮紙上
medieval_light — 羊皮紙與墨水

兩張圖都是 examples/medieval/medieval.tscn,全部用標準控制項組成。 中世紀指南,以及怎麼打造自己的王國 →

同一個畫面,在手機與在桌機

藝廊那幾張是直向手機。下面是同樣的程式碼跑在 1280×800 — 內容停在好讀的寬度(480dp) 並置中,HUD 則待在角落。表單會繞開浮動的 HUD 零件,但在本來就沒擋到時不會移動: 硬推的話,寬螢幕上的內容就會歪掉。

1280x800 的 default_dark — 內容置中,HUD 待在角落
default_dark · 1280×800
1280x800 的 scifi_dark — 同樣的版面,換成切角面板與霓虹
scifi_dark · 1280×800

同一個面板,不同外觀

default_dark 下的底部面板
預設 — 圓角卡片、固定的搜尋列與頁尾
scifi_dark 下的底部面板 — 頂端沿著邊緣有一道霓虹強調邊
科幻 — 頂部強調邊、切角、光暈

可以從 專案設定 → gohud → Theme → Preset 挑一個,或設定 GoConfig.preset。 明確填入 themeskinicons蓋過預設集, 所以你可以拿一個預設集來,只覆寫其中一項。

一份新的佈景主題就是一個 JSON 檔。new_theme.py kingdom --from medieval_dark 會寫出一份把每個繼承值都寫清楚的調色盤;make_theme.py kingdom 接著產生佈景主題、 它的控制項圖檔與外觀旋鈕,這個預設集就會出現在選擇器裡。所有設定與旋鈕 →

外觀 — 佈景主題碰不到的地方

外觀掌管搖桿、快捷格的面、導覽標記的圈、標籤片、骨架佔位、行內提示、分隔線 與區段標題。繼承它,只覆寫你想改的部分。

class_name MySkin extends GoSkin

func slot_box(accent: Color, lit: bool) -> StyleBox:
    var box := GoStyleBoxCut.new()
    box.bg_color = accent
    box.cut = 6.0
    box.edge_color = accent
    return box
類別畫得出來的形狀
GoStyleBoxCut斜切的角(切角)、一道加粗的強調邊、外側光暈
GoStyleBoxBracket只有角落的記號,不把內容框起來
GoStyleBoxMedieval帶鉚釘、角落雕刻、斜角高光與材質紋理的鍛造框

這三種都能序列化進 Theme 資源 — 這正是佈景主題改得了形狀、而不只是顏色的原因。 GoSkinSciFiGoSkinMedieval 是內附的子類別。

GoStyle.box() 一律回傳 StyleBoxFlat,因為呼叫端拿到它之後 會去調整 bg_colorcorner_radius。當自訂形狀必須保留時, 請改用 GoStyle.surface()

控制項

所有零件,一張表看完。逐一細看 →

類別基底功能
GoSurfaceControl浮動卡片外殼 — 置中、靠下或錨定擺放,固定的頁首與頁尾,可捲動的本文,拖曳改變大小
GoSheetCanvasLayer從底部升起的頁面,位於自己的圖層上,所以會蓋在 HUD 之上
GoDialogsNode可以 await 的確認與提示;不可逆的動作用 destructive
GoFormMarginContainer限制寬度的表單,會避開虛擬鍵盤,加上 avoid_hud 還會避開 HUD
GoScrollScrollContainer觸控捲動;捲軸縮進卡片的內距裡
GoNoticePanelContainer既不吃輸入也不吃焦點的訊息條
GoPromptCardPanelContainer不會擋住遊戲的提問卡
GoCoachMarkControl指向真實控制項的導覽;按下目標就前進到下一步
GoHudAnchorControl把 HUD 零件釘在安全區域的九個位置之一
GoBarControl生命、魔力與經驗量條,數值變化帶緩動
GoSlotButton一格快捷格 — 圖示、數量、冷卻與快速鍵全在同一個面上
GoJoystickControl固定、跟隨或相對模式的虛擬搖桿
GoIconButtonButton看起來小,按起來大
GoStylestatic按鈕、清單列、輸入欄、標籤片、表格、分頁等等,都用同一套一致的做法產生

等待、告知、計數

類別基底功能
GoSnackbarNode會自己找位置的訊息
GoSpinnerControl看不到盡頭的等待
GoBadgePanelContainer未讀圓點、「新」標籤、99+

表單與清單

類別基底功能
GoFieldVBoxContainer會出錯的那一列
GoInputGroupHBoxContainer和按鈕焊在一起的輸入欄
GoComboboxButton會搜尋的選擇器
GoCodeInputVBoxContainer優惠券與禮物碼
GoTableVBoxContainer可排序的標題列、可選取的資料列
GoPaginationHBoxContainer頁碼,或是一列「更多」

遊戲真的會用到的形狀

類別基底功能
GoRewardCalendarVBoxContainer每日簽到
GoRadar · GoDonutControl一眼看完的能力值
GoCarouselVBoxContainer橫幅與角色選擇
GoKbdHBoxContainer不會說謊的按鍵提示

蓋在畫面上

類別基底功能
GoDrawerCanvasLayer側邊面板
GoPopoverRefCounted釘住的卡片
GoContextMenuRefCounted長按與右鍵
GoConsoleCanvasLayer開發者主控台

AI SKILL

gohud 內建 AI 技能:完整 API、可直接執行的範本與預覽啟動器。把下面這一段貼給你的編碼代理,它就會裝好 gohud 並知道怎麼用。

AI SKILL

可讀性是量出來的,不是用眼睛估的

「好看」是品味;「看得清楚」量得出來。淺灰色的文字在好螢幕上看起來沒問題, 到了白天的手機上就消失 — 用眼睛挑,遲早會踩到這一步。

python3 addons/gohud/tools/check_contrast.py

六種佈景主題中的每一組配色,以及每個按鈕狀態下的標籤與它所在的面板,都會對照 WCAG 量過。半透明的顏色會先合成到它真正的背景上 — 直接量它們,得到的比值會比畫面上看到的更好看。

所以文字顏色是推算出來的,不是挑出來的:產生器拿調色盤裡的值當起點, 把它的明度推到在每一個可能落腳的面板上都達標為止。改調色盤,對比就跟著走。 背後的規則與陷阱 →

檢查、發行與這個網站

一個進入點跑完所有檢查;每一部分都看得到別人看不到的東西。

bash addons/gohud/tools/check_all.sh
檢查抓得到什麼
四種螢幕尺寸下的 run_tests.sh控制項行為與版面、RTL 位置、鍵盤焦點、執行時的外觀對比、每一種預設集
new_project_check.sh對宿主專案的隱藏相依;加上 --zip 檢查實際發行的內容,加上 --export 檢查 Web 建置
check_contrast.py每份佈景主題檔的 WCAG 對比,含按鈕狀態與半透明面板
check_generated.py · check_scaffold.sh產生的佈景主題與其調色盤相符;用完即丟的佈景主題能建置並通過對比檢查
check_package.py採用 package.json 的版本號、變更紀錄搬移與 ZIP 內容,全都在暫時的副本上進行
check_site.py這個網站的連結、錨點、頁面語言、詞彙表與旋鈕表格
最近一次記錄的執行 — 2026-09-13,Godot 4.7.2,macOS,Compatibility 繪製器。在空白專案中, 於 390×844、844×390、768×1024 與 1280×800 下 438 項檢查全數通過;加上 GoRuntime 自動載入後再次 438 項全過;一次 Web 匯出;六種佈景主題的對比零失敗。Godot 4.6 與實體 Android、iOS 裝置 不在這次執行的範圍內。

發行版本

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

版本就是 package.json 裡寫的那個,打包絕不會自動調高。 要發行新版本,先改這個數字。 成功執行時會把 plugin.cfgGoUi.VERSION 設成該版本,且只在該版本第一次打包時,把 CHANGELOG.md 中 Unreleased 的內容搬進一筆有日期的紀錄。 同一版本再次打包會重新產生 ZIP 並取代舊的。執行失敗則什麼都不改。 ZIP 裡不含這個網站、測試、工具與 package.json

這個網站

python3 addons/gohud/tools/make_site.py            # 詞彙表與外觀旋鈕表格,從原始碼產生
python3 addons/gohud/tools/check_site.py           # 連結、錨點、語言、詞彙表、產生的表格
bash addons/gohud/tools/site_shots.sh /tmp/shots   # 每一頁的桌機與手機螢幕截圖

這些頁面就是 www/ 底下的純 HTML — 根目錄是英文,ko/ 是韓文。 一個 GitHub Actions 工作流程會把那個資料夾發佈成網站根目錄。