ノートの端の書き残し

UnityやらC#やら触っていたときのメモ

UIElementsとUIBuilder

UIElementsとUIBuilderについて

まずはUIElementsとUIBuilderについて軽く触れておきます。
Unity2019.1から新しく導入されたUIElementsについて。
簡単に使い方やどんなところが良さそうなどメモっておこうと思います。

UIElementsのいいところ

見た目をすごく綺麗に整えられる

従来のOnGUIではUIのレイアウトをちゃんと整えようとすると地獄のようなコードを書く必要がありましたが、UIElementsは見た目の部分を完全に分離しているためそのようなことは起こりません。
さらに、UIBuilderを使用することで(基本的に)完成状態のUIを確認しながら作っていけるようになりました。
f:id:u_osusi:20210305210004p:plain 感覚的にはWPFとかなり近いですね。

動作が軽い

OnGUIのように「カーソル動かしてる間毎フレーム描画更新するぜー」なんてことないので、大規模なUIを作っても重くなりにくいです。

つまり?

選択中のSpriteを9Sliceしてくれる、みたいな、UIどうでもいいようなエディタ拡張に使うには大げさすぎますが、
使用者があんまりUnityに慣れていなかったりするケースなど、
「とにかく誰でも見たら何すればいいかわかるUI」
が必要ならUIElementsで見た目を整えるのは有効かと思います。
ただし、いろんな人が好き勝手にUIを作ってしまうと見た目がバラバラになってしまうので、ゲーム内のUIを作るとき同様しっかりデザインルールは設けた方がいいですね。
UIパーツをプレハブみたいに扱う方法もあるのでそういうのも活用しましょう。

学び方

良い解説記事がたくさんあるので基本的にはそちらに丸投げ……
私が初めて使ったときにはほとんど解説記事が無く、参考にしたのはこちらのUnity公式の動画だったんですが https://learning.unity3d.jp/4077/ もうUIBuilderの見た目も違いますね。でも基本的なことは変わっていないので、今でも参考にできそうです。

比較的新しいものですと、こちらがすごくわかりやすく基本を押さえてくれています。 light11.hatenadiary.com

このあたりの解説を見て以下のような流れで見ていけば使えるようになってると思います。

  • UIはVisualElementsのツリー構造で管理されていることを理解する
  • 見た目は.uxmlファイル、動作はcsコードで書く
  • .uxmlはUIBuilderで編集することもできる
  • 基本的なUIパーツの使い方はサンプルがあるのでそれを見る

↓サンプル

f:id:u_osusi:20210305205812p:plain f:id:u_osusi:20210305210050p:plain