gohud — Godot 4 の HUD・UI キット

新登場：アーケード、コミック、Material 3、キッズ向けの見た目

デフォルト・SF・中世に新しい系統が4つ加わった — 組み込みの見た目は14種類になり、それぞれにダークとライトがある。どのウィジェット・ポップアップ・HUD 部品も、コードを一切変えずにそのまま受け取る：プリセットを切り替えれば、画面全体がついてくる。

material_light の gohud ギャラリー — ピル型ボタン、塗りのカード、Material 3 の配色 — `material_light`

material_dark の gohud ギャラリー — 同じ Material 3 の形をダークのベースラインで — `material_dark`

kids_light の gohud ギャラリー — 日だまりのように明るいページに、クレヨン色のぷっくりしたゼリーボタン — `kids_light`

kids_dark の gohud ギャラリー — 夜空色のページに同じおもちゃ箱 — `kids_dark`

comic_light の gohud ギャラリー — 紙のようなクリーム色のページに、太いインクの輪郭とくっきりした影 — `comic_light`

comic_dark の gohud ギャラリー — 夜のページにクリーム色の輪郭と黄色のプライマリ — `comic_dark`

arcade_light の gohud ギャラリー — 空色のページに、グラデーションと光沢で塗ったキーと、青い枠の厚い HUD ボード — `arcade_light`

arcade_dark の gohud ギャラリー — 夜のページに同じ鮮やかなキー — `arcade_dark`

Material 3 — アプリ画面向け

公式の M3 トークンと照らし合わせた Material 3 Expressive だ：48dp のタッチターゲットに 40dp の下地を収めたピル型ボタン、28dp のダイアログとシート、塗りのカード、アウトラインの入力欄、Expressive のスライダー。アプリ部品 — ナビゲーションバー、アプリバー、FAB、検索バー、チップ、進捗、日付選択 — は M3 のコンポーネントトークンに従い、タイトルには同梱の Roboto を使う。ショップ、設定、受信箱など、アプリらしく見せたいあらゆる画面に。

キッズ — おもちゃ箱

子どものために作った：キーも行もパネルも、太い縁取りと押すと沈むしっかりした段を持つゼリーキャンディで、部品の種類ごとに自分のクレヨンの色をまとう。クイックスロットはキャンディのブロック、バッジはステッカー、スティックは虹色だ。ウィンドウにはお日さま色のタイトルリボンと丸いキャンディの閉じるボタンが付き、押すとぷにっとつぶれる。サイズとプロジェクトのフォントはまったく変わらない。

コミック — 太いインク

どの面もマンガのコマだ：太いインクの輪郭の中に表面の色を塗り、後ろにくっきりした影を落とし、面を押すとその影が消える。設定1つですべての影をオン・オフし、さらに2つで輪郭の太さと影の大きさを決め、呼び出し1つで同じことをウィジェット1つにだけ行える。ウィンドウには黄色のタイトルキャプションが付く。

アーケード — 塗られたキー

どのキーも塗られている — グラデーション、白い光沢、押すと沈む段を紺色のインクの輪郭に収め — ラベルはインクで縁取った白い文字だ：プレイは緑、ほかは青、削除は赤。ボードは厚く、淡い内側を色の枠が囲む。ウィンドウには金色のタイトルバナーと丸い赤の閉じるキーが付く。

GoUi.use_preset(GoThemePresets.MATERIAL_LIGHT)   # または MATERIAL_DARK
GoUi.use_preset(&"kids_light")                   # または &"kids_dark"
GoUi.use_preset(&"comic_light")                  # または &"comic_dark"
GoUi.use_preset(&"arcade_light")                 # または &"arcade_dark"

Material 3 の詳細 → · キッズの詳細 → · アーケードをウィジェットごとに ↓ · コミックをウィジェットごとに ↓ · 同じポップアップを14の見た目で →

アーケード：塗られたキーと厚いボード

いちばん新しい見た目は、どの画面もアーケード筐体のように仕立てる。どのキーも塗られている — 上が明るく下へいくほど深くなるグラデーション、白い光沢のひと筋、押すと沈む段を、すべて紺色のインクの輪郭に収め — ラベルはインクで縁取った白い文字だ。 どのボードも厚い：自分の光沢を持つ色の枠が、淡い内側を囲む。 arcade_light は空色のページに白いボードを、arcade_dark は夜のページに紺色のボードを置く。下の画像はすべて本物の gohud の画面だ — 同じコードで、違うのはプリセットの1行だけ。

