unity 3dでレターボックスを実現したい

unity３ｄを用いてレターボックスのようなものを実現したいです．
正方形型のviewを作成し，正方形の範囲外は真っ黒で塗りつぶされているようなシーンを作成したいと考えています．

現状，cameraの子としてcanvasを作成し，canvasの子として黒のbarをはいちするという方法でレターボックスのようなものを作っています．
しかしこの方法では，シーンに配置されたオブジェクトの位置（特にｚ座標）によって見え方に差が生じてしまうため，作成したいレターボックスとは程遠いです．

初歩的な質問をしてしまい申し訳ありませんが，どのように解決すればよいか教えていただけると幸いです．

IShix

2017/12/13 11:35

黒のbarってなんですか？できればスクショをいただけると答えやすいです

pusher

2017/12/13 11:54

ご回答ありがとうございます．スクリーンショットをあげました．

行動規範の内容に同意します

回答2件

ベストアンサー

###今の、blackBarはuGUIで扱える形式ではないです。
RectTransformが含まれていないのでCanvasに入れ子にしたとしてもCanvasの状態によって変換が行われません。

正しくはこうなります。
Hierarchy上の該当Canvasを選択し、その状態で右クリックからuGUIの要素を作成すると間違えないです。

###uGUIのみ正方形に固定する

まずCanvasをこんな感じの設定にします。

背景になるImageのみ全画面にstretchさせます

その中身をCanvasサイズに合わせます。

以上です。

###カメラが撮影する範囲もuGUIも正方形に固定する

この場合スクリプトが必要になります。

ちょっと大掛かりになりましたが、間違って設定を変えるのを防止する為スクリプトで強制します。

C#
1using System.Collections;
2using System.Collections.Generic;
3using UnityEngine;
4using UnityEngine.UI;
5
6
7[ExecuteInEditMode]
8public class DisplayManager : MonoBehaviour
9{		
10	[SerializeField] Camera TargetCamera;
11	[SerializeField] CanvasScaler CanvasScaler;
12	[SerializeField] RectTransform SafeAreaTransform;
13
14	/// <summary>
15	/// ターゲットとなるアスペクト
16	/// </summary>
17	Vector2 Aspect = new Vector2(5,5);
18	/// <summary>
19	/// ターゲットとなるディスプレイ解像度
20	/// </summary>
21	Vector2 CanvasScalerRR = new Vector2(400, 400);
22
23	public GameObject SafeArea{ get{ return SafeAreaTransform.gameObject; } }
24	float AspectRate;
25
26	void Awake()
27	{
28		Initarize();
29	}
30
31	public void Initarize()
32	{
33		CanvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
34		CanvasScaler.referenceResolution = CanvasScalerRR;
35
36		AspectRate = (float)Aspect.x / Aspect.y;
37
38		UpdateSafeArea();
39		UpdateScreenRate();
40	}
41
42	void UpdateSafeArea()
43	{
44		float nowAspect = (float)Screen.height / Screen.width;
45		SafeAreaTransform.localPosition = Vector2.zero;
46		SafeAreaTransform.sizeDelta = new Vector2( CanvasScalerRR.y , CanvasScalerRR.x);
47	}
48
49	void UpdateScreenRate()
50	{
51		float baseAspect = Aspect.y / Aspect.x;
52		float nowAspect = (float)Screen.height / Screen.width;
53
54		if (baseAspect > nowAspect) {
55			var changeAspect = nowAspect / baseAspect;
56			TargetCamera.rect = new Rect ((1 - changeAspect) * 0.5f, 0, changeAspect, 1);
57		} else {
58			var changeAspect = baseAspect / nowAspect;
59			TargetCamera.rect = new Rect (0, (1 - changeAspect) * 0.5f, 1, changeAspect);
60		}
61	}
62
63	#if UNITY_EDITOR
64	void Update ()
65	{
66		UpdateSafeArea();
67		UpdateScreenRate();
68		TargetCamera.ResetAspect();
69	}
70	#endif
71}
72

背景が黒の場合、すごく楽です。
なぜなら、カメラのアスペクトを固定すると撮影範囲外は強制的に黒になるからです。
なので今回、背景の変更は含んでいません。背景の色を変えたり画像にしたりしたい場合は、別途背景カメラを用意するといいです。そして背景のみそのカメラで撮影するといいです。

###今回の内容をプラグインにしました
よければ見てみてください。

http://firestorage.jp/download/3be529ea1c833fb863de77a128900a496c4dae2a

投稿2017/12/14 06:39

編集2017/12/14 06:50

IShix

総合スコア1724

pusher

2017/12/14 11:39

迅速かつ丁寧なご回答ありがとうございました．

行動規範の内容に同意します

１．メインとなるカメラに、以下のようなスクリプトをアタッチする

C#
1using System.Collections;
2using System.Collections.Generic;
3using UnityEngine;
4
5public class LetterBox : MonoBehaviour
6{
7    void Start()
8    {
9        Camera targetCamera = GetComponent<Camera>();
10
11        // カメラの大きさを変更
12        targetCamera.rect = new Rect((1f - 1f / targetCamera.aspect) * 0.5f, 0f, 1f / targetCamera.aspect, 1f);
13    }
14}