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

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

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

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

肩代わりしてくれるもの

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

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

Theme が作り替えられるのはエンジンが描くものだけだ。StyleBoxFlat が持つ角は丸だけで、 スティック・クイックスロット・コーチマークはコードが直接描くため、テーマをいくら替えても形は変わらない。 そこで gohud は、テーマ・スキン・アイコンをひとまとまりで選ぶプリセットを用意している。

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # テーマ・スキン・アイコンがまとめて替わる

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

中世コレクション

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

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

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

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

同じシート、違う見た目

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

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

スキンが受け持つのは、スティック、クイックスロットの面、コーチマークのリング、チップ、スケルトン、 アラート、区切り線、セクション見出しだ。継承して、変えたいものだけを上書きすればよい。

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

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

ウィジェット

部品を一覧で。ひとつずつ詳しく →

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

フォームとリスト

ゲームで実際に使う形

画面の上に重ねる

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

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

python3 addons/gohud/tools/check_contrast.py

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

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