UI Toolkit を使用してUIを作成してみる – Unity

UnityでUIを作成する方法

ユーザーインターフェース（UI） – Unity Document 6.0

UI構築には、3つの方法があるようですね。

• UI Toolkit
• Unity UI (uGUI) パッケージ
• IMGUI

UI Toolkitは最新で推奨されるものです。が、他のシステムもまだ使用するシーンはあるようですね。

今回は、UI Toolkit を使用してみます。

UIを表示してみる

UI Toolkit を使っていきましょう。

簡単に3行で説明すると

• UI Document を追加する（Game Object）
• Editor Windows を追加する（Asset）
• 必要ならスクリプトを追加する

UI Document

「UI Document」 は、Hierarchy Window から追加します。

Hierarchy -> UI Toolkit -> UI Document

Source Asset には、次に作成する”uxml”ファイルをアタッチします。

Editor Window

Editor Windowを追加するとUIのテンプレートが生成されます。便利なので使ってみましょう。

追加手順

保存フォルダとして、Assetsフォルダに、”UI”フォルダを作成しました。

「Editor Window」は、Project Window から追加します。

UI Toolkit -> Editor Window

「UI Toolkit Editor Window Creator」ウィンドウが開きます。

• Locationは、”Assets/UI”としました。
• UXML、USSはチェックONです。
• C#の欄に”MainUI”と入力しました。
• ActionはCreate files only です。
• Confirmを押します。

ファイルが3つ作成され、”MainUI”と名称がついたWindowが1つ開きます。なんかUIっぽいですね。

MainUI Window

開いた「MainUI」を閉じてしまっても、次の場所から開き直すことができます。

Window -> UI Toolkit -> MainUI

生成ファイル

先ほど3つのファイルが生成されました。

• MainUI.cs …制御コード。Editor用です。
• MainUI.uss …cssです。
• MainUI.uxml …xmlで定義されています。

どうやら、HTML、CSSライクな仕様のようですね。

MainUI.cs

C#のファイルですね。スクリプトファイルですね。

これは、Editor用であって、Runtime用ではありません。初心者にはちょっと混乱ポイントですね。

Scene用ではなく、先ほど開いた「MainUI」ウィンドウを制御するためのコードです。

Sceneで使用されるRuntimeの制御用として必要な場合は、別途スクリプトファイルを作成する必要があります。

MainUI.uss

MainUI.uxml で使用されるcssファイルです。

MainUI.uxml

UIです。Wクリックすると、UI builderが開きます。ビジュアルエディターです。

適当なコードエディターで開くと、xmlで定義されていることがわかります。

UI Documentとuxmlの結び付け

UI Document の Source Asset に、MainUI.uxml を指定しましょう。

UI確認

Gameウィンドウでも確認できます。

Playしても確認できます。

UIを編集してみる

UXMLファイルを編集します。

ボタンとラベルを追加してみましょう。

UI構築

MainUI.uxmlファイルを開きましょう。uxmlファイルをWクリックしてください。

UI Builder が開きます。

左下にLibraryがあるのでラベル1個とボタン2個を追加してみましょう。

各要素に名称を与えます。要素を選択して、Inspectorから変更できます。

• label1
• btn1
• btn2

CSS

Inlined Styles

要素を選択したときのInspectorで要素のデザインを変更できます。

Inlined Styles に沢山プロパティがありますね。

ussファイル

cssファイルですね。

StyleSheetsペインの入力欄から新しくcss-classを作成することが可能です。

要素ではなく、css-classを選択しているときのInspectorからデザインの変更ができます。

デザインが決まったら要素にアタッチしましょう。css-classを要素にD&Dで簡単にアタッチできますね。

スクリプトを書いてみよう

以下が準備できました。

• UI Document ( uxmlをアタッチ済み )
• uxmlファイル作成済み
• UIのデザイン調整済み

UIにはボタンがあります。

ボタンを押したらラベルのテキストが変わるというコードを実装します。

using UnityEngine;
using UnityEngine.UIElements; // add

// UIのボタンをおしたらラベルのテキストを変更するスクリプト
// btn1を押すと、label1のテキストが「btn1が押されました！」に変わる
// btn2を押すと、label1のテキストが「btn2が押されました！」に変わる

public class MainUIscene : MonoBehaviour
{

    private void OnEnable()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        var btn1 = root.Q<Button>("btn1");
        var btn2 = root.Q<Button>("btn2");
        var label1 = root.Q<Label>("label1");

        btn1.clicked += () => label1.text = "btn1が押されました！";
        btn2.clicked += () => label1.text = "btn2が押されました！";
    }
}

UnityEditorでPlay実行してみましょう。

無事にラベルのテキストが変わりましたね。

〜おわり〜