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

公開:2021/02/21
更新:2021/02/23
4 min読了の目安(約3700字TECH技術記事

はじめに

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.12[2]

インストール

UI Toolkit

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

UI Toolkit

UI Builder

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

UI Builder

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

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

UI Toolkitのサンプル

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

UIToolkit/Samples

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

UIToolkit/Example

Root Selector

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

Root Selector

Basic Style Tags

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

Basic Style Tags

Alignment Tags

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

Alignment Tags

Assets

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

Assets

ClickEvent

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

ClickEvent

GeometryChanged

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

GeometryChanged

Keyboard Events

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

Keyboard Events

Pointer Events

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

Pointer Events

Touch Move

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

Touch Move

RenderTexture 3D

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

RenderTexture 3D

RenderTexture Background

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

RenderTexture Background

参考

脚注
  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 ↩︎