Blog

R&D雑記

Unity UI Toolkit 入門

こんにちは、プログラマーの稲垣です。
「ゲームエンジンについての研究」の第2回目は、Unity の UI Toolkit についてご紹介します。

UI Toolkit 自体は数年前から提供されていましたが、以前から気になっていながらも、わたしはこれまで触ってきませんでした。
そろそろ「uGUI の他に UI Toolkit も触っておいた方がいいかな」と思い、今回改めて調べてみることにしました。

公式ドキュメント：Unity UIツールキット
https://unity.com/ja/features/ui-toolkit

環境
Unity 6.0（6000.0.54f1）

UI Toolkit とは？

UI Toolkit は Unity の新しい UI システムで、HTML/CSS ライクな仕組みが特徴です。
HTML のような UXML でレイアウトを作り、CSS のような USS で見た目を設定します。
また、GUI で操作できる UI Builder があり、ドラッグアンドドロップで配置することもできますので、デザイナーや非エンジニアでも UI を触りやすいかと思います。

UI Toolkit を使う準備

UI Toolkit を使用するには、必要なアセット（UXML）を作成し、シーン上に配置します。

  1. シーンのヒエラルキー上で右クリック　→　UI Toolkit　→　UI Document　→　「UIDocument」というオブジェクトが作られる
  2. プロジェクトビューで右クリック　→　Create　→　UI Toolkit　→　UI Document　→　「NewUXMLTemplate」（デフォルトの名称）という UXML ファイルが作成される
  3. シーン上の「UIDocument」オブジェクトを選択　→　インスペクタの「Source Asset」に 2 で作成した「NewUXMLTemplate」をアタッチ
インスペクタの「Source Asset」に作成した「NewUXMLTemplate」をアタッチ
UI Builder

これで準備完了です！
プロジェクトビューの「NewUXMLTemplate」をダブルクリックすると、UI Builder が開きます。
ちなみに「NewUXMLTemplate」の入れ子になっている「inlineStyle」をダブルクリックするとエディタが立ち上がり生の UXML が編集できます。

<?xml version="1.0" encoding="utf-8"?>
<ui:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:ui="UnityEngine.UIElements"
    xmlns:uie="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
>
    
</ui:UXML>

UI Builder で UI を配置

UI Builder を使って UI を配置していきます。

左下のライブラリにあるテキストやボタンなどさまざまなパーツを、ドラッグアンドドロップで中央に配置していきます。
ライブラリのすぐ上にあるヒエラルキーで構造の確認や編集もできます。

uGUI ではアンカーで位置やサイズを調整していましたが、UI Toolkit では CSS の flexbox と同じ考え方でレイアウトが決まるため、画面サイズを変更すると自動的に伸縮します。

UI Builder で指定したスタイルはインラインスタイルになる

UI Builder の右ペインにあるインスペクタでは、マージンや背景色などさまざまなスタイルを指定できますが、これは UXML 上に埋め込まれたインラインスタイルになります。
UXML とスタイルを分離するには、USS を追加する必要があります。

また、USS とインラインスタイルでは、HTML のインラインスタイルと同じように、インラインスタイルの方が優先されてしまうため、いま設定されているスタイルがインラインスタイルなのか USS なのか意識する必要があります。

USS を追加する

UI Builder の左上にある「＋」→「Create New USS」で新しい USS ファイルを作成します。
USS ファイルを作成してからヒエラルキーの要素に対してクラスを付けていくことで、要素のスタイルを USS に記述していくことができます。

要素にクラスを付加するには要素を選択し、「Style Class List」に任意の名前を入力（ここでは「button-battle」）、「Add Style Class to List」をクリックします。
すぐ下にあるボタン、「Extract inlined Styles to New Class」をクリックすると、GUI 上で指定したスタイルを USS に反映します。

UI Toolkit の使い方に慣れるには…

いきなり UXML や USS を直書きするには Unity 独特の表現もあるため敷居が高そうです。
まずは GUI の UI Builder でインラインスタイルで指定していき、それを後から USS に書き出していく方がよさそうです。

インスペクタでインラインスタイルを変更した場合、画像のように左横が白くなります。
そのすぐ横の三点マークをクリックすると「Extract Inlined Style to Selector」「Extract All Inline Styles to Selector」という選択肢が出てきます。
ここで既存のクラス名（ここでは「.logo-container」）を指定すると、インラインスタイルで指定されていたスタイルが USS に移動します。

まとめ

これまでの uGUI に慣れていると戸惑うところが多そうですが、HTML/CSS に慣れている方には非常に直感的にレイアウトが組めそうです。
新しい UI システム、まだの方はぜひ使ってみてくださいね。

次の記事へ

カテゴリー