1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Unity】カメラの画面描画範囲をUIに合わせる

Last updated at Posted at 2024-08-21

概要

オーバーレイ UI に合わせてカメラの画面描画範囲を制御したい

結論

カメラの Viewport 値を設定することで実現できる.UI (RectTransform) から取得した Viewport 領域をカメラに設定する.

詳細

RectTransform から viewport 値を取得する

ビューポート座標は画面左下を ( x, y ) = ( 0, 0 )、 画面右上を ( x, y ) = ( 1, 1 ) とした座標値.
RectTransform.GetWorldCorners()で四隅のワールド座標が取得できるので、これと画面サイズからビューポート座標を計算する.

※もし Overlay 以外の RenderMode に対応したい場合、GraphicRaycaster.cs の Raycast()の実装が参考になる

20240821_Rect_Viewport.gif

【参考】

カメラの viewport 値に設定する

Camera.rect に要素の値域が 0~1 の Rect を代入することで、viewport 設定が行える.

.cs
// ビューポート値を計算 (※canvasはOverlayを想定)
var viewportRect = RectTransform.GetViewportRect();

// カメラのプロパティに設定する
Camera.rect = viewportRect;

インスペクタでの以下に対応している(※画像は URP の場合)
ファイル名

(X,Y) = (0,0) / (W,H) = (1,1) の場合
ファイル名

(X,Y) = (0.2,0.1) / (W,H) = (0.7,0.5) の場合
ファイル名

【注意点】
アクティブなカメラが一つのみの場合、Viewport を変更した際にカメラの非描画領域(ビューポート外)の画面ピクセルがクリアされないという問題が発生した.(※エディタモードのときはバッファがクリアされる)

対策として背景描画用のカメラ(CullingMask = nothing, Priority = -10)を配置して、画面の描画を行うようにした.

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?