UnityのUIToolkitのランタイムサンプルを試す

はじめに

Unity2020.2からプレビュー版ですがランタイムでもUI Elementsを使えるようになりました。
まだドキュメントなどは少ないのですがサンプルが用意されているのでそこから何ができるのか紹介していきます。

開発環境

• Unity2020.2+
• UI Toolkit 1.0.0-preview.14^[1] (TextMesh Pro 3.0.3+とUnity2020.2+が必須)
• UI Builder 1.0.0-preview.13^[2]

インストール

UI Toolkit

Package ManagerのAdd package from git URLにcom.unity.uiを入力してインストールします。

UI Builder

1. Project Settings > Package Manager > Advanced Settings > Enable Preview Packageをチェック
2. Package Manager > PackagesをUnity Registryに切替 > UI Builderをインストール

古いバージョンのUI Builderでエラーが出る時はUI Builderを一旦削除して再度インストールすると解消します。^[3]

日本語パックを有効にするとUnity Editor自体の一部の日本語が崩れるので英語表示にしてください。^[4]

UI Toolkitのサンプル

Package Manager > UI Toolkitを開き、SamplesのImportボタンを押します。

UI Toolkitのサンプル

サンプルを追加するとメニューのWindow > UIToolkit > Exampleからランタイムとエディタの各サンプルを実行できます。
そのうちランタイムのサンプルは以下の種類があるのでそれぞれ紹介します。

• General
  • Root Selector
• Text
  • Basic Style Tags
  • Alignment Tags
  • Assets
• Events
  • ClickEvent
  • GeometryChanged
  • Keyboard Events
  • Pointer Events
  • Touch Move
• Rendering
  • RenderTexture 3D
  • RenderTexture Background

Root Selector

ussの:rootでデフォルトスタイルを設定するサンプルです。
Background colorが緑なので全体の背景も緑になっています。

Basic Style Tags

uGUIのRich Textのようにテキストでタグを指定するサンプルです。

Alignment Tags

テキストの水平、垂直位置をRich Textのタグで指定するサンプルです。

Assets

TextCoreを利用するサンプルです。

ClickEvent

クリックイベントのサンプルです。
6つの要素が緑に変わった時にクリックするとスコアが増えます。

GeometryChanged

レスポンシブWebデザインのように横幅を変えるとレイアウトが変わるサンプルです。

Keyboard Events

キーボードイベントのサンプルです。
スペースを打つとBPMが更新されます。

Pointer Events

マウスイベントのサンプルです。
マウスカーソルの座標とポインターのダウン、アップイベントを拾っています。

Touch Move

タッチイベントのサンプルです。
タッチペン・スタイラスやスマホで4つの要素をドラッグして移動できます。

RenderTexture 3D

ランタイムUIの画面をRenderTextureに書き出してメッシュに貼り付けています。
メッシュをクリックするとUIにイベントを飛ばすスクリプトもあります。

RenderTexture Background

RenderTextureに書き出したカメラをussの背景画像として表示するサンプルです。

参考

• UI Toolkit - Unity Forum
• 【Unity】UI ToolkitをランタイムUIとして使ってみる
• 【Unity】UI Toolkitで多人数開発は可能なのか？シンプルな画面遷移を作って検証してみる

脚注

1. https://docs.unity3d.com/Packages/com.unity.ui@latest/

2. https://docs.unity3d.com/Packages/com.unity.ui.builder@latest/

3. https://issuetracker.unity3d.com/issues/ui-builder-throws-missingmethodexception-errors-after-updating-to-unity-2020-dot-2-3f1

4. https://issuetracker.unity3d.com/issues/nullreferenceexception-gets-thrown-in-the-console-when-the-label-text-value-contains-cjk-characters-and-text-wrap-is-enabled