GoUi.use_preset(&"arcade_light")   # または &"arcade_dark"

arcade_light の gohud ギャラリー — 空色のページに、緑・青・赤・ラベンダー色で塗ったキーと青い枠の HUD ボード — `arcade_light` · ギャラリー

arcade_light のボトムシート — 下端からせり上がる、キーキャップの行を載せた厚い枠付きボード — `GoSheet`

arcade_light のコーチマーク — キーを指す枠付きの吹き出し — `GoCoachMark`

arcade_dark のサイドドロワー — 暗くした画面の上に、ナビゲーションの行を載せた紺色のボード — `GoDrawer`

arcade_dark のポップオーバー — 開いたキーにくっついた枠付きの吹き出し — `GoPopover`

arcade_dark のアラート — 青い枠の紺色のボードに、金色の Level up! バナー、赤い閉じるキー、緑の Great キー — `GoDialogs.alert()`

arcade_light のスナックバー — 下端に沿った茶色の枠の白いボードと Undo アクション — `GoSnackbar`

どのキーも塗られている

arcade_light のボタン — 緑のプレイ、青の詳細、白のアウトラインキー、コーラル色の削除、赤の完全削除、ラベンダー色の小さなキー、灰色の無効キーが、それぞれ紺色の輪郭の中にグラデーション・光沢・段で塗られている — `GoStyle.button()`

arcade_light のタブ — 選ばれたタブは青く塗ったキー、ほかはラベンダー色のキー — `GoStyle.tabs()`

arcade_light のセグメント — 別々に塗ったキー、選ばれたものは青く押し込まれている — セグメントのキー

arcade_light のトグルとチェックボックス — オンで光沢のある緑のトラック、オフでラベンダー色、緑のチェック枠 — トグルとチェックボックス

arcade_light のカード — 光沢と段を持つ厚い青の枠の中の淡い内側 — `GoStyle.card()`

arcade_light のフォーム — くぼんだ白い入力欄、トグル、緑の保存キー — `GoForm`

arcade_light の選択グリッド — キーキャップ、選ばれたものは緑の色味に金の縁 — `GoStyle.choice_grid()`

arcade_light のスロットグリッド — 個数の付いた光沢のあるキーキャップのインベントリ — `GoSlotGrid`

arcade_light のリスト行 — 行ごとにアイコン付きの淡いキーキャップ — リストの行

arcade_light の日付選択 — キーキャップの日付、選ばれた日は塗られたキー — `GoDatePicker`

arcade_light のスライダー — インクの溝の中の光沢のある青いチューブと丸いキーキャップのノブ — `GoStyle.slider()`

arcade_light のラジオグループ — 丸いキーキャップ、選ばれたものに青い点 — `GoStyle.radio_group()`

arcade_light のフィルターチップ — キーキャップのチップ、選ばれたものは青い色味にチェック、削除できるチップにはバツ印 — `GoStyle.filter_chip()`

arcade_light の検索バー — インクの輪郭の中のくぼんだ白い入力欄、検索アイコンとフィルターアイコン — `GoSearchBar`

arcade_light のステッパー — 各ステップは淡いキーキャップ、開いたステップには緑の Next キー — `GoStepper`

arcade_light のランキング表 — 1行おきに盛り上がったキーキャップ — `GoTable`

arcade_light のボトムナビゲーションバー — 選ばれたタブのアイコンは青いキーキャップのピルの上、赤い件数バッジ — `GoNavBar`

arcade_light の時刻選択 — 大きなキーキャップに時と分、時計の文字盤の上に AM と PM のキー — `GoTimePicker`

arcade_light のコード入力 — 8つのキーキャップのマス、入力中のマスは金の縁 — `GoCodeInput`

arcade_light のホイールピッカー — キーキャップの帯の上に選ばれた数、ほかは上下に薄れていく — `GoWheelPicker`

夜は `arcade_dark`

暗いページでは、インクがずっと深くなってページそのものになり、塗りの色は変わらず鮮やかなままだ。

arcade_dark のボタン — 夜のページに同じ鮮やかな塗り — 夜の `GoStyle.button()`

arcade_dark の HUD バー — くぼんだ溝の中の赤い HP、青い MP、緑の XP のチューブ — `GoBar`

