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
すると下のような画面になると思います。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-11.40.52-1.png)
UI Documentは「Panel Settings」と「Source Asset」の2つの要素を必要とします。
インスペクター上でも「Panel Settings Assetを作ってね」という文が表示されていますので、それを作成していきます。
プロジェクト上のAssetから
Create→UI Toolkit→Panel Settings Asset
でPanel Settingsを作成されますので、「SamplePanelSettings」と名付けます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-11.08.42-1024x586.png)
続いて、Source Assetも作成していきます。
プロジェクト上のAssetから
Create→UI Toolkit→UI Document
でPanel Settingsを作成されますので、「SamplePanelSettings」と名付けます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-11.43.11-1024x587.png)
上記2つが作成できたら、「UIObject」のUI Documentにセットします。
セットができたら下のような画面になると思います。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-11.43.35.png)
これで準備が整ったので、早速UI Toolkitを使ったUIの作成をしていきたいと思います。
UI ToolkitによるUI作成
先程作成した「Sample」という名前のAssetをダブルクリックしてください。
すると、下の画像のようなUI Builderというウィンドウが表示されます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-12.08.04-1024x586.png)
こちらを使って、UIを作成していきます。
※注意:UI Builderを使う場合は、保存を定期的にするようにしましょう。
今回は下の画像のようなUIを完成図として進めていきます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-15.08.47-1024x578.png)
今回は、キャンバスサイズを1280×720に設定し、UI画面を作成していきます。
キャンバスサイズはUI Builderウィンドウにて、Sample.uxml要素を選択することで
インスペクター上にキャンバスサイズが表示されるので、そちらから変更します。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-13.41.39-1024x586.png)
それでは必要となる要素をそれぞれ作り出してみましょう。
下の画像を確認してください。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-15.08.47-1-1024x578.png)
赤い枠で囲まれた部分はLabelという要素で作られたものになります。
こちらはUI Builderウィンドウ左下にあるControlという欄から
画面中央のViewportにあるSample.uxmlにドラッグアンドドロップすることで追加できます。
すると、UI Builderウィンドウ左にあるヒエラルキー欄にLabelという要素が追加されたことが確認できると思います。
このように追加したい要素を左下の欄からドラッグアンドドロップしていきます。
そして、追加したときに要素に名前をつけていきましょう。
下の画像は、ゲームのタイトルにあたる要素の例です。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-15.21.40.png)
Nameは要素自体の名前を決めることができます。
後に紹介するのですが、デザインを変えるときに名前を登録しておくことで
今回の例では、「GameTitle」のみにデザインの変更を加えることができます。
また、下のText欄は、表示したい文字を自由に変更することができます。
ボタン要素も同じようになっているので、そちらを変更していきます。
すると、下の画像のようになったと思います。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-15.12.00-1-1024x586.png)
先程説明していなかったもので、VisualElementというものがあります。
今回は、そちらを要素をまとめるものとして扱っていきます。
今回の例では、「Container」と「BtnGroup」がそれにあたります。
今回の例では、画面の中心にくる
「GameTitle」とボタン要素をまとめた「BtnGroup」を「Container」にまとめました。
ここでは、UI Builderを使って要素を追加する方法を説明しました。
続いて、スクリプトによる追加方法を説明します。
UI Builderを開くところまでは同じです。
UI Builderを開いたら、画面したの方にある、UXML Previewという欄があります。
それをドラッグすることができるので、ある程度移動させておきます。
UXML Preview欄の右にあるボタンを押します。下の画像を参考に開いてください。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-12.08.04-1-1024x586.png)
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-16.21.55-1024x206.png)
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-16.17.39.png)
すると、下の画像のようなスクリプトが表示されると思います。
私はVisualStudioを利用しているため、そちらで説明していきます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-15.39.48-1-1024x272.png)
XMLやHTMLに触れたことがある人は既視感があるかもしれません。
最初に説明したとおり、UI ToolkitはWeb技術から着想しているので
感覚としては、同じようにデザインをすることができます。
それでは、下の画像のようにLabelを追加してみましょう。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-16.27.46-1024x316.png)
Label要素コピー用↓
<ui:Label text="UIBuilder Test" name="GameTitle" />
赤枠がUXML Previewのスクリプトをコピーして貼り付けたもので、
青枠で囲ったところが追加したところになります。
こちらで、保存していただき、UI Builderの方を確認してみると、下の画像のように結果が反映されていることがわかります。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-16.30.12-1024x586.png)
同じようにボタンや他の要素も追加することができます。
それでは、続いてデザインの追加方法を2つ説明します。
UI Builder上で編集する方法と
Style Sheetを作成する方法です。
今回は、Style Sheetを使った方法について説明します。
UI Builder左上のStyleSheetsにある+ボタンから、Create New USSを押し、「SampleUSS」と名付けます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-16.42.59.png)
すると、Sample.uxml上で、2行目あたりに
<Style src="project://database/Assets/SampleUSS.uss?..." />
といったコードが追加されていることが確認できます。
これで、SampleUSS.ussにデザインを追加した際に、対応する要素のデザインが変更されるようになります。
それでは、デザインを作成していくために、SampleUSS.ussを変更していきます。
UXML Previewの隣にある、USS Previewの右上のボタンからSampleUSS.ussを開きます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-16.53.56.png)
そして、以下のコードを貼り付けてください。
/* 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分の余白を要素の上に追加しています。
ここで、「.」がついているものと、「#」がついているものがあるのがわかると思います。
これは、最初の方にお話した、名前をつけたものの先頭には「#」がついています。
「.」がついているものは、クラスと呼ばれ、これはどの要素にも追加することができ、汎用的に扱えるデザインと考えて問題ありません。
上記のデザインを保存すると、下の画像のようになります。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.29.38-1024x586.png)
先頭に「#」がついたものは変更された内容が反映されていることがわかります。
では、「.」のついたデザインを追加していきたいと思います。
以下のようにデザインを追加していきます。
- Version:.left-top
- UserID:.left-bottom
- Copyright:.right-top
- Container:.container
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.37.26-2-419x1024.png)
追加方法は、UI Builderからデザインを追加したい要素を選択します。
そして、右側にあるインスペクター上のStyleSheetの入力欄に上記のクラス名
「left-top」
「left-bottom」
「right-top」
「container」
それぞれを入力し、Add Style Class to Listを押します。すると、下の画像のようにクラスが追加されます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.43.52-2.png)
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.44.04-1-1024x576.png)
このようにして、他の要素にもクラスを追加していきます。
また、最初に説明したUI Builder上でデザインを編集する場合は
インスペクター上のInlined Stylesの各項目を調整することで、デザインすることができます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.47.38-361x1024.png)
すべてのクラスを指定した要素に追加すると、下の画像のようになります。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.51.39-1024x586.png)
これで、今回のゴール地点につきました。
この状態で保存し、Gameウィンドウを確認すると、きちんと反映されていることが確認できます。
また、ウィンドウサイズを変更してもフレックスに対応していることも確認できます。
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.55.21-1024x624.png)
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.55.36-1024x625.png)
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-22.56.07-1024x625.png)
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-23.00.28-1024x623.png)
![](https://fabterrace.site/wp/wp-content/uploads/2022/04/スクリーンショット-2022-04-03-23.00.38-1024x623.png)
今回は、GUIを作成できるUnity UIToolkitを試してみました。
まだまだUnity Toolkitを十分に説明できていませんが、作成したUIにボタン処理を追加したり
アニメーションを追加したりなど、まだまだできることは多いです。
しかし、GameObjectと比べ、自由度が低い点や、ボタンの長押しの処理など
まだまだ課題があるようにも思えました。
また、UIを作成する場合は、Adobe XDを用いたほうが直感的に素早くデザインを作成することができます。
私もUIの作成はAdobe XDをよく使います。
まだバージョンが浅いため、これからアップグレードしていくと思われるUnity UI Toolkitを試すにはいい機会だと思い今回は紹介させていただきました。
次回はGameMaker Studio2について触れていきたいと思います。
購入しなくても、試用ライセンスもあるので、ぜひGameMaker Studio2に触れていただきたいと思います。
それでは次の記事で会いましょう。