staff

HOME
staff
Unity UI Toolkitに触れてみた

2022年4月4日 / 最終更新日時 : 2022年4月4日 KawadaMasahiro staff

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

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

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

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

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

UI ToolkitによるUI作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Label要素コピー用↓

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

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

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

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

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

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

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

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

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

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

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

UXML Previewの隣にある、USS Previewの右上のボタンから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分の余白を要素の上に追加しています。

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

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

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

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

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を押します。すると、下の画像のようにクラスが追加されます。