【Unity】【C#】固定背景画像(2D)を表示する

ヽ｜∵｜ゝ(Fantom) の開発blog？ホーム » Unity »【Unity】【C#】固定背景画像(2D)を表示する

【Unity】【C#】固定背景画像(2D)を表示する

2022/07/20 Wed [edit]

　VRM Live Viewer には固定で2D画像を表示できる機能があるが、これの実装を簡単に書いておこう。

　といっても、私もこちらの記事を参考にさせて貰って作ったものだったりする（とりま何でもググる(笑)）。

(参考) 背景・前景を固定する

　ただ今の Unity のバージョンだともう少し簡単にできる方法があるので、あくまでも考え方だけ応用した感じ。大まかに説明すると、Quad の代わりに Canvas と RawImage で同じことをすれば、調整などもいらないのでかなり楽にできる。それではやってみよう。

■ヒエラルキー上に固定背景専用のカメラと Canvas(RawImage) を用意する
■スクリプトで画像をロードして、固定背景として映す

(※) Unity 2020.3.34f1 / Windows11(x64) で確認

■ヒエラルキー上に固定背景専用のカメラと Canvas(RawImage) を用意する

1. まずはスクショのように、空オブジェクト(FixedImage)[※名前等は任意]を作り、その中に Canvas と Camera を新規に追加しよう。Canvas には１つ RawImage を置いておく。

2. 固定背景には余計なものを映したくないので、専用の Layer (2DImage)[※名前は任意] を作って、全て Layer を設定しておく（一番上の FixedImage の Layer を変更すれば「子オブジェクトも変更するか？」のメッセージが出るので適用するのが簡単）。

3. Canvas の Render Mode を「Screen Space - Camera」にし、Render Camera に先程新規追加した Camera をセットしておく。Order in Layer は -1000 など、なるべく一番背後になるような値にしておくと良いだろう。

4. Camera の Clear Flags は Solid Color にし、黒にしておく。Culling Mask に先程作った専用 Layer (2DImage) を指定し、他の Layer が映らないようにしておく。2D 画像専用なら、Projection を Orthographic にしておくと良いだろう。Depth は Main Camera より低い値にしておく。

5. RawImage はストレッチを最大にして、Aspect Ratio Fitter をアタッチしておくと良いだろう。アス比(Aspect Ratio) は 1.77778 (= 16/9 [16:9]) にしておけば良い（もちろん、4:3 の画像なら 1.33333 とかにする）。

6. 最後に元からある Main Camera の Clear Flags を「Depth only」にし、Culling Mask からは「2DImage」の Layer は外しておく（2DImage は映さない＝専用カメラで映すため）。

　これで準備は完了だ。固定背景とそれ以外をわかりやすくするために、ヒエラルキーに Capsule など 3Dオブジェクトを置いておくのも良い。次にスクリプトで画像をロードしてみよう。

■スクリプトで画像をロードして、固定背景として映す

　ヒエラルキーの RawImage をスクリプトにアタッチしたら、適当な画像を path に入れて欲しい。フォーマットは .jpg か .png が良いだろう。あとはエディタ上でプレイ(開始)すれば、読み込めるだろう。

●画像を読み込んで、固定背景にするテストスクリプト

using System.IO;
using UnityEngine;
using UnityEngine.UI;

namespace Example
{
    public class FixedImageTest : MonoBehaviour
    {
        public RawImage rawImage;
        public string path;     //背景にしたい画像のフルパスをインスペクタで入れる

        private void Start()
        {
            if (File.Exists(path))
            {
                rawImage.texture = LoadTexture2D(path);
            }
        }

        //2D画像をロード
        Texture2D LoadTexture2D(string path)
        {
            var bytes = File.ReadAllBytes(path);
            var texture = new Texture2D(2, 2, TextureFormat.ARGB32, mipChain: false);
            texture.filterMode = FilterMode.Bilinear;
            texture.Compress(false);
            texture.LoadImage(bytes);
            return texture;
        }
    }
}

　2D画像のロードは定型処理なので、static にしてライブラリとして使い回せば良いと思う（ここでは簡単にするため、エラーキャッチ等してないので注意）。動画にしたいときは VideoPlayer に動画を読み込んで、RenderTexture に映して表示すれば良い。

　注意点としては Main Camera の Clear Flag を Depth only にしなければならないので、その辺りの切り替えが必要ということかな。アプリでは 2D画像/動画モードに切り替えたときにそうしてる（空[Skybox]が使えなくなるので注意）。画面に貼り付いた感じになるので、距離感や方向感も無くなるね。ADVゲームの固定背景みたいな使い方になるだろう。