Unity

レンダーテクスチャーを使用して別のシーンの内容をテクスチャーとして表示させる

Siden oppdatert :
ページ作成日 :

現在表示しているページは選択中の表示言語には対応しておりません。

検証環境

Windows
  • Windows 11
Unity エディター
  • 2021.3.3f1
入力システムパッケージ
  • 1.3.0

この Tips の前提設定

この Tips の説明の前提として以下の設定を事前に行っています。

はじめに

レンダーテクスチャーを使用すると描画内容を画面ではなくテクスチャーに書き込むことができます。 これによりあらかじめテクスチャーの画像を用意せずともゲーム実行中に自由にテクスチャーを生成することが出来ます。

また毎フレーム動的に変化するようにレンダーテクスチャーに書き込めば、例えばゲーム内に存在するディスプレイにメインカメラとは別の映像を映し出すことも可能です。

画像の用意

レンダーテクスチャーを使う場合、画像などを用意する必要はありませんが、描画結果を分かりやすくするためにサンプルとして用意しておきます。

レンダーテクスチャの作成

プロジェクトからアセットを作成します。「作成」から「レンダーテクスチャ」を選択します。

名前は任意で構いません。現時点で外部から名前を直接指定することはないので NewRenderTexture としておきます。

レンダーテクスチャを選択しインスペクターからサイズを指定します。レンダーテクスチャは描画領域なので必ずサイズを指定する必要があります。 今回は別に作成したシーンを書き込みたいので縦横比を 16:9 になるようにしています。

レンダーテクスチャの描画先設定

初期作成されているシーンのヒエラルキーから「UI」->「Raw 画像」を選択して配置します。 このオブジェクトにレンダーテクスチャの内容を表示するようにします。 UI のオブジェクトになっていますが、必要なのは「Raw Image」コンポーネントであり、別なオブジェクトに設定することも可能です。

RawImage が配置されました。UI オブジェクトなので Canvas に配置されます。 まだ何も設定していないので白い矩形が表示されるだけです。

スケールを等倍にしたいので RawImage オブジェクトのサイズをレンダーテクスチャと同じに設定します。 縦横比を同じままにすればサイズを変えても拡大縮小されるだけになりますが、縦横比を変えた場合は描画結果が縦や横につぶれます。

RawImage オブジェクトの「Raw Image」コンポーネントに「テクスチャ」があるので、そこに先ほど作成したレンダーテクスチャをセットします。 レンダーテクスチャの内容はまだ空なのでビューでは透過されます。

レンダーテクスチャの描画内容のシーン作成

次にレンダーテクスチャに描画する内容を作成するための新しいシーンを作成します。 メニューから「ファイル」を選択し「新しいシーン」を選択します。

今回のサンプルは 2D なので同じく 2D のシーンを選択します。

Scene フォルダに作成します。名前は SampleSceneTexture としておきます。

シーンを作成したら適当にオブジェクトを配置します。レンダーテクスチャの内容が分かるようにしておけばＯＫです。 一応カメラ外にはみ出たものが描画されないことを確認するために、カメラ枠付近にもスプライトを配置しています。

オブジェクトが重なっているとオブジェクトの前後関係が不確定になってしまうので背景がある場合は背景のレイヤーの順序を下げておきます。

「MainCamera」を選択したら「ターゲットテクスチャ」にレンダーテクスチャーをセットします。これにより描画内容はレンダーテクスチャーに描画されるようになります。

「MainCamera」に設定されている「Audio Listener」コンポーネントは削除してください。 レンダーテクスチャーに必要なのは描画だけなので「Audio Listener」は不要です。 実行時に複数の「Audio Listener」が存在してしまうと警告が表示されます。

ちなみにこの状態でレンダーテクスチャ用のシーンを実行すると画面には何も表示されません。これはレンダーテクスチャーに描画しているためです。 もし画面上で確認したい場合はいったん「ターゲットテクスチャ」を削除してから実行してください。

レイヤーの設定

今回のサンプルではシーンを２つ同時に動かすことになりますが、そのまま動かしてしまうとレンダーテクスチャに描画する内容もメイン画面に表示されてしまうので、レイヤーを分けて描画されないようにします。

まずはエディタの右上にあるレイヤーから「レイヤーを編集」を選択します。

名前と場所は任意ですがここでは新たに RenderTarget という名前のレイヤーを追加します。