arcade_dark の HUD カード — ゲームの上に、厚い青の枠で囲んだ紺色の内側 — `GoStyle.hud_panel()`

arcade_dark のクイックスロット — 個数の付いたキーキャップ、クールダウン中のスロットは金の縁 — `GoSlot`

arcade_dark のバーチャルスティック — インクの輪の中の光沢のあるパッド、4つの矢印、キーキャップのノブ — `GoJoystick`

arcade_dark のアラート — 黄・緑・赤・青の枠で囲んだ小さなボード — アラート

arcade_dark のフローティングアクションボタン — 光沢のある金色に塗ったキー — `GoFab`

arcade_dark の報酬カレンダー — キーキャップの日付、今日は金の縁 — `GoRewardCalendar`

arcade_dark のセグメント — 選ばれた Day キーは青、Week と Month はラベンダー色に塗られ、文字はすべて白 — セグメントのキー

arcade_dark のタブビュー — 紺色のキーキャップでできた項目の行の上に、塗ったタブのキー — `GoTabView`

arcade_dark のスクロールリスト — 紺色のキーキャップに載った項目の行とフィルターチップの列、選ばれたものは青 — `GoScroll`

arcade_dark のトグルとチェックボックス — オンで光沢のある緑のトラック、オフでラベンダー色 — トグルとチェックボックス

arcade_dark のレアリティチップ — Common から Cursed まで塗られた小さなプレート — `GoStyle.chip()`

arcade_dark のスロットグリッド — 白いアイコンと個数の付いた紺色のキーキャップのインベントリ — `GoSlotGrid`

arcade_dark の範囲スライダー — 暗い溝の中、光沢のある2つのノブの間をつなぐ青い区間 — `GoRangeSlider`

arcade_dark のページ送り — 現在のページは緑に塗ったキー — `GoPagination`

arcade_dark のバッジ — アイコンの上に、インクの輪郭で囲んだコーラル色のプレート — `GoBadge`

アーケードの見た目のしくみ

面

どのキーもボードも GoStyleBoxArcade だ：インクの輪郭、グラデーションの本体、段、光沢を、コントロール自身の矩形の中に描く — キーは状態が変わっても大きさが変わらず、押すと沈むだけだ。

読めるラベル

インクで縁取った白いラベルは、その縁取りが引き離すどんな塗りの上でも読める — WCAG は縁取りを文字の一部として数える。どの塗りも、グラデーションのどの高さでもラベルが 4.6:1 を超えるまで調整される。

ウィンドウ

ウィンドウのタイトルは、インクで縁取った白い文字で金色のバナーに載り、隣に丸い赤の閉じるキーが付く。ダイアログ、シート、ドロワー、ポップオーバーは厚い枠付きのボードだ。

キー1つに自分だけの色を塗れる — ポーズメニューのオレンジのショップキーのように：

menu.add_child(GoStyle.arcade_paint(GoStyle.button("Shop", _shop), Color("#FF8A1E")))

アーケードの詳細 → · 同じポップアップを14の見た目で →

コミック：太いインクとくっきりした影

コミックの見た目は、どの面もマンガのコマのように描く — 太いインクの輪郭の中に表面の色を塗り、右下へくっきりとしたベタの影を落とす。comic_light は紙のようなクリーム色のページに黒のインクで描き、プライマリはコバルト。comic_dark は夜のページにクリーム色のインクで描き、プライマリは黄色だ。下の画像はすべて本物の gohud の画面だ — 同じコードで、違うのはプリセットの1行だけ。

GoUi.use_preset(&"comic_light")   # または &"comic_dark"

comic_light の gohud ギャラリー — 紙のようなクリーム色のページに、くっきりした影を落とすインクのキー、行、バー — `comic_light` · ギャラリー

comic_dark の gohud ギャラリー — 夜のページにクリーム色のインクと黄色のプライマリ — `comic_dark` · ギャラリー

comic_light のボトムシート — 下端からせり上がるインクのパネルと、インクで描いた行 — `GoSheet`

comic_light のコーチマーク — ボタンを指すインクの吹き出し — `GoCoachMark`

comic_dark のサイドドロワー — 暗くした画面の上に、ナビゲーションの行を並べたインクのパネル — `GoDrawer`

