はじめに
本記事は、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を実行するとクリスマスまでのカウントが始まります。