【Unity】 UI ElementsとUI BuilderでメニューのUIを作ってみた

Writer: &nbsp; &nbsp; &nbsp; Nhân Tran Lam
Translator: Yosuke Okusa
Director: &nbsp;&nbsp; Yosuke Okusa
First Post:&nbsp; 2020-07-23

### 使ったバージョン
Unity LTS4.3f1
UI Builder 1.0.0

## 「UI Elements」とは？

**UnityでのUIの作り方**
UI Elementsとは、エディタおよびランタイムのUI開発向けにデザインされたフレームワークのひとつです。
UIの作り方として、これまでUnityには以下のようなやり方がありました。

- IMGUI: エディタ拡張で使われるコードベースの方法。
- uGUI: ランタイムUI向けにUnity 4.6で実装された方法。

しかし、これらの方法は次のような問題があります。 

> ・パフォーマンスが十分に上がらない。
> ・デザインとコードを同一ファイルに書く必要がある。
> ・そもそもC#とUnityに慣れていないと扱うのが難しい。


**UIElementsでできること** 
従来のやり方に対して、UI Elementsには以下の特徴があります。

> ・新しいUIの仕組みである。
> ・エディタとランタイムのためにデザインされている。
> ・UXML/USS/C#など、WEB系（XML/CSS）に近い構築方法。
> ・パフォーマンスが高い。


## UI Elementsの下準備

**３つの基本**

上記でちらっと触れましたが、次の３つが基本構造になります。
それぞれ別ファイルで管理します。

* UXML：階層構造の定義
![uxml.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677497/12087a16-2ab6-71a9-ba47-fadb159d9df4.png)


* USS：デザイン
![uss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677497/5fb82edf-e167-ef79-713d-c98dc2b9cb2d.png)


* C# Script：コード（イベント定義など）

また、こちらのチュートリアルが分かりやすくておすすめです。↓

Unity : [https://learn.unity.com/tutorial/uielements-first-steps#](https://learn.unity.com/tutorial/uielements-first-steps#)
raywenderlich : [https://www.raywenderlich.com/6452218-uielements-tutorial-for-unity-getting-started](https://www.raywenderlich.com/6452218-uielements-tutorial-for-unity-getting-started)

## UI Elements触ってみました
今回は上記チュートリアル内容を、**UI Builder**を使って実践していきます。

UI Builder とは:
> ・公式から出ている、UI Elementsのためのツール。
> ・UXMLやUSSを作成できる。
> ・Package Managerから参照できる。

公式から出ている便利ツールといったところでしょうか。
さっそく使っていきましょう。


### UI Builderの操作

1. Unityエディタから、 Open Window > Package Manager > Install Package UI Builderと選択していく。
![ui_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677497/d82f8f61-9565-d0ba-fc5d-cd8131121603.png)


2. ランタイムで動作するように、_"com.unity.ui.runtime": "0.0.4-preview"_ を manifest.json に追加する。
![import_runtime.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677497/8cf590f2-c3eb-2e86-07d7-4eb1a712f131.png)


3. Window > UI から、UI Builderのウィンドウを開く。
![uibuilder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677497/e2cc8567-e5d4-d247-44d3-a91eeed4abcd.png)


4. ドラッグ＆ドロップでUXMLとUSSを作成・調整し、インスペクタのプロパティを調整する。

5. シーンにUXMLを追加するか、カメラに紐づける。
   後者の場合、PanelRenderer.csが紐づけられたゲームオブジェクトを使う必要があります。
![panel_renderer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677497/93bc2cde-ecbd-5696-0038-c2e251f55bbb.png)


## できたもの
こちらが上記チュートリアルでUI Builderを使って作ったメニューです。いかがでしょうか？
![example1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677497/9b133abe-5cf9-060f-805a-8c812f555a53.png)

![example2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677497/41361a58-85e7-5509-d558-41ef9c9ef8d8.png)


## まとめ
今回チュートリアルでメニュー完成まで漕ぎ着けましたが、実際に触ってみると、下記のようにいくつかバグや問題に直面しました。

- インスペクタでフォントを変えるとUnityがクラッシュした。
- プロパティ編集中、PositionをAbsoluteにしたらUnityがフリーズした。
 
ここまでを踏まえて、UI Elements/UI Builderを使ってUIを作ってみて感じたことをまとめてみました。

|良かったところ|ダメだったところ|
|---|---|
|設定が簡単。|まだ開発中のツールなので、現状の仕様から変更される可能性がある。|
|エディタを速く作れて時短になる。| UI Builderのインスペクタをいじるとバグが起こることがある。|
|構造がハッキリしていて分かりやすい。|インスペクタのプロパティがまだ完全ではない。|

開発段階なので、不具合があるのは当然ですが、現状では実製作での利用にはまだ使えないことが分かりました。
Unityエディタのフリーズなど致命的なバグがあり、リリースバージョンの完成を待つ必要がありそうです。

というわけで、UI Elements/UI Builderを触ってみての総括はこんな感じです。
***生産性が高く、エディタ拡張にも便利ですが、まだ開発段階というのが拭えないので、
   UI Builderを開発に使うなら安定版のリリースを待った方がいいと思いました。***