comic_dark のポップオーバー — 開いたボタンに寄り添うインクの吹き出し — `GoPopover`

ボタン、トグル、タブ、スライダー、カード、フォーム、テーブル、ピッカー、チップがみなインクをまとう — 1つずつスタイルを付ける必要はない。キーを押すと影が消え、面がスタンプのようにその位置へ沈む。無効な面は影を失って薄くなるので、押せるものと押せないものがひと目で分かる。

comic_light のボタン — primary、secondary、アウトライン、危険、コンパクト、枠なし、無効のキーが、それぞれ太い黒の輪郭とくっきりした影をまとう — `GoStyle.button()` — すべての種類

comic_light のトグルとチェックボックス — インクのトラックとつまみ、チェックの入ったインクの箱 — トグルとチェックボックス

comic_light のラジオボタン — インクの輪、選んだものには塗りつぶしの点 — ラジオボタン

comic_light のタブ — 選んだタブはインクのパネル、ほかはインクの下線の上に並ぶ — `GoStyle.tabs()`

comic_light のセグメントコントロール — インクのセル、選んだセルは塗りつぶし — セグメントのピル

comic_light のスライダー — インクの溝、細いアクセントの塗り、インクのつまみ — `GoStyle.slider()`

comic_light のドロップダウン選択 — シェブロン付きのインクのキー — セレクト

comic_light のカード — 太い輪郭とくっきりした影をまとう白いパネル — `GoStyle.card()`

comic_light のフォーム — ヒント付きのインクの入力欄、トグル、インクの保存キー — `GoForm`

comic_light のリストの行 — どの行も、アイコン、サブタイトル、危険ラベルの付いたインクの帯 — リストの行

comic_light のテーブル — インクの罫線の上に見出し、スコアの行はどれもインクの帯 — `GoTable`

comic_light の日付選択 — インクの日付セル、選んだ日は塗りつぶし — `GoDatePicker`

comic_light の時刻選択 — インクの時と分の箱、AM・PM のキー、時計の文字盤 — `GoTimePicker`

comic_light のステッパー — インクのステップ行、済んだステップにはチェック、これからのステップは薄く — `GoStepper`

comic_light のフィルターチップと入力チップ — インクのピル、選んだフィルターは色付きでチェック入り — フィルターチップ

comic_light のナビゲーションバー — 上端にインクの罫線、現在のタブはインクのピル、Alerts にバッジ — `GoNavBar`

comic_light の入力グループ — 入力欄と送信キーが1つのインクの形につながる — `GoInputGroup`

comic_light のスプリットボタン — アクションとメニューの矢印が、インクの2つの半分に — `GoSplitButton`

comic_light のページネーション — 現在のページは、くっきりした影を落とすインクのキー — `GoPagination`

夜は `comic_dark`

暗いページでは黒い輪郭が消えてしまうので、comic_dark は輪郭をクリーム色で描き、同じインクの色をおびた淡い影を落とす。HUD の部品 — クイックスロット、バー、スティック、報酬カレンダー — も同じルールに従う。

comic_dark のボタン — 夜のページにクリーム色の輪郭、黄色の primary、淡くくっきりした影 — 夜の `GoStyle.button()`

comic_dark のクイックスロット — スタック数とクールダウンを表示したインクのブロック、光っているスロットは黄色の縁 — `GoSlot`

comic_dark の HUD バー — クリーム色のインクの溝に HP、MP、XP — `GoBar`

comic_dark のバーチャルスティック — クリーム色の輪と、影を落とすノブ — `GoJoystick`

comic_dark のアラート — クリーム色のインクで描いた情報、成功、警告、危険のパネル — アラート

comic_dark のスロットグリッド — インクのブロックが並ぶインベントリ — `GoSlotGrid`

comic_dark の報酬カレンダー — インクの日付セル、受け取った日はチェック、今日は黄色の縁 — `GoRewardCalendar`

comic_dark のレアリティチップ — それぞれ自分の色をおびたインクのピル — チップ

comic_dark の範囲スライダー — インクの溝にインクのつまみが2つ — `GoRangeSlider`

comic_dark の検索バー — 検索とフィルターのアイコンが付いたインクのバー — `GoSearchBar`

comic_dark のフローティングアクションボタン — クリーム色のインクとくっきりした影をまとう黄色のキー — `GoFab`

コミックの見た目のしくみ

すべての面に1つの StyleBox

