Unity2019.1からパブリックAPIとして提供している UIElementsを使うと、従来のイミディエイトモード（即時モード）GUI (IMGUI)よりもハイパフォーマンスでスケーラブルな UIを手軽にプロジェクトに実装できるようになります。

これまで Unityエディタでカスタムエディタウィンドウとインスペクターを構築するには、IMGUIを使用していました。 IMGUIを使用すると UIの構築を簡単に開始できますが、より複雑なアプリケーションを構築していても拡張できず、また、ユーザーがいつでも UIの構造を大幅に変更できるため、システムがレンダリングを最適化することも困難でした。
さらに、UIを視覚的に作成するために C#コードを生成する必要がありましたが、これもまた複雑な課題でした。

これらを解決するために、UIElementsではIMGUIの即時モードAPIに対して保持モードAPIとして「UIのロジック」「ヒエラルキー」「スタイリング」の3つを独立したコンポーネントに分離し、システムがそれをレンダリングできるようにするという設計にしたことで、システムは描画するものと描画するタイミングを最適化でき、全体的なパフォーマンスの向上だけでなく、アーティストとプログラマーの両方にとってより使いやすいUI制作が出来るようになりました。

この動画ではサンプルプロジェクトを用いて、UIElementsの概略の紹介と、UIElementsを使って Unityエディタのインスペクターの見た目をカスタマイズする方法をご紹介します。

・サンプルプロジェクトの構成

UIElementsで作成したカスタムインスペクターと、カスタムインスペクター内の各ボタンをクリックすると小道具がシーン内に挿入されて動かせるようにする仕組みを、実際にインスペクターを作る手順を追いながら概要を解説します。

・UIのロジックを司るスクリプト

エディターを継承している様子やカスタムエディタになっている様子を示しながら解説します。

・ヒエラルキーを構成するスクリプト

UIのヒエラルキーのベースとして機能する Unity定義の XMLアセット(UXML)の仕組みと役割を解説します。

・スタイリングのためのスクリプト

UXMLドキュメント内の各要素の見た目を定義する、CSSのサブセットである USSで書かれたスクリプトが UIを描写する方法を解説します。

・インスペクターの見た目のカスタマイズの実践

UIElementsを使って Unityエディタのインスペクターをカスタマイズする以下の手順とともにその役割を解説しながら丁寧に紐解きます。

• 要素に機能をバインドしたり、C#要素を追加して要素を拡張できるようにする
• UIElementsの中で IMGUI UIを描画する
• カスタムインスペクター内のボタンをクリックしてプレハブが生成されるようにする
• カスタムインスペクター内の要素にヘッダーを追加する
• 各要素のヒエラルキーや各要素のスタイルクラス、スタイルプロパティを確認する
• 要素をプレビュー表示させてウィンドウで値を変えながら、さまざまなスタイルプロパティを試す

どの設定手順もただ単に設定する手順を追うだけではなく、役割を解説しながら丁寧に紐解きますので、理解しやすい上に応用もしやすい動画になっています。
ぜひご覧ください。

※日本語の字幕が自動的に表示されない場合は、設定メニューでご選択ください。

Unity2019.1の段階の UIElementsは、Unityエディタ内のインスペクターをオーバーライドしたり、カスタムエディターウィンドウを作成するなどの Unityエディタの拡張を容易にするツールですが、今後のリリースでゲーム内UIの対応やビジュアルオーサリングも追加予定ですので、ぜひこの動画をご覧いただき UIElementsに慣れ親しんでください。

UIElementsの機能や詳しい使い方については、こちらのブログ投稿をご覧ください。
こちらの無料のサンプルプロジェクトをダウンロードして UIElementsをお試しください。

そのほかのリーソス

Unity Labs のお届けする Project MARS のご紹介：Project MARS（Mixed and Augmented Reality Studio／複合・拡張現実スタジオ）は、より質の高い、世界中のどこにいても実行可能な空間エクスペリエンスやゲームを作成するクリエイターのために設計された、Unity の新しいツールセットです。