ゲーム UI
このページは自動翻訳されており、誤りが含まれる場合があります。誤りを見つけた場合は「このページを編集」リンクからご協力ください。
Turian のゲーム UI は Web や Unity の UI Toolkit のように書きます。.ui XML ドキュメントが要素を、.uss スタイルシートが見た目を記述し、C# の UiController やデータバインディングが動きを与えます。描画は Turian Studio と同じツールキット Guinevere が行います。
ドキュメントを画面に置く
Assets/UI/menu.uiとAssets/UI/theme.uss(下記)を作ります。- ノードを追加し、Add Component → UI → UI Document。
menu.uiを Document フィールドにドロップします。
| プロパティ | 意味 |
|---|---|
Document |
描画する .ui ドキュメント。 |
StyleSheets |
ドキュメント自身のものに加えて適用する .uss。 |
Mode |
ScreenSpaceOverlay(シーンの上に描画)または WorldSpace(シーン内のクアッドに描画)。 |
SortOrder |
画面空間ドキュメント間の描画順。 |
ScaleMode、ReferenceResolution |
ピクセル一定、または基準解像度から画面に合わせて拡大縮小。 |
PanelSize |
ワールド空間パネルのピクセルサイズ。 |
ワールド空間のドキュメントは Studio のビューと CLI の描画で表示されますが、エクスポートしたゲームではまだ描画されません。クリック可能にするには UI Raycaster コンポーネントを追加します。
ドキュメント
<?xml version="1.0" encoding="utf-8"?>
<UI xmlns="https://turian.dev/ui" controller="Usercode.MainMenu">
<Style src="Assets/UI/theme.uss" />
<VisualElement name="root" class="screen">
<Label class="title" text="{Title}" />
<Button name="play" text="Play" click="OnPlay" />
<Toggle name="music" label="Music" value="{Music, mode=TwoWay}" />
<Button name="quit" text="Quit" click="OnQuit" />
</VisualElement>
</UI>
- ルートは常に
<UI>です。<Style>シート、任意の<Template>、1 つのビジュアル要素を含みます。 - 共通の属性:
name(一意な id)、class(スタイルクラス)、style(インライン宣言)、tooltip、enabled。 - 葉の要素の中のテキストはその
textになります:<Label>メインメニュー</Label>。
要素
| 要素 | 備考 |
|---|---|
VisualElement |
汎用コンテナー。flex-direction、gap、サイズ、配置でレイアウトします。 |
Label |
テキスト。 |
Button |
text。click を発生。 |
Image |
src、width、height。 |
ImageButton |
image-normal、image-hover、image-pressed、nine-slice="l,t,r,b"。click を発生。 |
TextField |
value、placeholder。value-changed を発生。 |
Toggle |
value、label。value-changed を発生。 |
ScrollView |
子を縦にスクロール。 |
Tabs / Tab |
ページごとに <Tab header="…">。changed を発生。 |
状態を持つコントロール(TextField、Toggle、Tabs)には name を付けて、フレーム間で状態が保たれるようにします。
テンプレートとリスト
<Template name="StatRow">
<VisualElement class="row">
<Label text="{label}" />
<Label binding-text="{path}" />
</VisualElement>
</Template>
<Instance template="StatRow" label="Gold" path="Player.Gold" />
<ScrollView>
<Repeat items="{Inventory}" as="item">
<Label binding-text="{item.Name}" />
</Repeat>
</ScrollView>
.uss によるスタイル
--accent: #4a90e2;
.screen { flex-direction: column; gap: 12; padding: 24; align-items: center; }
.title { font-size: 32; color: #ffffff; text-shadow: #000000 2 2; }
Button { width: 220; height: 44; border-radius: 8; background-color: #2a2f3a; }
Button:hover { background-color: var(--accent); }
#quit { background-color: #6b2b2b; }
- セレクター:
Type、.class、#name、*、Button.primaryのような複合、グループa, b。子孫・子の結合子はサポートしていません。 - 状態:
:hover、:active、:focus、:disabled。 - 変数:トップレベルで
--name: value;を宣言し、var(--name)で使います。 - レイアウト:
flex-direction、flex-wrap、flex-grow、gap、width/height(ピクセルまたは%)、最小・最大サイズ、padding、margin、align-items、justify-content、align-self。 - ボックス:
background-color、border-color、border-width、border-radius。 - テキスト:
color、font-size、font-family(プロジェクトの.ttf/.otfまたはシステムフォント)、text-outline、text-shadow、text-inner-shadow、text-gradient。
コードビハインドとデータバインディング
namespace Usercode;
public sealed class MainMenu : UiController
{
public string Title => "My Game";
public bool Music { get; set; } = true;
public void OnPlay() => Log.Logger.LogInformation("Play が押された");
public void OnQuit() => Log.Logger.LogInformation("Quit が押された");
}
- 引数のない public な
voidメソッドはすべてイベントハンドラーで、click、value-changed、changed、submit、activated、selection-changedから名前で参照されます。 - 属性の
{Path}は、コントローラー(または別のデータコンテキスト)のプロパティにバインドし、毎フレーム読み直されます — 変更通知は不要です。binding-text="{…}"が明示的な形式で、<Bindings>ブロックでまとめることもできます。 - モード:
OneWay(既定)、TwoWay(テキストフィールドとトグルが書き戻す)、OneTime。 - コンバーター:
{Health | percent}— 組み込みはnot、percent、thousands、upper、lower。独自のものはValueConverters.Register("name", converter)で登録します。 - 準備、毎フレームの処理、後始末には
OnBind、OnUpdate(float deltaTime)、OnUnbindをオーバーライドします。
ローカライズされたテキスト
ラベルのテキストはプロジェクトの文字列テーブルから自動的に参照されます。text-key で明示的なキーを指定できます。ローカライゼーション を参照してください。
ゲームなしでのプレビュー
CLI は GPU なしでドキュメントを PNG に描画し、JSON をデータとしてバインドします:
turian-cli ui --file Assets/UI/menu.ui --out menu.png --data '{"Title":"Preview","Music":true}'
解析エラーは問題のある XML の行と列を報告します。