JINMUSOFTWARE

JINMUSOFTWARE

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

公開日: / 最終更新日: / カテゴリ: Unity / 投稿者: matsuda
Unity UI

UnityのUIとは

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

公式ドキュメントによるとUI構築には3つの方法があるようです。

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

UI Toolkit は最新の仕組みでありで推奨されています。しかし他のシステムもまだまだ使用するシーンはあるようですね。

今回は、UI Toolkit に挑戦します。

UI Toolkit は、HTML、CSSライクな仕様でUIを構築するようです。

UI Toolkitの準備

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

使い方を簡単に3行で説明すると…

  • UI Document を追加する（GameObject）
  • UXMLファイルを追加する（Asset）
  • Asset を GameObject にアタッチする

UI Document の追加

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

Hierarchy -> UI Toolkit -> UI Document
UIDocument

Inspectorを確認するとSource Asset があります。ここには次に作成する”uxml”ファイルをアタッチします。

UIDocumentオブジェクトを追加すると、「UI Toolkit」フォルダが作成されて「PanelSettings.asset」アセットが自動追加されます。

UI Document (UXML) の追加方法

.uxmlファイルを追加する方法はいくつかあるようです。

  • 「UI Document with Asset」を使用して、GameObjectを追加する
  • 「UI Document(UXML)」を使用して、アセットを単体追加する
  • 「Editor Window」を使用して、アセットを追加する

UI Document(UXML)の追加

ここではシンプルに「UI Document(UXML)」を単体追加してみましょう。

“UI”という名のフォルダを作成しておきます。

create -> UI Toolkit -> UI Document (UXML)

名称は「MainUI」としてみました。拡張子は自動で「.uxml」となります。

表示部品の無い空っぽのUI定義書が作成されました。

UXMLファイルのアタッチ

UIDocument の Source Asset に .uxml ファイルをアタッチしましょう。

uxmlのアタッチ

確認

準備したもの。

  • UIDocument(Game Object)
  • PanelSettings.asset(Asset)…自動追加
  • MainUI.uxml(Asset)

準備は整いました。次から中身のUIを作成していきましょう。

Gameタブにはまだ何も表示されていませんよね？

UIアセットの作成

中身を作っていきましょう。

以下を準備します。

  • MainUI.uxml …UI構造の定義
  • MainUI.uss …css
  • MainUI.cs …動作スクリプト

ファイル名は何でもいいと思いますが同じにしてみました。

拡張子に癖がありますね。
　Unity CSS -> uss
　Unity XML -> uxml

MainUI.uxml

UIを定義します。

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

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

MainUI.uss

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

MainUI.cs

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

UI BuilderでUIを構築してみる

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

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

UI構築

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

「UI Builder」が開きます。

UI Builder

1：CSS

  • 「＋」記号から新しいussファイルを作成できます
  • 入力欄からは新しいcss-classを追加できます

2：追加した部品（コントロール）のリスト

  • ライブラリから追加した部品がここにリストされます

3：ライブラリ

  • ラベルやボタンなどの部品のライブラリです

部品の追加

では、左下のLibraryから、ラベル1個、ボタン2個を追加してみましょう。

Wクリックで追加できますね。

部品を追加するとリアルタイムでGameタブの画面も更新されます。

部品の「名前」を変更しましょう。Inspectorの上段にある名前欄から変更できます。

  • label1
  • btn1
  • btn2

デザインの変更

デザインも少し変更してみましょう。

「+」記号からussファイルを追加します。名称はMainUIとしました。

次にcss-classを追加します。「Add new selector…」と表示されている場所に、「.good-design」と入力します。このcss-classのInspectorを調整してデザインを整えます。

fonst-size: 25、Align – Align Self – flex-start と定義しました。

このcss-classを各要素にドラッグ＆ドロップで割り当てます。

UI Builderでデザイン

CSSについて

Inlined Styles

要素のInspectorから簡単にデザインを変更できます。uxmlファイルのほうに記述されます。

ussファイル

cssファイルです。

StyleSheetsペインの入力欄から新しくcss-classを作成することが可能です。このcss-classもInspectorから簡単にデザインの変更ができます。

css-classのアタッチ

デザインが決まったら要素にアタッチしましょう。

D&Dで簡単にアタッチできます。HTML要素のInspectorにある「Style Class List」からも追加できます。

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

C#スクリプトファイルを作成してUIDocumentにアタッチします。

Create -> MonoBehaviour Script

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

MainUI.cs
using UnityEngine;
using UnityEngine.UIElements; // add

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

public class MainUI : 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が押されました！";
    }
}

スクリプトを「UI Document」 にアタッチしよう

Hierarchy Window に「UIDocument」がありますね。

C#スクリプトを「UI Document」 にアタッチします。

動作確認

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

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

ボタンを押してラベルのテキストが変わった
ボタンを押してラベルのテキストが変わった

補足

初心者の覚書です。

  • Editor Window を追加すると、uxml、uss、csファイルがテンプレートとして生成されます。これをそのまま流用できるが、csファイルに出力されたコードはEditor用です。Unityの世界では、Runtime用とEditor用の区別があるようだ。
  • Editor Window 作成するとき、Project WindowがAssetsにフォーカスがある場合、「Editor」というフォルダが作成される。「Editor」というフォルダ名は特別なもので、Unity Editor用のものと認識される様です。EditorフォルダはBuildに含まれないかもしれません。名前の通り「Editor Window」とはEditor用なのです。
  • Unityの達人は、Unity画面を改造するだけでなく、右クリックの改造もして開発効率化を高めるようです。
  • 生成されたuxmlファイルをすぐにVisual Studioで開くと改行コードの警告が発生することがある。私の環境がWindowsなのが原因かな？
  • ussファイルは、UI Builderから追加できたが、アセットのCreateからも追加が可能。Style Sheet(USS)のことです。生成された初期コードに若干の違いあり。UI Builderから生成したussファイルには「:root」があり、アセットから追加した場合は、「VisualElement{}」があった。
  • PanelSettings.assetは、基礎となるような設定をするところのようだ。

環境

Unity Version: Unity 6.4 (6000.4.0f1)

OS: Windows11

〜おわり〜