Unity UI Toolkitに触れてみた

こんにちは。ファブテラスいわて役員の川田将宏です。
新学期になり、暖かく、過ごしやすい季節になりました。

さて、今回は紹介するのは、Unity version2021.2でランタイムサポートが追加された
「Unity UI ToolKit」について触れていきたいと思います。

Unity UI Toolkitとは

Unity UI Toolkitは、GUIを開発するための機能であり、ゲームやアプリケーションのUIをUnityで直接作成することができるようにした機能です。
UI Toolkitは、WebのHTMLやCSSなどの技術に着想を得て、UI BuilderやUI Debuggerなどのツールを使って、より素早く制作に入れるようになります。

説明では理解しづらい点もあると思いますので
さっそく試していきましょう。

それと、今回の内容はあくまで、デザインの構成についてのみになります。
Buttonのクリック処理などについては今回は触れません。ご了承下さい。

UI Toolkitを試してみる

実行環境

  • MacBook Pro (macOS Big Sur バージョン 11.5.2)
  • Unity Version 2021.2.18f1

下準備

ヒエラルキー上で、右クリック→Create Emptyで空のオブジェクトを作成し「UIObject」と名付けます。
そして、「UIObject」にコンポーネントを追加します。
Add Component→UI Toolkit→UI Document
すると下のような画面になると思います。

UI Documentを追加した「UIObject」

UI Documentは「Panel Settings」と「Source Asset」の2つの要素を必要とします。
インスペクター上でも「Panel Settings Assetを作ってね」という文が表示されていますので、それを作成していきます。

プロジェクト上のAssetから
Create→UI Toolkit→Panel Settings Asset
でPanel Settingsを作成されますので、「SamplePanelSettings」と名付けます。

作成手順 Panel Settings

続いて、Source Assetも作成していきます。
プロジェクト上のAssetから
Create→UI Toolkit→UI Document
でPanel Settingsを作成されますので、「SamplePanelSettings」と名付けます。

作成手順 Source Asset

上記2つが作成できたら、「UIObject」のUI Documentにセットします。
セットができたら下のような画面になると思います。

設定が完了した「UIObejct」

これで準備が整ったので、早速UI Toolkitを使ったUIの作成をしていきたいと思います。

UI ToolkitによるUI作成

先程作成した「Sample」という名前のAssetをダブルクリックしてください。
すると、下の画像のようなUI Builderというウィンドウが表示されます。

UI Builderウィンドウ

こちらを使って、UIを作成していきます。
※注意:UI Builderを使う場合は、保存を定期的にするようにしましょう。

今回は下の画像のようなUIを完成図として進めていきます。

今回の完成図

今回は、キャンバスサイズを1280×720に設定し、UI画面を作成していきます。
キャンバスサイズはUI Builderウィンドウにて、Sample.uxml要素を選択することで
インスペクター上にキャンバスサイズが表示されるので、そちらから変更します。

Sample.uxml要素

それでは必要となる要素をそれぞれ作り出してみましょう。
下の画像を確認してください。

Labelで作られた要素

赤い枠で囲まれた部分はLabelという要素で作られたものになります。
こちらはUI Builderウィンドウ左下にあるControlという欄から
画面中央のViewportにあるSample.uxmlにドラッグアンドドロップすることで追加できます。
すると、UI Builderウィンドウ左にあるヒエラルキー欄にLabelという要素が追加されたことが確認できると思います。

このように追加したい要素を左下の欄からドラッグアンドドロップしていきます。

そして、追加したときに要素に名前をつけていきましょう。
下の画像は、ゲームのタイトルにあたる要素の例です。

Label要素の例

Nameは要素自体の名前を決めることができます。
後に紹介するのですが、デザインを変えるときに名前を登録しておくことで
今回の例では、「GameTitle」のみにデザインの変更を加えることができます。
また、下のText欄は、表示したい文字を自由に変更することができます。
ボタン要素も同じようになっているので、そちらを変更していきます。

すると、下の画像のようになったと思います。

要素をすべて追加したあとのUI Builder画面

先程説明していなかったもので、VisualElementというものがあります。
今回は、そちらを要素をまとめるものとして扱っていきます。
今回の例では、「Container」と「BtnGroup」がそれにあたります。

今回の例では、画面の中心にくる
「GameTitle」とボタン要素をまとめた「BtnGroup」を「Container」にまとめました。

ここでは、UI Builderを使って要素を追加する方法を説明しました。
続いて、スクリプトによる追加方法を説明します。

UI Builderを開くところまでは同じです。
UI Builderを開いたら、画面したの方にある、UXML Previewという欄があります。
それをドラッグすることができるので、ある程度移動させておきます。
UXML Preview欄の右にあるボタンを押します。下の画像を参考に開いてください。

UXML Preview欄の位置
UXML Previewの中身
ボタンの位置

すると、下の画像のようなスクリプトが表示されると思います。
私はVisualStudioを利用しているため、そちらで説明していきます。

Sample.uxml

