Version: 2023.2
言語: 日本語
フォールバックフォント
移行ガイド

このページでは、UI Toolkit で作ることができるサンプルを掲載しています。

レイアウト

トピック 説明 
相対位置決めと絶対位置決め C# の例 C# で UI をレイアウトするには、相対配置と絶対配置を使用します。

リストビューとツリービュー

トピック 説明 
リストビューとツリービューの作成 ListView、TreeView、MultiColumnListView、MultiColumnTreeView を使用して、リストビューとツリービューを作成します。
複雑なリストビューの作成 ListView を使用して、文字のリストを持つカスタムエディターウィンドウを作成します。
リストビューのランタイム UI を作成する ListView を使って、簡易なキャラクター選択画面のランタイム UI を作成します。
Create a drag-and-drop list and tree views between windows Use ListView, TreeView, and MultiColumnListView to create a drag-and-drop UI between windows.

スクロールビュー

トピック 説明 
ScrollView 内でコンテンツを折り返す スクロールビュー内でコンテンツを折り返すには、スタイルを使用します。

ラベル

トピック 説明 
Create a tabbed menu Label を使用してタブメニューを作成します。

ポップアップウィンドウ

トピック 説明 
ポップアップウィンドウの作成 UnityEditor.PopupWindow を使ってポップアップウィンドウを作成します。

トグル

トピック 説明 
Toggle を使って条件付き UI を作成する Toggle を使用してエディターウィンドウに条件付き UI を作成します。

カスタムコントロール

トピック 説明 
2 つの属性を持つカスタムコントロールの作成 2 つの属性を持つ単純なカスタムコントロールを作成し、カスタムコントロールを UXML と UI ビルダーに公開します。
スライドトグルカスタムコントロールの作成 スイッチのようなトグルカスタムコントロールを作成します。
放射状の進捗インジケーターを作成する 0 から 100 までの浮動小数点数を表示するカスタムコントロールを作成します。
バインド可能なカスタムコントロールの作成 double データ型のプロパティにバインドするカスタムコントロールを作成します。
カスタムコントロール用のカスタムスタイルを作成する USS から 2 色を読み取り、それを使ってテクスチャを生成するカスタムコントロールを作成します。
Create an aspect ratio custom control Create a custom control that maintains a specific aspect ratio.

遷移

トピック 説明 
カスタムエディターウィンドウで遷移を作成する 3 つのラベルをもつカスタムエディターウィンドウを作成し、それらにマウスオーバーすると回転したりやスケールしたりします。
遷移イベントの作成 ボタンとカラーパレットでカスタムエディターウィンドウを作成します。
ループする遷移の作成 ヨーヨーのループと A から B へのループのアニメーションを作成します。

ドラッグアンドドロップ

トピック 説明 
カスタムエディターウィンドウ内にドラッグアンドドロップ UI を作成する 複数のスロットを作成し、どのスロットにもドラッグできるオブジェクトを 1 つ作成します。
エディターウィンドウ間をドラッグアンドドロップできる UI を作成する カスタムエディターウィンドウを 2 つ作成し、1 つのウィンドウからもう 1 つのウィンドウにアセットをドラッグします。

Basic Editor binding examples

トピック 説明 
C# スクリプトでバインディングパスによってバインドする bindingPath を使って、カスタムエディターウィンドウのゲームオブジェクトの名前を変更するバインディングを作成します。
バインディングパスなしでバインドする BindProperty() を使って、カスタムエディターウィンドウのゲームオブジェクトの名前を変更するバインディングを作成します。
UXML と C# でバインドする UXML でバインディングの作成とバインディングパスの設定を行い、C# の Bind() でバインドします。
Inspector でバインディングを作成する カスタム Inspector、カスタムエディター、およびシリアル化されたオブジェクトをバインドするバインディングを作成します。
ネスト状のプロパティにバインドする UXML の BindableElement の binding-path 属性を使用して、フィールドをSerializedObject のネスト上のプロパティにバインドします。
UXML テンプレートへバインドする UXML テンプレートを使って、バインディングの作成とバインディングパスの設定を行います。
バインドされたプロパティが変更されたときにコールバックを受信する シーン内のゲームオブジェクトの名前にバインドする TextField を持つカスタムエディタウィンドウを作成します。
バインドされたプロパティが変更されたときにコールバックを受信する 2 つのフィールドを持つカスタム Inspector を作成し、フィールドの値が特定の範囲外の場合にユーザに警告を表示します。

Advanced Editor binding examples

トピック 説明 
ListView を使ってリストへバインドする トグルのリストを作成し、そのリストをオブジェクトの基礎となるリストにバインドします。
ListView を使わないでリストへバインドする ListView の代わりに配列を使ってリストにバインドするバインディングを作成します。
カスタムコントロールのバインド カスタムコントロールを作成し、ネイティブの Unity タイプにバインドします。
カスタムコントロールとカスタムデータ型のバインド カスタムコントロールを作成し、カスタムデータ型にバインドします。

ベクター UI の例

トピック 説明 
エディターとランタイム UI で円グラフを作成する Vector API を使用して円グラフを作成します。
Vector API を使用して放射状の進捗インジケータを作成する Vector API を使用して、放射状進捗インジケーターカスタムコントロールを作成し、ランタイム UI にカスタムコントロールを加えます。

Runtime UI examples

トピック 説明 
ランタイム UI について Use this example to get started with runtime UI.

Runtime data binding examples

トピック 説明 
Get started with runtime data binding Use this example to get started with runtime data binding.
Create a custom binding to bind USS selectors Learn how to create a custom binding to bind USS from an example.
フォールバックフォント
移行ガイド