はじめに
この記事の読者として、以下の人をターゲットとしています。
・Unity2019に入ったUIElementを触りたいけど、何のファイルを生成すればいいかがまったくわからない。
・そもそもどこから触ったらいいの？
って人
開発環境
・Unity2019.1.0f2
・VisualStudio2017Comunity
事前知識として持っていると理解がしやすくなるかも？
・UIElement以前のEditor拡張（画面を出す事が出来る程度）
・CSSの書き方
・XMLの知識？
そもそもUIElementとは？
UnityにおいてのUIを構成する要素の選択の一つ。UIElementと、UnityUI(UGUI)、IMGUIの中の一つ。
現状はEditor拡張をCSSライクな感でUIを作成する手法。
現状としての公式のドキュメントによると、ゲーム側のUIでの実装は未定となっているので
そのうちエディター拡張だけじゃなく、ゲーム側のUIとしても使われる可能性もあるかも？
現状の公式では未定の扱い
出てくるファイル
C#ファイル・・・Editorの画面を出すためのもの
UXMLファイル・・・XMLとほぼ同等のUnityverみたいなもの？
USSファイル・・・スタイルシートみたいなもの？
サンプルのつくり方
1.Assets/Editorファイルの中で、右クリックをして、メニューの中のCreate/UIElements Editor Window
があるので、それをクリック。
2.1を行うと以下の画面が出てくるので、そこにファイル名を入れてConfilmを押す
ちなみに、どこかの欄に入れると他も同様に作成されます。
ファイル名入力後にEnterでも作成できる模様。
ファイル自体は、Createでおこなった所に生成されるようです。
3.以下のような画面が出現します。
それぞれのファイルの意味と用途。
USSファイル
何か特定のUIに対して、脚色を行うためのもの
サンプルでいうならば以下のようになっている
Label {
font-size: 10;
font-weight: bold;
text-color: rgb(68, 138, 255);
}
このスタイルを適用している箇所が、C#側のファイルのこの部分
30行目
//スタイルシートの取得
var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/Resources/samples.uss");
//ラベルの作成
VisualElement labelWithStyle = new Label("Hello World! With Style");
//作成したラベルに対して、スタイルシートを適用する。
labelWithStyle.styleSheets.Add(styleSheet);
//描画部分に対して適用する。
root.Add(labelWithStyle);
です。
UXMLファイル
特定のUIに対して、このシートだけで色々と行うもの？っていうところが今のところの認識
この認識の理由としては以下のサンプルの
の下に、もう一行文字列だけを変更した
を追加する事で、
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:engine="UnityEngine.UIElements"
xmlns:editor="UnityEditor.UIElements"
xmlns:upm="UnityEditor.PackageManager.UI"
xsi:noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd"
xsi:schemaLocation="
UnityEngine.UIElements ../../../UIElementsSchema/UnityEngine.UIElements.xsd
UnityEditor.UIElements ../../../UIElementsSchema/UnityEditor.UIElements.xsd
UnityEditor.PackageManager.UI ../../../UIElementsSchema/UnityEditor.PackageManager.UI.xsd
"
>
<engine:Label text="Hello World! From UXML" />
</engine:UXML>
このUXMLを適用しているC＃の箇所は以下のところ
// Import UXML
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/Resources/samples.uxml");
VisualElement labelFromUXML = visualTree.CloneTree();
root.Add(labelFromUXML);
UIを構成する方法のアプローチ
以下は、1時間程度、触ってみた感じの所感であって絶対的な使い方ではないし
間違っているかもしれません。あくまでも所感程度の認識でよろしくお願いいたします。
1.従来のC#側で、ごりごり書いて完結スタイル。
一番シンプルだが、これなら、従来のEditor拡張と大差変わらないので、UIElementを使う理由がほとんどない。
なれ親しんでいる分EditowWindowを継承したところからおこなった方がいいかもしれない。
2.UIElement(C#) + USS
特定のUIに対して、Style（脚色的なようそ）を追加する形式
これのいいところは、他のUIにも同じStyleを使用できるという点。
見出し等には、このラベルを使うという事が出来るので、ラッパークラスとして、作成すれば、それを呼び出すだけでそのスタイルのラベルを呼び出す事が出来るかも？
ただ、これらを適用した場合、適用したものの、子要素まで影響を与えるので
その辺の設計部分に気を遣う必要が出てくるかも
3.UIElement(C#) + UXML
UIをC#側で指定せずに、UMXL側で指定するという形式の模様？
なので、C#側はUIが入るよ、その時の準備するUIはこれでよろしくっていう形式になる感じになると思われる。
これのいいところは、UIの設定を全て、このファイルに、UIが集約する事が出来る事。C#側から参考にされている箇所さえわかれば
それのUIの構成を全て見る事が出来るため、画面事とかの管理もでき、シンプル。
その一方で、詰め込みすぎると、使いまわしがしずらくなるため、その辺の分割が難しそう
今後
現状のサンプルではラベルしか存在しないものなので、ボタン等も扱ったり、もう少し詳細のものを
次回の記事で事始めでの記述を行っていきたいと思います。
参考資料
Unity公式マニュアル
https://docs.unity3d.com/Manual/UIElements.html