UnityでUIを作ろうと思ったら、Canvasという言葉が出てきますよね。
Canvasって何なのか、なぜ必要なのか、よく分からないという人もいるかもしれません。
この記事では、Canvasの役割とUIが表示される仕組みを初心者向けに噛み砕いて解説します。
UIが表示されない・ズレる原因にも触れ、UI理解の入口として説明していきましょう。
- Canvasとは何か
- Canvasの役割
- UIが表示される仕組み
- UIが表示されない・ズレる原因
- Canvasの使い方
Canvasは、UIを表示するためのコンテナです。
UIを作るには、Canvasが必要不可欠ですね。
Unity入門の森を見る 初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
Canvasとは
Canvasは、UI要素を表示するためのコンテナです。
ボタンやテキストなどのUI要素は、Canvasの中に配置することで画面に表示されます。
Canvasの役割
Canvasの役割は、以下の通りです：
- UI要素のコンテナ：ボタンやテキストなどのUI要素を格納
- 表示の管理：UI要素の表示順や位置を管理
- スケーリングの管理：画面サイズに応じたUIのスケーリング
Canvasは、UIを表示するための基盤となるコンポーネントです。
なぜCanvasが必要なのか
Unityでは、3D空間とUI空間が別々に管理されています。
3D空間は、ゲームの世界そのものです。
一方、UI空間は、画面に表示されるUI要素の空間ですね。
Canvasは、このUI空間を定義するために必要です。
Canvasがないと、UI要素を画面に表示できません。
UIが表示される仕組み
UIがどのように表示されるのか、仕組みを説明しましょう。
CanvasとUI要素の関係
UI要素は、Canvasの子オブジェクトとして配置します。
以下のような構造になります：
- Canvas：親オブジェクト（UI空間の定義）
- Button：Canvasの子（ボタンUI）
- Text：Canvasの子（テキストUI）
- Image：Canvasの子（画像UI）
UI要素は、必ずCanvasの子として配置する必要があります。
レンダリングの順序
Unityでは、Canvasは最後にレンダリングされます。
つまり、以下のような順序で描画されます：
- 3Dオブジェクト（ゲームの世界）
- Canvas（UI要素）
この順序により、UIが常に最前面に表示されるようになっています。
Canvasが最後にレンダリングされることで、UIが他の要素に隠れないようになっています。
座標系
Canvasには、独自の座標系があります。
3D空間とは異なり、UI空間では画面の左上が(0, 0)となります。
以下のような座標系です：
- 左上：(0, 0)
- 右上：(画面幅, 0)
- 左下：(0, 画面高さ)
- 右下：(画面幅, 画面高さ)
UI空間の座標系を理解することで、UI要素を適切な位置に配置できます。
UIが表示されない・ズレる原因
UIが表示されない、またはズレてしまう原因は、いくつかあります。
よくある原因を説明しましょう。
原因1：Canvasが作成されていない
Canvasが作成されていない場合、UI要素を表示できません。
UI要素を作成すると、自動的にCanvasが作成されますが、手動で作成する場合もあります。
Canvasがないと、UI要素は表示されないので注意が必要ですね。
UI要素を作成する際は、Canvasが自動的に作成されることを確認しましょう。
原因2：Canvasの設定が間違っている
Canvasの設定が間違っている場合、UIが正しく表示されないことがあります。
以下のような設定を確認しましょう：
- Render Mode：Screen Space – Overlay、Screen Space – Camera、World Spaceのいずれか
- Canvas Scaler：画面サイズに応じたスケーリング設定
Canvasの設定を確認することで、表示の問題を解決できることがあります。
原因3：UI要素の位置が画面外にある
UI要素の位置が画面外にある場合、表示されません。
Canvasの座標系を確認して、UI要素が画面内に収まっているか確認しましょう。
AnchorやPivotの設定も、位置に影響を与えるので注意が必要です。
UI要素の位置を確認することで、表示の問題を解決できます。
Canvasの使い方
Canvasの基本的な使い方を説明します。
Canvasの作成
Canvasを作成する方法は、以下の通りです：
- 自動作成：UI要素（Button、Textなど）を作成すると、自動的にCanvasが作成される
- 手動作成：GameObject → UI → Canvasで手動で作成
通常は、UI要素を作成する際に自動的にCanvasが作成されるので、手動で作成する必要はありません。
Canvas Scalerの設定
Canvas Scalerは、画面サイズに応じたUIのスケーリングを制御します。
以下のような設定があります：
- Constant Pixel Size：ピクセルサイズを固定
- Scale With Screen Size：画面サイズに応じてスケーリング
- Constant Physical Size：物理サイズを固定
スマホゲームなど、様々な画面サイズに対応する場合は、「Scale With Screen Size」がおすすめです。
Canvas Scalerの設定により、様々な画面サイズに対応できます。
Render Modeの設定
CanvasのRender Modeには、以下の3つがあります：
- Screen Space – Overlay：画面に直接描画（最も一般的）
- Screen Space – Camera：カメラの前に描画
- World Space：3D空間内に描画
通常のUIでは、「Screen Space – Overlay」を使うことが多いですね。
用途に応じて、適切なRender Modeを選択しましょう。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
まとめ
この記事では、UnityのCanvasを初心者向けに解説しました。
重要なポイントをおさらいします。
- CanvasはUI要素を表示するためのコンテナで、UI要素のコンテナ、表示の管理、スケーリングの管理などの役割がある
- UIが表示される仕組みとして、UI要素はCanvasの子オブジェクトとして配置し、Canvasは最後にレンダリングされ、独自の座標系を持つ
- UIが表示されない・ズレる原因として、Canvasが作成されていない、Canvasの設定が間違っている、UI要素の位置が画面外にあるなどがある
- Canvasの使い方として、UI要素を作成すると自動的にCanvasが作成され、Canvas ScalerとRender Modeの設定が重要
- Canvasの設定を理解することで、UIが正しく表示されるようになり、様々な画面サイズに対応できる
Canvasは、UIを表示するために必要なコンポーネントです。
設定を理解すれば、UIを正しく表示できるようになりますよ。
Unity入門の森で、Canvasを含めたUI理解の入口として、Unityの基礎を体系的に学べます。
あなたのペースで、少しずつ進めていけば大丈夫です。
Unity入門の森を見る 初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる
コメント