Unity_Lesson

UnityのCanvasは、UI要素を画面上に表示するための基盤として使用されるコンポーネントで、特にユーザーインターフェースを構築する際に重要です。

Canvasを使うことで、画面解像度やサイズに対応したスケーリングや配置が可能になります。

以下、Canvasの仕組みや種類、設定項目、使い方について詳しく説明します。

1. Canvasの仕組みと役割

Canvasコンポーネントは、画面上のUI要素（テキスト、ボタン、画像など）を管理するための基礎です。
Canvasを利用してUI要素を表示するには、Canvasオブジェクトを作成し、その子オブジェクトとしてボタンやテキストなどのUI要素（GameObject）を追加します。この構造にすることで、UI要素がCanvasに従い、画面全体やビューポートに対して適切に表示されるようになります
Canvasには複数の設定項目があり、それぞれの設定によってレンダリング順が変わります。

2. Canvasの種類

Canvasには、以下の3つのレンダリングモードがあり、各モードによってUIの表示方法や制御方法が異なります。

a. Screen Space - Overlay（スクリーンスペース・オーバーレイ）

UIが常に画面の最前面に表示され、シーン内のカメラの影響を受けません。
解像度やアスペクト比に関係なく、画面サイズに合わせてUIが自動でスケーリングされます。
通常のUI（メニュー、HUDなど） を表示するのに最適です。

b. Screen Space - Camera（スクリーンスペース・カメラ）

UIは特定のカメラによってレンダリングされます。Canvasをリンクさせるカメラを指定する必要があります。
カメラの位置や向きによって影響を受けるため、奥行きのあるUIやUIエフェクトが必要な場合に使用されます。
UIの配置はカメラのビューポートに基づき、画面サイズに応じてスケールや位置が変わります。

c. World Space（ワールドスペース）

UI要素が3Dオブジェクトとして扱われ、シーン内の他のオブジェクトと同様に、座標とスケールを自由に設定できます。
3D空間内での位置や回転が可能で、たとえばゲーム内の看板やインタラクティブな3DオブジェクトとしてUIを配置したい場合に最適です。
カメラからの距離や角度の影響を受け、視点に応じてUIの見え方が変化します。

3. Canvasの設定項目

Canvasにはいくつかの重要な設定があり、それぞれの設定がUIの描画方法やパフォーマンスに影響します。

a. Render Mode

Overlay、Camera、Worldのいずれかを選択し、UIがどのように表示されるかを決定します。

b. Canvas Scaler

Canvasのスケーリング方法を設定し、異なる解像度に対応します。
- Constant Pixel Size: 常に同じピクセル数で表示。解像度が変わっても、UIのサイズは一定。
- Scale with Screen Size: 画面サイズに合わせてスケール。指定した解像度基準で自動的にスケールされます。
- Constant Physical Size: 実際の物理サイズ（インチ）を基準にスケールし、デバイスのDPIに対応します。

c. Additional Shader Channels

必要な追加のシェーダーチャンネルを設定するオプションです。たとえば、NormalやTangentなどを選択することで、よりリッチなグラフィックス表現が可能です。

d. Sorting LayerとOrder in Layer

Canvasが描画される順序を指定し、重なり順を調整します。
複数のCanvasがある場合、この順序を変更することでUIが上に描画されるか、下に描画されるかを管理できます。

4. Canvasを使用した基本的なUIの作成

以下は、簡単なボタンをCanvas上に配置するコード例です。

using UnityEngine;
using UnityEngine.UI;

public class UIButtonExample : MonoBehaviour
{
    void Start()
    {
        // Canvasの作成
        GameObject canvasObj = new GameObject("Canvas");
        Canvas canvas = canvasObj.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        
        // Canvas Scalerの設定
        CanvasScaler scaler = canvasObj.AddComponent<CanvasScaler>();
        scaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
        scaler.referenceResolution = new Vector2(1920, 1080);

        // ボタンの作成
        GameObject buttonObj = new GameObject("Button");
        buttonObj.transform.SetParent(canvasObj.transform);
        
        // ボタンにRectTransformとImageを追加
        RectTransform rectTransform = buttonObj.AddComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(160, 60);
        Button button = buttonObj.AddComponent<Button>();

        // ボタンにテキストを追加
        GameObject textObj = new GameObject("ButtonText");
        textObj.transform.SetParent(buttonObj.transform);
        Text text = textObj.AddComponent<Text>();
        text.text = "Click Me";
        text.font = Resources.GetBuiltinResource<Font>("Arial.ttf");
        text.alignment = TextAnchor.MiddleCenter;
        text.rectTransform.sizeDelta = rectTransform.sizeDelta;
    }
}

5. 関連技術・概念

RectTransform: Canvas上のUI要素を配置するためのコンポーネントで、UIの位置やサイズを制御します。
Anchors（アンカー）: RectTransformでUIを親オブジェクトに対して相対的に配置し、画面サイズの変化に応じたリサイズを可能にします。
Pivot（ピボット）: UI要素の中心位置を設定するプロパティで、要素の回転やスケーリングの基準になります。

6. Canvasにおけるパフォーマンスの考慮点

Canvasの分割: 動的に変更されるUI要素を別のCanvasに分けることで、再描画の負荷を低減できます。
Batching（バッチ処理）: UI要素をまとめて描画することで、処理負荷を軽減します。Canvasが頻繁に更新される場合、過剰な再描画を防ぐためにバッチ処理を活用します。

Canvasは、画面上でのインターフェースの描画や操作性に重要な役割を果たし、UIの位置や見栄えを管理する上で非常に重要なコンポーネントです。