どの面も GoStyleBoxComic だ：塗り、輪郭、影を、コントロール自身の矩形の内側に描く。描くたびに GoConfig から輪郭と影の大きさを読むので、設定1つで画面全体が一度に変わる。

押すと平らになる

押したキーは影を落とすのをやめ、その位置へ移る。ホバーでは影が残り、フォーカスでは輪郭を決して覆わない内側のインクの輪が加わり、無効な面は影を失って薄くなる。

残りはスキンが描く

GoSkinComic は、コードが描くものにインクを入れる：クイックスロット、チップ、バッジ、アバター、通知、ナビゲーションバー、FAB、日付のセル、そしてノブが影を落とすスティック。

ウィンドウにはキャプション

ウィンドウのタイトルは、マンガのナレーションの枠のような黄色のキャプションに載り、隣にはインクで描いた丸い閉じるボタンが付く。ダイアログ、シート、ドロワー、ポップオーバーは不透明なインクのパネルだ。

昼も夜も読みやすい

どちらのパレットも、ほかのすべてのプリセットと同じ WCAG のコントラスト検査に通る。押したキーや無効なキーも含めてだ。キャプションの色がページに近すぎるときは、その輪郭がページの色に切り替わる。

レイアウトは変わらない

輪郭と影は各コントロールの内側に収まり、内側余白はテーマが与えたままなので、別の見た目でレイアウトした画面はそのままのレイアウトを保つ — プロジェクトのフォントもだ。

設定3つと呼び出し1つ

GoConfig の3つの設定が、すべてのコミックの面を一度に変える。作り直すものは何もない — 値を入れたそばから画面が描き直される。

GoUi.config.comic_border_width = 2.0   # 輪郭 (dp) — 既定は 3
GoUi.config.comic_shadow_size = 6.0    # 影 (dp) — 既定は 4
GoUi.config.comic_shadow = false       # どこにも影を出さない

ウィジェット1つだけなら、設定に関係なく独自の道を行ける。最後の引数に true を渡すと、その中のすべても対象になる。

GoStyle.comic_shadow(skip_button, false)     # このボタンは平らに
GoStyle.comic_shadow(card, true, true)       # このカードとその中身すべては影を保つ
GoStyle.comic_border(title, 5.0)             # これだけ輪郭を太く

自分だけのコミックを作る。 tools/new_theme.py inked --from comic_light がパレットをコピーする。紙、インク、プライマリの色を変えて tools/make_theme.py inked を実行すればいい。インクも影もスキンも一緒についてくる。

コミックの詳細 → · 同じポップアップを14の見た目で →

ゲーム画面ではこう見える

中世と SF のプリセット — キャラクターシート、インベントリ、クエスト。フォーム、グリッド、プロンプトカード。角張ったパネルとタッチ操作。プリセットの切り替えはコード1行だ。

gohud 中世テーマ — 体力・マナ・スタミナのバーが並ぶキャラクターシート、クイックスロットの雑嚢、鍛造した金枠のクエストジャーナル — 中世 — キャラクター・インベントリ・クエスト

gohud 中世テーマ — 名前入力欄・トグル・チェックボックス・音量スライダーのある入力パネル、タイルのグリッド、承諾と辞退を選ぶパーティ招待のプロンプトカード — 中世 — フォーム・グリッド・プロンプトカード

gohud SF テーマ — 六角形のスティック、固定 / 追従 / 相対の切り替え、丸いアクションボタンを載せた面取りタッチ操作パネル — SF — 角張ったパネルとタッチ操作

14のプリセットと切り替え方 →

肩代わりしてくれるもの

ゲーム UI で時間を食うのはボタンの形ではなく、端末ごとにずれていくすべてだ。 gohud はそのずれを1か所で引き受ける。

寸法はすべてトークン

余白・角・文字サイズは数値で書かず名前で呼ぶ。テーマを差し替えれば画面全体がまとめて動く。

見える大きさ ≠ 押せる大きさ

閉じるボタンは 36dp に見えてタッチターゲットは 48dp。スロットが密集して重なる場所は、中心が近いほうが押下を取る。

ノッチとキーボード

HUD はセーフエリアの内側に収まり、仮想キーボードが出れば入力欄がその上へ持ち上がる。

戻るは1枚だけ閉じる

Escape と Android の戻るは最前面の1枚だけを閉じる。重ねたウィンドウがまとめて消えない。

