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

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


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

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

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

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


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



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

1. まずはスクショのように、空オブジェクト(FixedImage)[※名前等は任意]を作り、その中に Canvas と Camera を新規に追加しよう。Canvas には1つ 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ゲームの固定背景みたいな使い方になるだろう。







(関連記事)
【Unity】【C#】BMP をランタイムで読み込む
【Unity】【C#】画面解像度とアクペクト比(整数)を求める
【Unity】ヒエラルキー(シーン)の Image, RawImage に使われている画像(Texture)を検出するエディタ拡張(ツール)
【Unity】【C#】HDR Color を計算(変換)する
【Unity】【C#】ガンマ(Gamma, sRGB) - リニア(Linear) 値の相互変換
【Unity】【C#】3DText(TextMesh) を半透明より手前に表示する


関連記事
スポンサーサイト



category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityリファレンス  画像ファイル読み込み 
tb: 0   cm: --


トラックバック

トラックバックURL
→http://fantom1x.blog130.fc2.com/tb.php/415-9c554416
この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop