メインコンテンツまでスキップ

ScaleWithScreenSize

UnityのCanvasのレンダリングモードには、UIのスケーリングを制御する設定として「Scale With Screen Size」があります。
これは、キャンバスが異なる画面解像度やアスペクト比でどのようにスケール（拡大縮小）されるかを決定します。





Scale With Screen Size の基本​

このオプションは、UI要素の見た目や配置が、異なる解像度の画面でもバランスよく表示されるようにする設定です。

  1. キャンバスのレンダリングモード

    • 「Screen Space - Overlay」または「Screen Space - Camera」のモードで使用可能。
    • キャンバス全体が画面に対してスケーリングされます。

  2. 目的

    • デバイスの解像度やアスペクト比が変わっても、UIが意図した通りのレイアウトで表示されるようにする。




主要なパラメーター​

「Scale With Screen Size」を選択すると、以下の設定項目が利用できます。

1. Reference Resolution​

  • 説明:
    • UIをデザインする基準となる解像度（幅×高さ）。
  • 例:
    • 1920×1080 を設定すると、この解像度を基準にしてスケーリングが行われます。
  • 動作:
    • 実際の解像度がこの値と異なる場合、UIの要素が拡大縮小されます。

2. Screen Match Mode​

画面のアスペクト比に応じて、どのようにスケールするかを決めるモードです。

a. Match Width Or Height​

  • 解像度に応じて幅か高さに基づいてスケールします。
  • Match のスライダー (0～1):
    • 0: 幅（Width）に合わせてスケール。
    • 1: 高さ（Height）に合わせてスケール。
    • 0.5: 幅と高さを均等にスケール。

b. Expand​

  • キャンバスが基準解像度を完全にカバーするようにスケールします。
  • 結果: 一部のUIが画面外に出る可能性があります。

c. Shrink​

  • キャンバス全体が画面内に収まるようにスケールします。
  • 結果: 基準解像度に収まりきらない部分のスペースが生まれます。




動作の例​

1. 基準解像度：1920×1080​

  • スライダーの設定：
    • Match Width Or Height = 0.5（幅と高さを均等にスケーリング）。
  • 実際の解像度：1280×720
    • 解像度が基準より小さいため、全体が縮小されます。
    • UIは縮小されつつも、全体的なレイアウトは保たれる。

2. スライダー設定​

Match = 0​

  • 幅（Width）を基準にスケーリング。
  • 横長の画面では問題なく表示されるが、縦長の画面では上下に余白が出る可能性あり。

Match = 1​

  • 高さ（Height）を基準にスケーリング。
  • 縦長の画面では問題なく表示されるが、横長の画面では左右に余白が出る可能性あり。




ポイントと注意点​

  1. Reference Resolution を適切に設定する:

    • 開発対象となる主要デバイスの解像度を基準にするのが理想的です。

  2. Screen Match Mode の選択:

    • Match Width Or Height は、ほとんどのケースでバランスが取りやすい選択肢。
    • UI要素が必ず画面内に収まることが必要なら、Shrink を選択する。

  3. UI要素の Anchor と Pivot の設定:

    • 「Scale With Screen Size」を有効にしても、Anchor と Pivot の設定が適切でないと、レイアウトが崩れる可能性があります。




まとめ​

「Scale With Screen Size」は、異なる解像度やアスペクト比でのUIの見た目を整える重要な設定です。