はじめに

本記事は、QualiArts Advent Calender 2024の12日目の記事になります。

Unityで上記画像のようなサイネージを作るとき、どのような方法があるでしょうか？
これはUIを3D空間上に表示すれば実現できます。

Canvasを使用する方法

UIを3D空間に表示する一般的な実現方法はCanvasを使用して、World Spaceで配置する方法だと思われます。

しかしこの方法には2つの問題があります。

問題1: ライティングができない

World Space Canvasはライティングができません。

問題2: 平面以外の描画ができない

World Space Canvasは平面に描画されるため、曲面に描画するようなことができません。

解決: メッシュに描画する

これらの問題を解決するための方法として、メッシュに描画する方法があります。
メッシュのマテリアルにテクスチャを指定するだけの一般的な方法です。
マテリアルにはRenderTextureも指定することができるため、UIをRenderTextureにレンダリングして、メッシュに描画することで、上記の問題を解決することができます。

UI ToolkitでRenderTextureに描画する

UI ToolkitではUIをRenderTextureにレンダリングすることができます。

これを活用してクリスマスまでカウントするシンプルオブジェクトを作成しましょう。

必要なアセット

UI ToolkitでUIをRenderTextureに描画するには3つのアセットと1つのシーン上のコンポーネントが必要になります

名称	配置場所	説明
UI Documentアセット	アセット	UIの内容を定義するアセット
RenderTexture	アセット	UIを描画するRenderTexture
Panel Setting Asset	アセット	UI Documentの描画方法を設定するアセット
UI Document	シーン	UI Toolkitを実際に描画するコンポーネント

UI Documentアセットの作成

Projectを右クリックしてCreate→ UI Toolkit → UI DocumentからUI Documentを作成します。

解像度の設定

作成したUI DocumentをダブルクリックするとUI Builderが立ち上がるのでSizeを1200x400にします。

UIの作成

ラベルを使って以下のUIを作成します。
カウントダウン秒数の部分は後ほスクリプトから設定するため、一旦適当な文字列を入れておきます。

UI Builderの使い方に関しては、以下のマニュアルを参考にしてください。
https://docs.unity3d.com/6000.0/Documentation/Manual/UIBuilder.html

RenderTextureの作成

UIを描画するRenderTextureを作成します。

Projectを右クリックしてCreate→ Rendering → Render TextureからRenderTextureを作成します。

解像度はUI Builderと合わせて1200x400に設定します。

Panel Settings Assetの作成

Panel Settingsを作成して
Projectを右クリックしてCreate→ UI Toolkit → Panel Settings AssetからPanel Settings Assetを作成します。

Target TextureにRender Textureを指定
Scale ModeをConstant Pixel Sizeに設定
ScaleMode ParametersのReference Sprite Pixel Per Unitを100に設定

シーンにUI Documetを配置

適当なオブジェクトにUI Documentを追加し、先ほど作ったPanel SettingsとUI Documentを指定します。

これで作成したRenderTextureにUI Documentの内容が表示されます。

このRenderTextureをPlaneのEmissionMapに指定するとPlaneにカウントダウンが表示されます。

Runtime Bindings APIでUI Toolkitの表示をコントロールする。

カウントダウンを行うため、Labelとデータのバインドを行います。
今回はUnity 2023.2で追加されたRuntime Bindings APIを使います。

Runtime Bindings APIの概要はこちらの動画が参考になります。
https://learning.unity3d.jp/10438/

まずはバインドするクラスを作成します。

public class CountdownData
{
    public string text;
}

次にUI Builderからカウントダウンを表示するラベルのTextのAdd Bindingを選択

表示されたWindowで

Data SourceをTypeに設定
Select Typeボタンを押しCountdownDataを選択
DataSourcePathでtextを選択

これでカウントダウンの文字はCountdownData.textを参照するようになります。

バインドする

最後にMonoBehaviourからVisualElementのdataSourceとしてCountdownDataのインスタンスを設定します。

using UnityEngine;
using UnityEngine.UIElements;

public class CountdownBehaviour : MonoBehaviour
{
    public UIDocument uiDocument;
    private CountdownData _countdownData;

    private void Start()
    {
        // CountdownDataの作成
        _countdownData = new CountdownData();

        // VisualElementの取得
        var root = uiDocument.rootVisualElement;

        // VisualElementにCountdownDataをバインド
        root.dataSource = _countdownData;
    }

    private void Update()
    {
        // カウントダウンの計算
        var now = System.DateTime.Now;
        var target = new System.DateTime(now.Year, 12, 24, 0, 0, 0);
        var diff = target - now;
        _countdownData.text = $"{diff.Days}日{diff.Hours:00}時間{diff.Minutes:00}分{diff.Seconds:00}秒";
    }
}

完成

Unityを実行するとクリスマスまでのカウントが始まります。