2画面目にGUIを作ってみよう

公開日　2024年10月29日　｜　
最終更新日　2025年12月16日

SDK ver.2.4.0リリースに伴い、Unityの2画面目表示機能（以下空間再現ディスプレイ2DView）に任意のテクスチャー（CustomTexture）の設定に加えて、ボタン等のGUIオブジェクトも置くことが可能になりました。
この記事ではそれらの機能を利用した簡単なアプリの作り方を紹介します。

Note

2画面目表示機能の基本的な使い方に関しては以下をご参照ください。
2画面目を表示してみよう

立ち上げ

Note

本記事ではUnity 2022.3のURPプロジェクトを使います。

新規のUnity Projectを作成して、ver.2.4.0のsrdisplay-unity-plugin.unitypackageをインポートします。
デフォルトのSampleSceneにあるDirectional Light以外のオブジェクトを全て削除し、SRDisplayManagerとSRDisplayBoxを追加します。

次に、SRDisplayBoxの中心置に新しい3D Objectを追加し、Floating Object スクリプトをアタッチします。
最後に、アプリ起動時に SR2DView が表示されるように、以下の AppController スクリプトを作成し空のGameObjectにアタッチしましょう。

using UnityEngine;

using 空間再現ディスプレイ.Core;
using 空間再現ディスプレイ.Utils;

public class AppController : MonoBehaviour
{
　　private S空間再現ディスプレイManager _srdManager;
　　private 空間再現ディスプレイ2DView _空間再現ディスプレイ2DView;

　　void Start()
{
　　　　_空間再現ディスプレイManager = 空間再現ディスプレイSceneEnvironment.Get空間再現ディスプレイManager();
　　　　if (_空間再現ディスプレイManager.Init2DView())
　　　　{
　　　　　　_空間再現ディスプレイ2DView = _空間再現ディスプレイManager.空間再現ディスプレイ2DView;
　　　　}
　　}

　　void Update()
　　{
　　　　if (Input.GetKeyDown(KeyCode.Escape))
　　　　{
　　　　　　Application.Quit();
　　　　}
　　}
}

tachiage

CustomTexture

まずはCustomTextureを使って2画面目に別の視点からの映像を表示してみましょう。

Assetsフォルダに新しいRenderTextureを作成する

second-camera-render-texture

シーンに新しいCameraオブジェクト SecondCamera を好みの場所に置き、Output Textureに先ほど作ったRenderTextureを割り当てる

second-camera-scene-view

AppControllerに以下の修正を加える

SecondCamera 用の変数を用意する。

[SerializeField]
private Camera _secondCamera;

Start()でSR2DViewのCustomTextureにSecondCameraのTargetTextureをセットする。

void Start()
{
　　_空間再現ディスプレイManager = 空間再現ディスプレイSceneEnvironment.Get空間再現ディスプレイManager();
　　if (_空間再現ディスプレイManager.Init2DView())
　　{
　　　　_空間再現ディスプレイ2DView = _空間再現ディスプレイManager.空間再現ディスプレイ2DView;
　　　　if (_secondCamera != null)
　　　　{
　　　　　　_空間再現ディスプレイ2DView.CustomTexture = _secondCamera.targetTexture;
　　　　}
　　}
}

InspectorでAppControllerの Second Camera にSecondCameraオブジェクトを割り当てる

app-controller-second-camera
アプリをビルドし、exeを実行すると2画面目に Second Camera の絵が表示されるようになります

custom-texture-exe

GUI

次は2画面目に表示されている絵を切り替えるためのボタンを作ってみましょう。

通常のUnityアプリケーションでは、GUIを作りたい時はCanvas機能を使います。
SR2DView の Init 関数が呼ばれた際、内部では Screen Space - Overlay モードのCanvasが自動生成され、そこに設定された SourceTexture の画像を画面のサイズに合わせて表示しています。
2画面目にボタンを表示するにもCanvasを使いますが、ちょっとした工夫が必要になります。

新しいScreen SpaceのCanvasを作成する。SR2DView 内部のCanvasの上に表示されるようにSort Orderは1以上に設定する必要がある。また、Target Displayについては、PC環境によって SR2DView の表示されるディスプレイが異なる可能性もあるため、実行時に正しいTarget Displayを設定するために以下のスクリプトをCanvasにアタッチしましょう。

using 空間再現ディスプレイ.Core;
using UnityEngine;

[RequireComponent(typeof(Canvas))]
public class SecondDisplayCanvas : MonoBehaviour
{
　　void Start()
　　{
　　　　var canvas = GetComponent〈canvas〉();
　　　　canvas.targetDisplay = 空間再現ディスプレイ2DView.DisplayIndex;
　　}
}

CanvasにButtonオブジェクトを追加する
AppControllerに以下の関数を追加し、ButtonのOnClick()イベントと連携させる

public void SwitchCamera()
{
　　if (_空間再現ディスプレイ2DView.SourceTexture != 空間再現ディスプレイ2DView.空間再現ディスプレイTextureType.Custom)
　　{
　　　　_空間再現ディスプレイ2DView.SetSourceTexture(空間再現ディスプレイ2DView.空間再現ディスプレイTextureType.Custom);
　　}
　　else
　　{
　　　　_空間再現ディスプレイ2DView.SetSourceTexture(空間再現ディスプレイ2DView.空間再現ディスプレイTextureType.LeftEye);
　　}
}