レイヤーを追加したらレンダーテクスチャ用のシーンを開き、描画するすべてのオブジェクトを選択してレイヤーの値を先ほど作成した RenderTarget に変更します。

これで SampleSceneTexture シーンの方の編集は終わりになるので保存してください。

レンダーテクスチャの表示

SampleScene シーンを開いたらヒエラルキーに SampleSceneTexture シーンをドラッグ＆ドロップして追加してください。 するとヒエラルキーに２つのシーンが存在する形となり画面には SampleSceneTexture シーンの内容が表示されるはずです。

SampleSceneTexture シーンの内容が邪魔なのでヒエラルキーから SampleSceneTexture シーンの目アイコンをクリックしてください。 すると SampleSceneTexture シーンのオブジェクトが非表示になり SampleScene シーンの内容だけ表示されるようになります。 ちなみにレンダーテクスチャーの設定は全て終わっているので、SampleScene シーンに配置した Raw Image にはレンダーテクスチャの内容が表示されているはずです。

ただ目アイコンによる非表示はあくまでもエディタ上で見えなくするためだけの設定なのでそのままゲームを実行すると SampleSceneTexture シーンの内容も画面に表示されてしまいます。 そこで SampleScene シーンの Main Camera を選択しインスペクターの Camera のカリングマスクから RenderTarget のチェックを外します。 これによってゲームを実行しても RenderTarget レイヤーにあるオブジェクトは表示されなくなります。

試しにゲームを実行してみてください。意図したとおりに表示されるはずです。

レンダーテクスチャーを動かしてみる

ただこの状態だと本当にレンダーテクスチャーとして動作しているのか、単に画像を切り抜きで表示しているのか分かりにくいので動かしてみます。

内容はなんでもいいですがここではスプライトを自動回転させる動きを設定してみます。スクリプトを作成し SelfRotate という名前で作成します。

ここでは自身を少しずつ回転させるという簡単な処理を入れておきます。

using UnityEngine;

public class SelfRotate : MonoBehaviour
{
  // 更新はフレームごとに 1 回呼び出されます
  void Update()
  {
    transform.Rotate(0, 0, 0.1f);
  }
}

スクリプトを作成したら回転させたいオブジェクトにどんどんアタッチしていきます。

後はゲームを実行して回転するか確認してみてください。ちゃんとレンダーテクスチャーの中でオブジェクトが動いていることを確認できると思います。

複数のシーンを同時に動かす方法

ここでは簡単なサンプルで作成したので初めからシーンを２つ実行させていますが、実際のゲームでは単一のシーンから始めないといけない場合が多くあります。 その場合はシーンの開始時などに動的にシーンを追加して複数シーンにすることになると思います。

シーンの追加方法については「シーンを追加する」で説明しているのでそちらを参考にしてください。 基本的には SceneManager.LoadScene("<シーン名>", LoadSceneMode.Additive); を呼べば大抵は解決するはずです。

レイヤーを使わずにレンダーテクスチャの内容をメイン画面に表示されるのを防ぐ方法

レンダーテクスチャの内容がメイン画面に表示されてしまうのは、メインのシーンとレンダーテクスチャ用のシーンが同じ場所に存在しているためです。 なのでレンダーテクスチャの内容をメインのシーンでは絶対に写さない場所に移動してしまえばメイン画面に表示されることはありません。 例えばレンダーテクスチャのオブジェクトやカメラを (-10000, -10000) の場所に移動してしまえは OK です。 こうすればレイヤー設定は不要になります。

レンダーテクスチャの内容を別シーンに分けずにひとつのシーンで完結させたい場合

これを行うには前述のレイヤーを使わない方法と同じ手法になります。 レンダーテクスチャで表示する内容をメインのカメラでは絶対に表示することがない場所に移動してしまえばよいです。 シーンを分けて実現する方法と異なるのはカメラを２つ配置する必要があることですが、それ以外は基本的にシーンを分ける方法と同じ設定を行うことになります。

3D ゲームで別の視点で写した内容をレンダーテクスチャとして写したい場合

本 Tips では 2D をメインに説明していたので 3D についてあまり触れていませんでしたが、基本的にはやり方は同じです。 １つの 3D 空間を複数の視点で写すことになるのでシーンを２つ以上にする必要はありません。 カメラを必要な数だけ配置してその描画先をレンダーテクスチャにし、後はそのレンダーテクスチャーをどこに表示するかを設定すればＯＫです。