スライドトグルカスタムコントロールの作成

Version: 2023.2+

この例では、“スイッチのような” トグルを作成する方法を説明します。

例の概要

この例では、マウス、キーボード、ゲームパッド、その他のデバイスでユーザーが切り替えできるトグルというカスタムコントロールを作成します。このコントロールには、トグルが何を表しているかを説明するラベルも設定します。

You can find the completed files that this example creates in this GitHub repository.

要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。

• UI Builder
• ビジュアルツリー
• UXML
• USS
• イベントの処理

Create the slide toggle class

Create the slide toggle class with a C# script.

1. Create a Unity project with the 3D template. A 3D template has a better visual effect for this example. However, you can use any template.
2. ファイルを保存するために slide-toggle という名前のフォルダーを作成します。
3. slide-toggle フォルダーに、SlideToggle.cs という名前の C# スクリプトを作成します。
4. テキストエディターで SlideToggle.cs スクリプトを開き、そのコンテンツを下のコードに置き換えます。

[!code-cs]

Style the slide toggle

Style the slide toggle with a USS file.

1. slide-toggle フォルダーに、SlideToggle.uss という名の USS ファイルを作成します。
2. SlideToggle.uss をテキストエディターで開き、そのコンテンツを以下のように置き換えます。`

[!code-css]

UI Builder を使って UXML ファイルへスライドトグルを追加する

1. slide-toggle フォルダーに、SlideToggleUsage.uxml という名前の UI ドキュメントを作成します。
2. UI Builder で SlideToggleUsage.uxml を開きます。
3. UI Builder で、Library > Project > MyUILibrary を選択します。
4. SlideToggle を Hierarchy ウィンドウにドラッグします。
5. Inspector で、Label にトグルのラベルテキストを入力します。
6. In the StyleSheets section, add SlideToggle.uss as the existing USS.
7. UI Builder を保存して終了します。

スライドトグルのテスト

1. サンプルシーンで、UI Document ゲームオブジェクトを作成します。
2. UI Document を選択し、SlideToggleUsage.uxml を Inspector の Source Asset フィールドにドラッグします。
3. 再生モードにします。トグルをクリックする、Enter キーを押す、Return キーを押す、または、Space キーを押す動作を行うと、トグルを前後に切り替えることができます。

その他の参考資料

• カスタムコントロールの作成
• ビルトインの Unity 変数
• BEM Standard