通知は入力を奪わない

スナックバーの上を押しても、その下のボタンが反応する。フォーカスも奪わない。

アイコンは名前で頼む

ウィジェットが知っているのは GoIconSet.CLOSE だけ。セットを差し替えればコードに触れずに絵が変わる。アイコン →

14の見た目、1行

GoUi.use_preset() がテーマ・スキン・アイコンをまとめて入れ替える — 丸み、面取りの SF、鍛造した中世の枠、Material 3 のアプリ部品、キッズのゼリーキャンディ、コミックのインク、アーケードの塗り。

読めるかどうかは測る

どのテーマも 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`	羊皮紙・インク・青銅に同じ鍛造の枠
`material_light` 新登場	アプリ画面向けの Material 3 — ピル型ボタン、28dp のダイアログ、塗りのカード、アプリのナビゲーションバー・FAB・検索バー、Roboto
`material_dark` 新登場	同じ Material 3 の形をダークのベースラインで
`kids_light` 新登場	子ども向けのおもちゃ箱 — 太い縁取りと押すと沈む段を持つゼリーキャンディのキー、クレヨンの色、日だまりのように明るいページ
`kids_dark` 新登場	同じおもちゃ箱を夜空色のページで
`comic_light` 新登場	マンガのコマ — どの面にも太いインクの輪郭とくっきりした影、紙のようなクリーム色のページに白いパネル。影、その大きさ、輪郭の太さは設定で変えられる
`comic_dark` 新登場	同じインクを夜のページで — クリーム色の輪郭と黄色のプライマリ
`arcade_light` 新登場	アーケード筐体 — どのキーもグラデーション・光沢・段で塗られ、インクで縁取った白い文字のラベル。空色のページに厚い枠付きのボード、ウィンドウには金色のタイトルバナー
`arcade_dark` 新登場	同じ鮮やかなキーを紺色のボードと夜のページで

default_dark プリセットの gohud ギャラリー — 丸い角と青のアクセント — `default_dark` — 丸い角、やわらかい青のアクセント

default_light プリセット — 同じ形をライトパレットで — `default_light` — 同じ形、ライトパレット

scifi_dark プリセット — 面取りした角とシアンのネオン — `scifi_dark` — 面取りの角、シアンのネオン

scifi_light プリセット — 同じ角張った形を設計図のパレットで — `scifi_light` — 同じ角張った形、設計図のパレット

この4枚は同じギャラリー画面だ。コードは1行も違わず、変えたのはプリセット名だけ。ボタンの角、トグルの形、リストの行、入力欄の枠が、そろって動いているのが分かる。

中世コレクション

medieval_dark は鉄と革にアンティークゴールドを合わせ、medieval_light は羊皮紙とインクを使う。メニューの枠にはリベットと小さな角飾りを置き、常に見えている HUD は静かなままにした。彫刻風アイコン16種がアイテム名を描き直し、同梱の Cinzel フォントはタイトルとサブタイトルにだけ使う。

medieval_dark — キャラクターシート、クイックスロットの雑嚢、クエストジャーナル — `medieval_dark` — 鉄と革

medieval_light — 同じキャラクター・雑嚢・クエストの画面を羊皮紙で — `medieval_light` — 羊皮紙とインク

どちらも標準ウィジェットだけで組んだ examples/medieval/medieval.tscn だ。中世テーマの解説と、自分だけの王国の作り方 →

同じ画面を、スマートフォンでもデスクトップでも

ギャラリーの4枚は縦持ちのスマートフォンだ。下は同じコードを 1280×800 で開いたもので、本文は読みやすい幅 (480dp) で止まって中央に立ち、HUD は隅に残る。フォームは浮かぶ HUD をよけて回り込むが、 もともと重なっていなければ動かない — 広い画面で無理に押しやると、本文が中心からずれてしまう。

1280×800 の default_dark — 本文は中央、HUD は隅 — `default_dark` · 1280×800

1280×800 の scifi_dark — 同じ配置に面取りパネルとネオン — `scifi_dark` · 1280×800

同じシート、違う見た目

default_dark のボトムシート — デフォルト — 丸いカード、固定された検索行とフッター

scifi_dark のボトムシート — 上辺にネオンのアクセント — SF — 上辺のアクセント、切り落とした角、発光

エディタからは プロジェクト設定 → gohud → Theme → Preset で選び、設定リソースからは GoConfig.preset で指定する。theme・skin・icons を明示的に埋めると、そちらがプリセットより優先される — プリセットを選んだうえで1つだけ差し替えられる。

新しいテーマは JSON ファイル1枚だ。 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`	角を斜めに切り落とした面取り、1辺だけ太いアクセント縁、外へにじむ発光
`GoStyleBoxBracket`	中身を囲わず、四隅の印だけを引く
`GoStyleBoxMedieval`	リベット・角の彫刻・ベベルのハイライト・素材の質感を持つ鍛造の枠
`GoStyleBoxJelly`	ゼリーキャンディ — 太い縁取り、押すと沈むしっかりした段、上が明るい本体と白いつや
`GoStyleBoxComic`	マンガのコマ — 太いインクの輪郭とくっきりしたドロップシャドウ。どちらもゲーム実行中に `GoConfig` で大きさが決まる
`GoStyleBoxArcade`	アーケードのキーやボード — グラデーションの本体、白い光沢、押すと沈む段、インクの輪郭。ボードは淡い内側を厚い色の枠で囲む

