うにてぃブログ

主にUnityとC#に関する記事を書いていきます

【Unity】UIBuilder について

UIElements を使ってみるためには UIBuilder が必要だったため
使ってみて分かったところと、下記ドキュメントを Google 翻訳して分かったところを記述する
UI Builder | UI Builder | 0.11.2-preview

解釈等間違っている可能性があるので、内容は正しくないことも含まれていると思います
また、UIElements については理解がある前提で記述しています

UIBuilder は Package Manager を利用して インストールしてください

利用した Version

UnityVersion:2020.1.10f
UI Builder;1.0.0-preview.9


UI Builder

視覚的に uxml や uss を作成・編集できるツール

f:id:hacchi_man:20201030003226p:plain:w400

StyleSheets

読み込んだ uss の一覧が見れます

f:id:hacchi_man:20201030005507p:plain

セレクタ設定値の変更

セレクタを選択すると Inspector に変更箇所がハイライトされる

f:id:hacchi_man:20201030005938p:plain:w250

f:id:hacchi_man:20201030010011p:plain:w250

新たに値を変更することで、そのセレクタによって変更できる箇所も増えます

新しいセレクタの追加

Text Field にセレクタ名を入力すると、uss にセレクタを追加できます

追加後は上記のように編集可能です

f:id:hacchi_man:20201030010320p:plainf:id:hacchi_man:20201030010348p:plain

Hierarchy

uxml の階層がライブツリーで表示されます

要素の移動や削除ができます

表示は基本的に name に設定されている値ですが、右上の設定から表示するものを選択できます

f:id:hacchi_man:20201030010848p:plain

Library

uxml の利用できる要素を確認できます

ドラッグもしくはダブルクリックすることで Canvas に要素を追加できます

Standard

Unity が提供する 要素一覧

f:id:hacchi_man:20201030093317p:plain:w300

Project

Project 内に存在する uxml もしくは 自作の要素一覧
自作要素の作成方法に関しては別記事で作成します

f:id:hacchi_man:20201030093346p:plain:w300

ViewPort

uxml により生成される UI を確認できます

真ん中に表示されているものを Canvasと呼ぶ

f:id:hacchi_man:20201030003637p:plain:h200
Canvas

マウスホイールでサイズを変更することができる。が Canvas の移動ができず位置の調整が難しいので
わかりにくくなったら「Fit Canvas」で真ん中に Canvas を持ってくる必要がある

Canvas サイズや背景の変更

Canvasの右端と左端をドラッグするとサイズを変更することができる

f:id:hacchi_man:20201030004228g:plain:h200

また、Hierarchyで uxml を選択すると Inspector でCanvas サイズや背景の変更が可能になる

f:id:hacchi_man:20201030005126p:plain

f:id:hacchi_man:20201030005147p:plain

ファイル操作

ファイルの新規作成・開く・保存・上書き保存が行える

f:id:hacchi_man:20201030003353p:plain:w100

テーマの変更

Canvas のテーマを Light・Dark・Runtime から選択できる

f:id:hacchi_man:20201030003839p:plain:h300f:id:hacchi_man:20201030003823p:plain:h300f:id:hacchi_man:20201030004001p:plain:h300

Preview

Canvas サイズ変更のみを行え、要素をクリックできなくなる

要素の編集

VisualElement をドラッグしてサイズの変更や位置の移動をすることができる

f:id:hacchi_man:20201030004933g:plain

Inspector

uss や 選択した要素のパラメータを変更できます

f:id:hacchi_man:20201030093648p:plain