UnityでCanvasの前後関係を制御する方法

2024年12月2日

Unityで複数のCanvasを使用する際、適切な前後関係を設定することが重要です。本資料では、Screen Space - CameraモードにおけるCanvasの前後関係を制御する方法を詳しく説明します。

---

ゲームビューでの実行結果

1. 前提知識

CanvasのRender Mode

Canvasには以下の3つのRender Modeがありますが、本資料ではScreen Space - Cameraに焦点を当てます。

1. Screen Space – Overlay
   • UIがスクリーン全体に描画されます。
   • 描画順序はSorting Orderで制御されます。
2. Screen Space – Camera（本資料の対象）
   • UIが特定のカメラに関連付けられて描画されます。
   • 描画順序はOrder in LayerとSorting Layerで制御されます。
3. World Space
   • UIが3Dオブジェクトとしてシーン内に配置されます。

---

2. 前後関係を制御するプロパティ

2.1 Order in Layer

Order in Layerは、同じSorting Layerに属するCanvas間の前後関係を制御します。

• 値が大きいほど手前に描画されます。
• 値が同じ場合、描画順序は保証されません。

設定手順

1. 各Canvasを選択します。
2. InspectorのCanvasコンポーネントでOrder in Layerを確認。
3. 必要に応じて値を調整します。

例

• 背景Canvas: Order in Layer = 0
• 前景Canvas: Order in Layer = 1

---

2.2 Sorting Layer

Sorting Layerは、Canvasをグループ化して描画順序を整理するプロパティです。

• 異なるSorting Layerに属するCanvas間では、Sorting Layerの優先順位が適用されます。
• Sorting Layerを設定することで、複数のUIグループを管理しやすくなります。

設定手順

1. Unityメニューで「Edit > Project Settings > Tags and Layers」を開きます。
2. 必要なSorting Layerを作成（例: Background, Foreground）。
3. 各CanvasのInspectorでSorting Layerを設定します。

例

• 背景Canvas: Sorting Layer = Background
• 前景Canvas: Sorting Layer = Foreground

---

2.3 Plane Distance

Plane Distanceは、Canvasが関連付けられたカメラからどれだけ離れて描画されるかを指定します。

• 通常はOrder in Layerが優先されますが、Plane Distanceを大幅に変更すると描画順序に影響することがあります。

設定手順

1. CanvasのInspectorでPlane Distanceを確認。
2. 必要に応じて値を調整します。

• 手前のCanvas: 小さい値（例: 50）。
• 背景のCanvas: 大きい値（例: 100）。

---

3. カメラ設定の影響

3.1 Culling Mask

カメラが描画するオブジェクトを制御するプロパティです。

• Sorting Layerや特定のオブジェクトをカメラで制御したい場合に使用します。

設定手順

1. 各カメラのInspectorでCulling Maskを確認。
2. 対象のCanvasが含まれるレイヤーを有効化します。

---

4. 設定例

以下は、背景Canvasと前景Canvasを分けて設定する例です。

Canvasの設定

項目	背景Canvas	前景Canvas
Sorting Layer	Background	Foreground
Order in Layer	0	1
Plane Distance	100	50

カメラの設定

項目	背景用カメラ	前景用カメラ
Culling Mask	Background	Foreground

---

5. チェックリスト

1. CanvasのOrder in Layerが正しいか？
   • 前後の描画順序を制御する主要なプロパティです。
2. Sorting Layerを適切に活用しているか？
   • 複数のUIグループが存在する場合は、Sorting Layerを整理して管理します。
3. カメラのCulling Maskが正しく設定されているか？
   • 不要なCanvasが描画されないようにします。
4. Plane Distanceが意図通りか？
   • 必要に応じてCanvasの距離を調整します。
5. Game Viewで結果を確認する
   • すべての設定が正しく反映されているか確認します。

---

6. 注意点

1. Canvasの分割は最小限に

• Canvasを増やすとパフォーマンスに影響する可能性があります。可能な限り1つのCanvasにまとめて管理しましょう。

1. Order in Layerの重複に注意
   • 複数のCanvasで同じOrder in Layerを設定すると、描画順序が不定になる可能性があります。
2. カメラのRender Modeを統一
   • Screen Space - Cameraと他のRender Modeが混在している場合、意図しない結果になることがあります。

---

Emission、Bloomに関係する設定、登録

添付のキャプチャーから合わせてみましょう

using UnityEngine;
using UnityEngine.UI;

public class EmissionExample : MonoBehaviour
{
    public Color glowColor = new Color(1.0f, 1.0f, 0.5f); // 発光色
    public float glowIntensity = 2.0f; // 発光の強度

    void Start()
    {
        // マテリアルの発光色を設定
        GetComponent<Image>().material.SetColor("_EmissionColor", glowColor * glowIntensity);
    }
}

using UnityEngine;

public class EmissionExample3DObject : MonoBehaviour
{
    public Color emissionColor = Color.blue;  // 発光する色
    public float emissionIntensity = 2.0f;    // 発光の強度

    void Start()
    {
        Renderer renderer = GetComponent<Renderer>();
        if (renderer != null)
        {
            Material material = renderer.material;

            // エミッションを有効化
            material.EnableKeyword("_EMISSION");

            // エミッションカラーを設定
            material.SetColor("_EmissionColor", emissionColor * emissionIntensity);
        }
    }
}