6つとも Theme リソースへそのまま保存できる — だからこそテーマが色だけでなく形まで変えられる。 GoSkinSciFi、GoSkinMedieval、GoSkinMaterial、GoSkinKids、GoSkinComic、GoSkinArcade が同梱のサブクラスだ。

同梱の各スキンが描いたクイックスロット・スティック・チップ — デフォルト、キッズ、Material、中世、SF — スキンが描くもの — デフォルト、キッズ、Material、中世、SF

コミックスキンが描いたクイックスロット・スティック・チップ — インクの輪郭とくっきりした影 — …そしてコミックスキン

アーケードスキンが描いたクイックスロット・スティック・チップ — 光沢のあるキーキャップと4つの矢印のパッド — …そしてアーケードスキン

GoStyle.box() は必ず StyleBoxFlat を返す。 呼び出し側が受け取って bg_color や corner_radius を調整するからだ。独自の形を保ったままにしたいときは GoStyle.surface() を使う。

ウィジェット

部品を一覧で。ひとつずつ詳しく → · すべてのウィジェットを画像付きで → · ポップアップとダイアログの完全ガイド →

クラス	基底	役割
`GoSurface`	Control	浮かぶカードの外殻 — 中央・下・アンカー配置、固定ヘッダーとフッター、スクロール本文、ドラッグでのサイズ変更
`GoSheet`	CanvasLayer	下からせり上がるページ。専用レイヤーを持つので HUD より確実に上に出る
`GoDialogs`	Node	`await` で受け取る確認と通知。取り消せない操作には `destructive`
`GoForm`	MarginContainer	幅に上限を設け、仮想キーボードを、`avoid_hud` なら HUD も避けるフォーム
`GoScroll`	ScrollContainer	タッチでのスクロール。スクロールバーはカードの余白へ収まる
`GoNotice`	PanelContainer	入力もフォーカスも奪わないスナックバー
`GoPromptCard`	PanelContainer	ゲームを止めずに尋ねるカード
`GoCoachMark`	Control	実物のコントロールを指し示すツアー。指した対象を押すと次へ進む
`GoHudAnchor`	Control	HUD をセーフエリア内の9か所のどれかに留める
`GoBar`	Control	体力・マナ・経験値のバー。変化はなめらかに補間される
`GoSlot`	Button	クイックスロット1つ — アイコン・個数・クールダウン・ショートカットを1つの面に
`GoJoystick`	Control	固定・追従・相対モードのバーチャルスティック
`GoIconButton`	Button	小さく見えて大きく押せる
`GoStyle`	静的	ボタン、リスト行、入力欄、チップ、表、タブなどを同じ流儀で作る

待たせる、伝える、数える

クラス	基底	役割
`GoSnackbar`	Node	自分で居場所を決めるメッセージ
`GoSpinner`	Control	終わりの見えない待ち時間
`GoBadge`	PanelContainer	未読の点、NEW の札、99+

フォームとリスト

クラス	基底	役割
`GoField`	VBoxContainer	間違いを抱えられる行
`GoInputGroup`	HBoxContainer	ボタンと溶接された入力欄
`GoCombobox`	Button	検索できるピッカー
`GoCodeInput`	VBoxContainer	クーポンとギフトコード
`GoTable`	VBoxContainer	並べ替えできる見出し、選べる行
`GoPagination`	HBoxContainer	ページ番号、あるいは「もっと見る」の行

