Unity入門

【Unity】Canvasの使い方完全ガイド｜描画モード・スケーラー設定・レスポンシブUI・最適化まで徹底解説

  /
目次
  1. 使用環境
  2. この記事でわかること
  3. UnityのCanvasとは？
  4. UnityのCanvasの使い方
    1. Canvasの役割
    2. Canvasの追加方法と構成要素
    3. CanvasのRender Mode（描画モード）
    4. Render Mode（描画モード）の選択
  5. 画面サイズに応じたUIの調整（Canvas Scaler）
  6. Raycast処理（Graphic Raycaster）
  7. スクリプトでCanvasを操作する
    1. Canvasの表示・非表示
  8. パフォーマンス最適化
    1. 不要なCanvasの更新を減らす
  9. まとめ

使用環境

・Unity Editor：2021.3.18f1

この記事でわかること

  • Canvasの基本とレンダリングモードの違い
  • 画面サイズに応じたレスポンシブUIの作り方（CanvasScalerの設定）
  • スクリプトでCanvasを操作する方法
  • パフォーマンス最適化（バッチング・描画負荷の削減）

UnityのCanvasとは？

ピッグダディ

今日は「UnityのCanvas」について学んでいこう。
UIを表示するうえで、Canvasは一番大切な土台になるんだよ。

ピッグボーイ

Canvasっていつも最初に自動でついてくるけど、
設定を変えたことがなくて。
画面サイズが変わるとUIがズレたりして困ってました。

ピッグガール

私は、ゲームを作っていてCanvasが重くなるって聞いたんですけど、
パフォーマンスの対策ってあるんですか？

ピッグダディ

うんうん、Canvasは奥が深いけど、正しく設定すればキレイに表示できて動作も軽くなるよ。
この記事では、Canvasの基本から描画モードの違い、レスポンシブなUIの作り方、スクリプト操作、最適化のポイントまでしっかり解説していくね。

UnityのCanvasの使い方

Canvasの役割

Canvasは、Unity のUI（Text、Button、Image など）を表示するための基盤となるコンポーネントです。
すべてのUI要素はCanvasの子オブジェクトとして配置される必要があります。

・UIをワールド空間（3D空間）や画面上に配置できる
・スケーリングやアンカーを設定して、解像度に適応
・描画順序を管理して、UIの優先度を調整できる

※ この他にも以下のサイトを参考にしてください。

【Unity】TextMeshProの使い方完全ガイド｜スクリプト制御・フォント追加・日本語対応まで徹底解説UnityのTextMeshProをマスターしよう！スクリプトでの操作方法、フォント追加の手順、日本語対応の設定まで詳しく解説。初心者でもすぐに使えるサンプルコード付き！...
【Unity】Image・Panelの使い方まとめ｜画像変更・色変更・透明度（alpha）・Sprite制御UnityのImageやPanelを自在に操作！画像の変更、色の設定、アルファ（透明度）調整、Spriteの適用方法まで詳しく解説。初心者でもすぐに実装できるサンプルコード付き！...

Canvasの追加方法と構成要素

① Hierarchyから追加

・ [Hierarchie] → [右クリック] → [UI] → [Canvas]を選択
・ Canvasオブジェクトがシーンに追加される

② Canvasの構成要素

Unity Canvasの導入の画像
コンポーネント名役割主な機能
CanvasUI の土台UI を描画するための基本コンポーネント
Canvas ScalerUI のスケール調整画面サイズに応じて UI の大きさを自動調整
Graphic RaycasterUI のクリック判定UI のタッチやクリックを検出し、他のオブジェクトと判定を調整

CanvasのRender Mode（描画モード）

Canvasには、3つのRender Mode（描画モード）があり、それぞれのUIの表示方法が異なります。

➡2DゲームやHUDなら「Screen Space – Overlay」がおすすめ
➡カメラに合わせて動かしたい場合は「Screen Space – Camera」
➡ワールド空間にUIを配置したい場合は「World Space」

Rendering Mode特徴用途
Screen Space – Overlay画面の一番上にUIを描画UI（メニュー、HUDなど）
Screen Space – Camera指定したカメラの手前にUIを描画UIに遠近感を出したい場合
World SpaceUIを3Dオブジェクトとして配置3DのUI、VR/ARのUI

Render Mode（描画モード）の選択

Render Modeを変更することでレンダリングモードを選択できる。

Unity CanvasのRenderModeの画像

画面サイズに応じたUIの調整（Canvas Scaler）

CanvasのCanvasScaler要素を正しく設定することで、画面サイズが変わってもUIが崩れないように調整できます。

Unity CanvasのCanvas Scalerの画像
UI Scale Mode特徴おすすめの用途
Constant Pixel Size解像度に関係なく、UIのサイズを固定ピクセルで表示固定解像度のアプリ
Scale With Screen Size
（おすすめ）		画面サイズに合わせて UIを 拡大・縮小 するスマホ・タブレット向けのアプリ
Constant Physical SizeUIを 物理サイズ（cm, inch） で統一VRやARなど、デバイスごとに物理的なサイズを揃えたいとき

Raycast処理（Graphic Raycaster）

UIのクリック判定の設定をするコンポーネントです。

Unity CanvasのGraphick Raycasterの画像
設定名説明主な用途
Ignore Reversed Graphics裏向き（背面）の UI を無視 する画面に見えていない UI をクリック対象外にする
Blocking ObjectsNone（UIのみ） / Two D（2Dオブジェクト） / Three D（3Dオブジェクト） / All（すべて）をブロック対象にするUI をクリックしたとき、背後の 3D/2D オブジェクトに影響させたくないとき
Blocking Maskレイヤー単位で クリックをブロックするオブジェクトを制御特定のレイヤーのオブジェクトだけ UI のクリックを無効化したいとき

※ ブロックとは例えばUIの後ろに3Dオブジェクトがある場合にUIで遮るようなものです。

スクリプトでCanvasを操作する

Canvasの表示・非表示

➡ゲーム開始時にUIを表示/非表示することが可能です！

using UnityEngine;

public class CanvasManager : MonoBehaviour
{
    public Canvas gameCanvas;

    public void ShowCanvas()
    {
        gameCanvas.gameObject.SetActive(true);
    }

    public void HideCanvas()
    {
        gameCanvas.gameObject.SetActive(false);
    }
}

パフォーマンス最適化

不要なCanvasの更新を減らす

・Canvasの更新が頻繁に発生すると、パフォーマンスが低下する
・UIが頻繁に更新される場合、キャンバスを分けて管理すると負荷軽減！
・Graphic Raycasterを必要ない場合はオフにする

canvas.pixelPerfect = false; // ピクセルパーフェクトを無効にして軽量化

まとめ

・CanvasはUnityのUIを描画する基盤となるコンポーネント
・レンダリングモードを正しく選択
・CanvasScalerを設定すれば、画面サイズが変わってもレイアウトが崩れない
・スクリプトでCanvasを制御可能
・Canvasの最適化を行い、パフォーマンスを維持！

Canvas
関連記事