C# スクリプトによる UI の構築

技術的なユーザーは、C# スクリプトで UI のレイアウトを直接定義できます。

USS ファイルでコントロールの見た目を定義することや、C# スクリプトでコントロールのスタイルプロパティを変更すること ができます。

コントロールはインタラクティブで、変更可能な値を表します。例えば、FloatField は Float 値を表します。C# スクリプトを作成することで、コントロールの値の変更、コールバックの登録、またはデータバインディングの適用を行うことができます。

C# スクリプトで UI にコントロールを追加する

UI 内でコントロールを使用するには、ビジュアルツリー にコントロールを追加します。

以下の例では、Button コントロールを既存のビジュアルツリーに追加します。

var newButton = new Button("Click me!");
rootVisualElement.Add(newButton);

UI 階層にコントロールを加える場合、レイアウトエンジン が自動的にサイズ調整と位置調整を行います。ビジュアル要素のサイズや位置をオーバーライドする こともできます。

コントロールの値の変更

コントロールの値にアクセスしたり、コントロールの値を変更したりするには、その value プロパティを使用します 。

以下の例では、Toggle コントロールと Button コントロールを作成します。ボタンをクリックすると、トグルの値が反転します。

// Create a toggle and register callback
m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
rootVisualElement.Add(m_MyToggle);

// Create button to flip the toggle's value
Button button01 = new Button() { text = "Toggle" };
button01.clicked += () =>
{
    m_MyToggle.value = !m_MyToggle.value;
};
rootVisualElement.Add(button01);

特定のコントロールのプロパティの詳細については、UI Toolkit ビルトインコントロールのリファレンス を参照してください。

コールバックの登録

value プロパティを持つコントロールは、値が変更されるとイベントを送信します。このイベントを受け取るコールバックを登録することができます。

以下の例では、Toggle コントロールを作成し、コールバックを登録します。

// Create a toggle and register callback
m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
m_MyToggle.RegisterValueChangedCallback((evt) => { Debug.Log("Change Event received"); });
rootVisualElement.Add(m_MyToggle);

コールバックとイベントの詳細は、イベントの処理 を参照してください。

データバインディングの適用

コントロールは、オブジェクトやシリアル化されたプロパティに紐づける (バインディング) ことができます。例えば、 FloatField コントロールは、MonoBehaviour に属する public float 変数に紐づけできます。コントロールがプロパティに紐づけられると、自動的にそのプロパティの値を表示します。コントロールに変更を加えると、プロパティの値が更新されます。

同様に、コードによってプロパティの値を変更すると、UI には更新された値が表示されます。この双方向のつながりは、カスタムの Inspector ウィンドウを作成する場合に便利です。

データバインディングに関する詳細は、SerializedObject のデータバインディング を参照してください。

すべてのコントロールがバインド可能というわけではありません。ビルトインコントロールのリストと、バインディングをサポートしているかどうかについては、UI Toolkit ビルトインコントロールに関するリファレンス を参照してください。

コントロールの読み取り専用の子のプロパティへのアクセス

一部のコントロールには 読み取り専用の子要素 があります。例えば、ListView コントロールには子の ScrollView があります。UQuery を使用して子のプロパティにアクセスし、その値をオーバーライドできます。

以下の例では、子の ScrollView の mouseWheelScrollSize プロパティをオーバーライドして、ListView コントロールのスクロールスピードを変更します 。

var scrollView = listView.Q<ScrollView>();
scrollView.mouseWheelScrollSize = 55;

コントロール状態の管理

コントロールには、C# スクリプトで管理できるさまざまな状態があります。例えば、コントロールを有効にしたり無効にしたりできます。

以下の例では、Toggle コントロールと Button コントロールを作成します。ボタンをクリックすると、トグルが無効になります。

// Create a toggle.
Toggle myToggle = new Toggle("A Toggle");

// Create a button to disable the toggle.
Button button01 = new Button();
button01.text = "Button01";
button01.RegisterCallback<ClickEvent>(evt =>
{
    myToggle.SetEnabled(false);
});

擬似クラス を使用して、USS で状態が変化した時の視覚的なフィードバックの変化を実装することもできます。例えば、トグルを無効にするには、以下のように、disabled 疑似状態を持つセレクターを使用します。

.unity-button:disabled
{
    background-color: #000000;
}

追加リソース

• UXML による UI の構築
• エレメントを使う