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

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

立ち上げ

新規の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 SRD.Core;
using SRD.Utils;

public class AppController : MonoBehaviour
{
    private SRDManager _srdManager;
    private SRD2DView _srd2DView;

    void Start()
    {
        _srdManager = SRDSceneEnvironment.GetSRDManager();
        if (_srdManager.Init2DView())
        {
            _srd2DView = _srdManager.SRD2DView;
        }
    }

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

CustomTexture

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

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

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

3. AppControllerに以下の修正を加える

   SecondCamera 用の変数を用意する。

   [SerializeField]
   private Camera _secondCamera;
   

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

   void Start()
   {
       _srdManager = SRDSceneEnvironment.GetSRDManager();
       if (_srdManager.Init2DView())
       {
           _srd2DView = _srdManager.SRD2DView;
           if (_secondCamera != null)
           {
               _srd2DView.CustomTexture = _secondCamera.targetTexture;
           }
       }
   }
   

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

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

GUI

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

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

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

   using SRD.Core;
   using UnityEngine;
   
   [RequireComponent(typeof(Canvas))]
   public class SecondDisplayCanvas : MonoBehaviour
   {
       void Start()
       {
           var canvas = GetComponent<Canvas>();
           canvas.targetDisplay = SRD2DView.DisplayIndex;
       }
   }
   

2. CanvasにButtonオブジェクトを追加する

3. AppControllerに以下の関数を追加し、ButtonのOnClick()イベントと連携させる

   public void SwitchCamera()
   {
       if (_srd2DView.SourceTexture != SRD2DView.SRDTextureType.Custom)
       {
           _srd2DView.SetSourceTexture(SRD2DView.SRDTextureType.Custom);
       }
       else
       {
           _srd2DView.SetSourceTexture(SRD2DView.SRDTextureType.LeftEye);
       }
   }
   

   

再びアプリをビルドしてexeを実行します。
「SWITCH CAMERA」ボタンが2画面目の左下に表示され、クリックするとSRDisplayManagerの LeftEye の絵と SecondCamera の絵を切り替えられます。