ゲームで実際に使う形

クラス	基底	役割
`GoRewardCalendar`	VBoxContainer	毎日のログインボーナス
`GoRadar` · `GoDonut`	Control	ひと目で分かるステータス
`GoCarousel`	VBoxContainer	バナーとキャラクター選択
`GoKbd`	HBoxContainer	嘘をつかないキー表示

画面の上に重ねる

クラス	基底	役割
`GoDrawer`	CanvasLayer	横から出るパネル
`GoPopover`	RefCounted	脇に留まるカード
`GoContextMenu`	RefCounted	長押しと右クリック
`GoConsole`	CanvasLayer	開発者コンソール

Go HUD Skill

gohud には AI スキルが入っている — API のすべて、すぐ動くテンプレート、プレビュー起動器。下の文をまるごとコーディングエージェントに貼れば、gohud を入れて使い方まで覚える。

Go HUD Skill

読みやすさは目分量ではなく実測で決める

「きれい」は好みだが、「読める」は測れる。 薄い灰色の文字は良いモニタでは平気に見えて、日中の屋外ではスマートフォンから消える — 目で選んでいれば、いつか必ずそうなる。

python3 addons/gohud/tools/check_contrast.py

すべての色の組み合わせと、ボタンの状態ごとのラベルとその下のパネルを、14のテーマすべてで WCAG に照らして測る。半透明の色は実際の背景に合成してから測る — そのまま測ると、画面に出ている見え方より良い比率が出てしまう。

だから文字色は選ぶのではなく導き出す。ビルダーはパレットの値を出発点にして、その文字が載りうるすべての面でしきい値を超えるまで明度を押し上げる。パレットを変えればコントラストも追従する。その規則と、背後にある落とし穴 →

検査・リリース・このサイト

入口1つですべての検査が走る。それぞれが、ほかからは見えないものを見ている。

bash addons/gohud/tools/check_all.sh

検査	捕まえるもの
4つの画面サイズでの `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 の4サイズとも 438/438、GoRuntime オートロードを有効にしても再び 438/438、 Web エクスポート成功、6テーマでコントラスト不足は 0。この実行に Android・iOS の実機は含まれていない。

リリース版を作る

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # 検査すべて → ZIP → 空プロジェクトで検証
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

バージョンは package.json に書かれた値で、パッケージングがそれを上げることはない。新しいバージョンを出すときは、先にその数字を書き換える。成功すると plugin.cfg・GoUi.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 のワークフローがこのフォルダをサイトのルートとして公開する。

ゲーム UI を、リソース1枚で動かす

新登場：アーケード、コミック、Material 3、キッズ向けの見た目

Material 3 — アプリ画面向け

キッズ — おもちゃ箱

コミック — 太いインク

アーケード — 塗られたキー

アーケード：塗られたキーと厚いボード

どのキーも塗られている

夜は arcade_dark

アーケードの見た目のしくみ

面

読めるラベル

ウィンドウ

コミック：太いインクとくっきりした影

どのウィジェットもインクで

夜は comic_dark

コミックの見た目のしくみ

すべての面に1つの StyleBox

押すと平らになる

残りはスキンが描く

ウィンドウにはキャプション

昼も夜も読みやすい

レイアウトは変わらない

設定3つと呼び出し1つ

ゲーム画面ではこう見える

肩代わりしてくれるもの

寸法はすべてトークン

見える大きさ ≠ 押せる大きさ

ノッチとキーボード

戻るは1枚だけ閉じる

通知は入力を奪わない

アイコンは名前で頼む

14の見た目、1行

読めるかどうかは測る

gohud をインストール

クイックスタート

見た目を変える — 色だけでなく形も

中世コレクション

同じ画面を、スマートフォンでもデスクトップでも

同じシート、違う見た目

スキン — テーマが届かない場所

ウィジェット

待たせる、伝える、数える

フォームとリスト

ゲームで実際に使う形

画面の上に重ねる

Go HUD Skill

読みやすさは目分量ではなく実測で決める

検査・リリース・このサイト

リリース版を作る

このサイト

夜は `arcade_dark`

夜は `comic_dark`