uGUIからUI Toolkitに変わるとUIデザイナーのUnity作業はどう変わるのか？
UI Toolkit というUnityの 新しいUIシステム を聞いたことがあるでしょうか？
皆さんがよく知るUnity UI（uGUI）はUnity4.6で初登場し すでに約10年経過 しています。10年も同じシステムが続くこと自体が凄いことです。ただUnity社もより良いもの作ろうということでuGUIの裏側で 新しいUIシステムの開発を進めてきた というわけですね。
そんな新しいUIシステムである UI Toolkit ですが、実は すでに既存のUnityのエディタに導入済み です。
InspectorウィンドウはUI Toolkit製
例えばInspectorウィンドウのコンテキストメニューを見るとUI Toolkitで作られていることが分かります。他のEditorウィンドウUI Toolkit製が多数です。
Editorウィンドウで実績を出したUI Tookitを、次は ランタイム（実行中アプリ）上で使える ようになりました。
少し前のUnityではUI Toolkitのランタイム使用は Experimental（実験段階） でしたが、最新のUI Toolkitは正式版としてリリースされています。
Unity2022ではすぐにUI Toolkitが使えます
すでにUnity2022ではUnityエディタを開いたらすぐに使えるような状態で、Unity社的にはどんどん使って欲しい。という意図を感じます。
uGUIからUI Toolkitへの移行は一筋縄ではない
ただですね、長年uGUIを使ってゲームを作ってきた身としては、 いきなりツールを変えるというのは難しい です。しかもUIシステムというゲーム開発のコア中のコア機能を変えるというのは大きな意思決定が必要になります。
というのも個人開発で、影響範囲が自分だけなら問題は比較的小さいですが、50人、100人といった大規模開発をしている場合、そう簡単な話ではありません。
エンジニア、デザイナーの 学習コスト も馬鹿になりませんし、まだ 導入事例の少なさ からベストプラクティスもわかりません。
そこで本記事では今後UI作業が一新されるかもしれない UI Toolkit時代 に向けて具体的に自分たちにどのような変化があるのか 「想像」 していきたいと思います。
UIを制作するのは Unityエンジニア と UIデザイナー の2職種が主ですが、ここでは非エンジニアであるUIデザイナーがどのような作業になるのかピックアップしていきます。
例えば以下のような事が気になりますよね。
- Prefabで作業していたけどどうなるんだろう？
- 画像やテキスト表示方法って変わるの？
- RectTransformでやってたレイアウト操作は？
- UIパーツの共通化ってどうやる？
- UIアニメーションはできる？
- UIエフェクトは使える？
などなど。
「今後、自分の仕事のやり方が変わるかもしれない」 ことを先に知っておくことは自分の人生に対するリスク管理にも繋がります。
いきなりuGUIがなくなることはありませんが、もしuGUIを採用しないプロジェクトになった時、自分自身の価値をどう発揮するのか、今のうちから対策することで回避できるリスクかもしれません。
ぜひ最後まで読んで、もしUI Toolkitが自分のプロジェクトに導入された時どう対策していくか、これから自分は何を勉強していくべきかという 意思決定の材料 に使って頂ければと思います。
では早速想像していきましょう。
普段作業しているUIのPrefabはどう変化する？
皆さんが普段の作業で触っているUIのPrefab。
- 画面Prefab
- モーダルPrefab
- ボタンPrefab
などなど。これらのPrefabがどのように変化するのか気になりますよね。
結論から言うと Prefabはなくなります。
なぜなら、UI Toolkitは 1つ1つのUIパーツをGameObjectで構築しない からです。
代わりに登場するのが以下のような UXML というファイルになります。
<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<Style src="project://database/Assets/Sample/Sample.uss?fileID=7433441132597879392&guid=01974c204ff424c648c92edada04942d&type=3#Sample" />
<engine:VisualElement name="Root" style="flex-grow: 1; flex-direction:
「UIデザイナーの自分たちがコードを書かないといけないの？」 って思いましたよね。
安心してください。Unity社が用意している UI Builder を使うことでコードは書かずに済みます。 UI BuilderがUXMLをGUI操作で作成してくれる のです。
UI Builder はUI Toolkitを使う上で欠かせないEditorウィンドウです。
開き方は2種類あります。
1つ目は メニューWindow > UI Toolkit > UI Builder から。
2つ目はUXMLファイルをダブルクリックで開けます。
UI Builder
このUI Builderが UI Toolkitを使ったUI構築のメインツール です。
今までは以下の3機能を使ってUI作業をしてきましたよね？
- Sceneビュー
- Hierarchyウィンドウ
- Inspectorウィンドウ
今後はメインツールがUI Builderに置き換わるということです。
具体的には 「UI Builderを使ってPrefabの代わりとなるUXMLを編集していく」 そんなイメージです。
Prefabがなくなり、UI Builderを使って作業するというのが、uGUI から UI Toolkit への大きな変更です。
ここはしっかり覚えておきましょう。
UI BuilderはUI用のUnityエディタみたいなもの
もしUI Toolkitが採用された場合、多くの時間を使うであろう UI Builder について少し触れておきます。
今までUI開発でHierarchyウィンドウやInspectorウィンドウを使ってきたと思いますが、UI Builderにも同じような概念で登場します。
UI Builderの各機能
上図のようにHierarchy、Inspectorはそのまま残りますし、Viewportという名前でSceneビュー的なものが残ります。
つまり今まではUnityエディタ上で作業していたことが、UI Builderにそのまま移行したと考えてもらって大丈夫です。
画像の表示方法はどう変わる？
今までuGUIでは画像表示するためにImageコンポーネントを使ってきました。具体的には、
- GameObjectを作成
- Imageコンポーネントをセット
- SpriteをImageにセット
という3つのステップで画像を表示してきました。
UI Toolkitになったらどう変わるか、以下のステップになります。
- UI Builder上のHierarchyにVisualElementを追加
- InspectorのBackgroundからSpriteをセット
UI Toolkitになると VisualElement という新しい概念が登場します。
このVisualElementとは今まで扱ってきた GameObjectとRectTransformに似ています。
- 階層関係を持つ
- レイアウト機能を持つ
- 画像表示機能、アニメーション機能を持つ
このようにGameObjectとRectTransformを合体させたような要素であり、また画像表示機能やアニメーションまでできる多機能なオブジェクトであることを覚えておいてください。
またuGUI時代は Image と RawImage という2つの画像表示コンポーネントがありましたが、この2つの切り替えもVisualElementの Background から設定可能です。
VisualElementのBackground 画像種類プルダウン
Background内のプルダウンから指定できます。
| UI Toolkit | uGUI | 備考 |
|---|---|---|
| Texture | RawImage | - |
| Render Texture | RawImage | - |
| Sprite | Image | - |
| Vector | - | UI Toolkitの新要素 |
このように画像表示1つとってもuGUIとは大きくオペレーションが変わります。
SetNativeSizeは？
uGUIのImageは画像サイズにRectTransformの幅と高さをセットするSetNativeSize という便利機能がありました。
悲しいお知らせですがUI ToolkitではSetNativeSizeに代わる機能はありません。
自分でサイズを指定する必要があるため移行時には注意が必要です。
テキスト表示はどう変わる？
今までTextMeshProUGUIを使ってテキストを表示してきました。
UI ToolkitではLabel を使用します。
LabelのInspector内のAttributes > Textから文字入力が可能です。
文字入力以外にもさまざまな設定が出来ます。
- 文字サイズ
- フォントの変更
- リッチテキストの利用
- 文字間、行間設定
UIデザイナーはこれらテキストの設定は LabelのInspectorから設定する ことになるため覚えておいてください。
UIパーツの共通化方法とは？
UI開発はUIデザイナーが決めたUIレギュレーションと呼ばれるルールを元に進めていきます。逆に言うと UIレギュレーションがないプロジェクトは赤信号。
↓UIレギュレーションについて以前執筆した記事があるので気になる方は読んでみてください。
UIパーツの共通化は、ゲーム開発にとって非常に重要な要素です。
ここで朗報ですが UI ToolkitはUIパーツの共通化がしやすい です。
USSと呼ばれるファイルにルールを記述することで簡単に共通化を実現できます。しかも修正もUSSを変更するだけで反映できるため非常に便利です。
またWeb開発経験のあるUIデザイナーさんは更に朗報。UXMLとUSSはHTMLとCSSの関係と似ています。
CSSを変更すればマークアップしたHTML要素の見た目を変更できるように、USSを変更すると関連したUXMLを更新できるのです。以下のようにUSSの記述はCSSとかなり似ています。
Button {
width: 200px;
}
Webの経験をUnityで生かせるのもUI Toolkitの良い所だと言えます。過去HTML/CSSを書いたことがあるUIデザイナーは UI Toolkitで活躍できる可能性あり です。
UIレイアウトはどう変わるのか？
uGUIではRectTransformを使ってUIレイアウトをしてきました。早速結論ですが UI Toolkit時代ではVisualElementを使用します。
ただし、uGUIの頃のように XとY座標を指定するだけの単純操作ではありません。
VisualElementのInspector内の以下の4要素を使用してレイアウトします。
- Position
- Flex
- Align
- Spacing
細かいオペレーションの解説は割愛しますが、uGUI時代と違って大きく変わるんだなぁという事を感じてもらえれば大丈夫です。
Position
Positionは細かい座標を変更するパラメーターです。
- Relative・・・相対座標で指定
- Absolute・・・絶対座標で指定
Flex
Flexと呼ばれるWebでは普通の技術がUnityで使えるようになります。
今までLayoutGroupを使ってレイアウトを駆使してきたと思いますが、このFlexを使うと簡単にまた自由度高く実現できます。
詳しくは@harumak_11さんのこちらの記事をどうぞ。
Align
要素を配置基準をどこにするのか、並び方をカスタマイズできます。
Spacing
SpacingはいHTML/CSSでいうところの、PaddingとMarginを設定できる箇所です。
繰り返しになりますが、 uGUI時代と違って大きく変わるんだなぁ という事を感じてもらえれば大丈夫です。
多解像度対応ってどうなるの？
uGUI時代にUI解像度や多解像度に対する設定は Canvas/CanvasScaler で設定していました。
UI Toolkitの場合は、 Panel Settings を使用します。
Panel SettingsはScriptableObjectになっていて、メニューから作成します。Canvasのように直接コンポーネントに値をセットする形から変更されており、設定の使い回しがしやすくなりました。
Panel SettingsのInspector
- Scale Mode
- Screen Match Mode
- Reference Resolution
Panel Settingsの設定項目には見慣れた設定項目があることが分かります。これらの項目を使用して解像度の設定をしてみてください。
Panel Settingsの反映方法
作成したPanel SettingsはどうやってUIに反映するのかというと、UIDocumentに設定します。
UIDocumentのInspector
UIDocumentのPanel Settingsに Panel Settings ファイルを設定します。すると設定されたUIDocumentに紐づけられたUXMLに適用されるという仕組みです。
複数UIDocumentを作る際には、共通のPanel Settingsを設定することになるため、UIDocumentをPresetしておくと良いかもしれません。
UIアニメーションの作り方は？
uGUI時代はスクリプトやAnimationClip、Unityタイムラインを使ってUIアニメーションを作ってきました。
最初に残念なお知らせですが、現状 AnimationClipやUnityタイムラインを使ってUI Toolkitを動かすことは出来ません。 現状できるUIアニメーションはかなり限定的です。
具体的には以下の2つの要素を使います。
- USS
- Transition Animations
具体的なオペレーションは割愛しますが、ボタンをマウスオーバーをUSSで定義します。
マウスオーバーしたVisualElementのTransition Animationsを調整することでアニメーションを調整できます。
こんな感じでアニメーションを簡単に実装可能です。
ただしUSSで実現できない複雑なアニメーションは途端に難易度が上がります。
もはやUIデザイナーの範疇を超えそうですが、スクリプトから直接パラメータをアニメーションさせることも可能です。
↓↓以前執筆したUI Toolkitの記事を参考にしてもらえるとありがたいです。
具体的には DOTweenを使ってVisualElementのパラメーターをアニメーション させるという実装です。
DOTweenとはスクリプトでアニメーションを実装するための無料アセットです。非常に便利で拡張性も高いため愛用しています。以前、DOTweenについてのコンテンツを作成したので、興味ある方は無料部分だけでも勉強になるので読んでみてください↓↓
UIエフェクトはどうやって実装する？
ゲーム開発するうえでエフェクトは非常に重要です。Unityでは ParticleSystem を使ってエフェクトを作ることが多いかと思います。
uGUI時代はParticleSystemを SortingOrder を使ったり、 UIEffect などの外部アセットを使って実装してきました。エフェクトを実装する際に挙がる要望は以下です。
- UIの上 にエフェクトを表示したい
- UIの下 にエフェクトを表示したい
- UIとUIの間 にエフェクトを表示したい
これらを実現する必要があります。
ではUI Toolkitになるとどうなるか？
結論からいうと UI Tookitのエフェクト表現はuGUIほどの自由度はありません。
UI Toolkitは最前面に表示されてしまうため、デフォルト状態ではUIの手前にエフェクトを表示させることは出来ません。
結果的にUIとUIの間に表示することも出来ません。
つまり UIの下にのみ表示可能 ということです。
RenderTextureを使ってUIの前面にエフェクトを表示
若干強引な方法ですが、ParticleSystemをRenderTextureに別途描画してVisualElementで重ねて表示させることで実現できます。
RenderTextureに書き込んだParticleSystemをVisualElementで表示
ParticleSystemをUIの上に表示できるとはいえ、エフェクト表示の自由度は非常に低い と言わざるを得ません。
2024年7月に開催されたUnity公式オフラインイベントU/Day Tokyo 2024で中の人にも質問しましたが、UIとUIの間に間にエフェクトを表示させる きれいなソリューションは無い とのこと。
もしUI Toolkitをプロダクトに導入する際は、エフェクト表示の制限を受け入れておく必要がありそうです。
UIシェーダーの実装方法は？
最後にUIシェーダーです。
uGUI時代はUberシェーダーを作ってMaterialをUIパーツにセットして使ってきたと思います。UI Toolkit時代ではどうなるか気になるところですが、、、
結論からいうと UI ToolkitでカスタムUIシェーダーは使えません 。
アプリと違ってゲームはUIにもエフェクトやシェーダーを使って盛り盛りに演出することがありますが、現状のUI Toolkitではそれが出来ません。
制作するプロダクトの内容によって使う使わないは見極める必要がありそうです。
まとめ
ここまでuGUIとUI Toolkitの比較をしつつ、使用ツールがUI Tookitに変わった場合のUIデザイナーが行う作業の変化について想像してきました。
まとめに入る前にUIデザイナーが関係しそうなuGUIとUI Toolkitの比較表をご覧ください
| - | uGUI | UI Toolkit |
|---|---|---|
| 操作するファイル | Prefab | UXML |
| 画像表示方法 | Image | VisualElement |
| テキスト | TextMeshPro | Label |
| UIパーツの共通化 | 自作 | USS |
| UIレイアウト | RectTransform | VisualElement |
| UI全体設定 | Canvas | Panel Settings |
| UIアニメーション | 何でもあり | 限定的（AnimationClip不可） |
| UIエフェクト | 何でもあり | 限定的 |
| UIシェーダー | 何でもあり | 厳しい |
UnityのUI作業が大きく変わることは間違いないです。
また、この記事を書く上で僕自身も最新のUI Toolkitを触って検証しました。
「まだスマホゲームに使うのは早い」 というのが僕の中での結論です。
実際SteamでリリースされているTimberbornはUI Toolkitを使って開発されています。 このゲームめちゃくちゃ面白いのでUI Toolkitの検証目的でプレイするのはおすすめしません。 時間が溶けます。
Timberbornのインタビュー記事もあります。
ティンバーボーンの複雑なランタイム UI がどのように構築されたか
このようにUI Toolkitで発生する表現面の制限を受け入れた上で採用するなら良いのですが、 何となく新しい技術だから使ってみようと軽い気持ちで導入したら地獄を見るかもしれません。:
結局 ユーザーにとってはuGUIを使おうがUI Toolkitを使おうが関係ないですからね。
ただ、ここまで読んでもらって僕がアンチUI Toolkit派だと思っているかもしれませんがそんな事はありません。UI Toolkit自体トレンドを取り入れた面白いアプローチですし、今後のアプデ次第で大化けする可能性もあります。
特に USSでデザインの指定ができるところがすごく便利 です。よくある後から一括で変更したい場合に重宝します。
UI Toolkit時代に向けて勉強しておくのは悪くない選択肢だと考えています。
僕はとりあえず試しに1つゲームを作りがてらUI Toolkitを使ってみています。この記事では取り上げていませんがデータのバインディングやテンプレート化などUI Toolkit的に面白い機能が他にもたくさんあります。
とはいえuGUIに慣れているとUI Toolkitは一癖も二癖もあり、まだまだ手足のように使いこなすには時間がかかりそうです。
だからこそ、 今のうちに知見を貯めておくというのは面白い のではないかなと思っています。
この記事が皆様のゲーム開発のお役に立てれば幸いです。
またこのようなUnityやゲーム開発に関する内容をXで発信していますので、ぜひフォローしておいてください。
↓こんな発信しています。
あと今だけ無料プレゼント企画も開催しているのでチェックしてみてください。
では良いクリスマスを！
Discussion