XMLやHTMLに触れたことがある人は既視感があるかもしれません。
最初に説明したとおり、UI ToolkitはWeb技術から着想しているので
感覚としては、同じようにデザインをすることができます。

それでは、下の画像のようにLabelを追加してみましょう。

Sample.uxml 修正

Label要素コピー用↓

<ui:Label text="UIBuilder Test" name="GameTitle" />

赤枠がUXML Previewのスクリプトをコピーして貼り付けたもので、
青枠で囲ったところが追加したところになります。

こちらで、保存していただき、UI Builderの方を確認してみると、下の画像のように結果が反映されていることがわかります。

UXMLによるUIの追加

同じようにボタンや他の要素も追加することができます。

それでは、続いてデザインの追加方法を2つ説明します。
UI Builder上で編集する方法と
Style Sheetを作成する方法です。

今回は、Style Sheetを使った方法について説明します。

UI Builder左上のStyleSheetsにある+ボタンから、Create New USSを押し、「SampleUSS」と名付けます。

StyleSheetsの追加

すると、Sample.uxml上で、2行目あたりに

<Style src="project://database/Assets/SampleUSS.uss?..." />

といったコードが追加されていることが確認できます。
これで、SampleUSS.ussにデザインを追加した際に、対応する要素のデザインが変更されるようになります。

それでは、デザインを作成していくために、SampleUSS.ussを変更していきます。

UXML Previewの隣にある、USS Previewの右上のボタンからSampleUSS.ussを開きます。

SampleUSS.ussの開き方

そして、以下のコードを貼り付けてください。

/* SampleUSS.uss */

.left-top {
    position: absolute;
    left: 32px;
    top: 32px;
}

.right-top {
    position: absolute;
    right: 32px;
    top: 32px;
}

.left-bottom {
    position: absolute;
    left: 32px;
    bottom: 32px;
}

.container {
    margin: auto;
}

#GameTitle {
    font-size: 72px;
}

#BtnGroup {
    top: 50px;
}

CSSを学習している人は、上記のコードが指す意味を理解できると思います。
CSSの学習をしたことのない人に簡単に説明をすると
「.left-top」「.right-top」「.left-bottom」クラスは、絶対値による座標の指定をしています。
「.container」クラスは、要素が中心に寄るようにしているものです。
「#GameTitle」はフォントサイズを72pxに指定しています。
「#BtnGroup」は現在の座標から50px分の余白を要素の上に追加しています。

ここで、「.」がついているものと、「#」がついているものがあるのがわかると思います。
これは、最初の方にお話した、名前をつけたものの先頭には「#」がついています。
「.」がついているものは、クラスと呼ばれ、これはどの要素にも追加することができ、汎用的に扱えるデザインと考えて問題ありません。

上記のデザインを保存すると、下の画像のようになります。

SampleUSS.ussが反映された結果

先頭に「#」がついたものは変更された内容が反映されていることがわかります。
では、「.」のついたデザインを追加していきたいと思います。

以下のようにデザインを追加していきます。

  • Version:.left-top
  • UserID:.left-bottom
  • Copyright:.right-top
  • Container:.container
要素のインスペクター

追加方法は、UI Builderからデザインを追加したい要素を選択します。
そして、右側にあるインスペクター上のStyleSheetの入力欄に上記のクラス名
「left-top」
「left-bottom」
「right-top」
「container」
それぞれを入力し、Add Style Class to Listを押します。すると、下の画像のようにクラスが追加されます。

追加されたクラス(濃い部分)
#Versionが移動する

このようにして、他の要素にもクラスを追加していきます。
また、最初に説明したUI Builder上でデザインを編集する場合は
インスペクター上のInlined Stylesの各項目を調整することで、デザインすることができます。

UI Builder上で編集できる部分

すべてのクラスを指定した要素に追加すると、下の画像のようになります。

完成したデザイン

これで、今回のゴール地点につきました。
この状態で保存し、Gameウィンドウを確認すると、きちんと反映されていることが確認できます。

また、ウィンドウサイズを変更してもフレックスに対応していることも確認できます。

1280×720
1920×1080
640×480
16:10アスペクト
16:9アスペクト

今回は、GUIを作成できるUnity UIToolkitを試してみました。
まだまだUnity Toolkitを十分に説明できていませんが、作成したUIにボタン処理を追加したり
アニメーションを追加したりなど、まだまだできることは多いです。

しかし、GameObjectと比べ、自由度が低い点や、ボタンの長押しの処理など
まだまだ課題があるようにも思えました。

また、UIを作成する場合は、Adobe XDを用いたほうが直感的に素早くデザインを作成することができます。
私もUIの作成はAdobe XDをよく使います。

まだバージョンが浅いため、これからアップグレードしていくと思われるUnity UI Toolkitを試すにはいい機会だと思い今回は紹介させていただきました。

次回はGameMaker Studio2について触れていきたいと思います。
購入しなくても、試用ライセンスもあるので、ぜひGameMaker Studio2に触れていただきたいと思います。

それでは次の記事で会いましょう。

前の記事

刺繍

次の記事

ロゴ刺繍