UI Toolkit の Panel Renderer の使い方 – Unity6.6対応

公開日: 2026年11月9日 / 最終更新日: 2026年11月9日 / カテゴリ: Unity / 投稿者: matsuda

目的

Unity 6.5あたりで「UI Toolkit」に変更があったようです。

「UI Document」コンポーネントが非推奨（obsolete）扱いになり、代わりに「Panel Renderer」コンポーネントを使うことになったようです。

今回、「Panel Renderer」を使用してみます。

※Assetにも同じ名称の「UI Document」が使われているので混同しないよう注意しよう。

開発環境

Windows11
Unity 6.6 (6000.6.7f1)

HTML、CSSの知識も少々必要です。

手順概要

Panel Renderer を作成する。これはComponentです。
UIDocument(.uxml)を作成する。これはAssetです。
Script作成

詳細手順

Panel Renderer コンポーネントを準備する

ゲームオブジェクトの「Panel Renderer」を追加します。

Heirarchyで、右クリック → UI Toolkit → Panel Renderer を選択する
- TopMenu → GameObject → UI Toolkit → Panel Renderer でももちろんOK

UI Document コンポーネントは、追加メニューの UI Toolkit -> Legacy に移動していることも確認できます。

Panel Renderer を追加すると、Assetに「UI Toolkit」ファルダが追加されます。

UI Document アセットを準備する

プロジェクトウィンドウから UI Document アセットを追加します。

Project Window で右クリック -> Create -> UI Toolkit -> UI Document(UXML) を選択します。

Panel Rander コンポーネントの Source Asset 欄にあるNewボタンからもAssetを新規作成できます。

UI DocumentのInspectorを確認すると、Visual Tree Asset と表示されています。

次に UI Document を編集してUIを構築します。ここではLabelとButtonを追加します。

UI Document(UXML)ファイルをWクリックして UI Builder を起動します。
Libraryからアイテムを追加します。D&D操作で追加してください。
VisualElementを追加して、その子要素としてLabelとButtonを追加します。
Labelに”label”、Buttonに”button”と名前を付けます。

UI Document(UXML)ファイルのアタッチ

Panel Renderer の Source Asset に、UXMLファイルをアタッチします。

UI画面の確認

GameWindowを開いてみましょう。UIが表示されているはずです。

Scriptの作成

UIのボタンを押したら、Labelの文字列を変更するScriptを書いてみましょう。

空のゲームオブジェクトを作成して、Scriptをアタッチし、PanelRenderer欄にPanelRendererゲームオブジェクトをアタッチしてください。

using UnityEngine;
using UnityEngine.UIElements;

public class UI : MonoBehaviour
{
    private Button button;
    private Label label;
    private int clickCount;
    public PanelRenderer panelRenderer;

    void Awake()
    {
        panelRenderer.RegisterUIReloadCallback(OnUIReload);
    }

    void OnDestroy()
    {
        panelRenderer.UnregisterUIReloadCallback(OnUIReload);
    }

    private void OnUIReload(PanelRenderer panelRenderer, VisualElement root, int version)
    {
        button = root.Q<Button>("button");
        label = root.Q<Label>("label");
        button.RegisterCallback<ClickEvent>(PrintClickMessage);
    }

    private void PrintClickMessage(ClickEvent evt)
    {
        ++clickCount;
        label.text = "Click Count: " + clickCount;
    }
}

動作確認

ボタンを数回押してみてラベルの文字列が変化することを確認しましょう。

メモ

ScritptでCallbackの登録と解除はAwakeとOnDeatroyを使用する。公式Sampleを見た感じだと。
UIDocumentアセットは、所々で「View Tree Asset」と表示される。将来名称が変更されるかもしれない。
UI作成するとき、「Visual Element」をRootに置くのがセオリーなのかもしれない。「<div>」のような物なのかな？

参考

Get started with runtime UI – Version 7000.0 Alpha
Get started with runtime UI – Version 6000.7 Beta
Get started with runtime UI – Version 6000.6
UI systems Version 6000.6
UI Document component Version 6000.6 – The UI Document component is obsolete

参考記事

UI Toolkitを使用してUIを作成してみる – Unity

おわり