【Unity】Canvasの基本を整理する
はじめに
ゲーム開発をしているとプレイヤーのライフやゲームのスコアなど、ゲームオブジェクトとは別に画面上に表示したい情報が出てきます。
そのような時にUnityでは Canvas を使えばよいと教えてもらいました。
今回はCanvasの理解を深めるために、Canvasとは何なのか、どういう使い方をすればよいのかをUnity初心者向けに整理していきたいと思います。
Canvasとは
UniyマニュアルにはCanvasは下記の通りと定義されています。
Canvas コンポーネントは UI が配置、描画される抽象的な領域
UIといわれると、画面上に表示されるプレイヤーなどもUIと言えるのではないかと、しっくりこない感じがしています。。。(Web業界の感覚かもしれませんが)
UnityでいうUIは、「ゲーム世界のオブジェクト」ではなく「画面操作・情報表示のための要素」を指します。
Canvasを使うことで以下のようなメリットがあります
- 異なる画面サイズによって表示サイズを変える機能が備わっている
- カメラ位置に関係なく常にUI要素を前面に出すなど、UI専用の便利機能が備わっている
- UI要素をまとめて管理できる
Canvasの使い方
Render Mode
CanvasではUIをどのように表示するのかをRende Modeで設定できます。
Render ModeでUIをどのように表示するかは以下の通りです。
- Screen Space
- Overlay: UIが常に画面の最前面に、カメラを介さず表示される
- Camera: 指定されたカメラの前に一定距離でUIが配置される
- World Space: UIがシーン内の3Dオブジェクトとして表示される
UI Scale Mode
Canvas Scalerコンポーネントには、UI Scale Modeという項目があり、画面サイズが変わった時にUIをどのように表示するのかを設定できます。
設定できる項目は以下の通りです。
- Constant Pixel Size: UI要素を画面サイズによらずピクセル単位で同様のサイズで表示
- Scale With Screen Size: 画面サイズに応じてUI要素をスケーリング
- Constant Physical Size: 画面サイズによらず、UI要素を物理的に同じサイズで表示
(ex. どの画面サイズでも1 cmで表示など)
Anchor
UI要素はRectTransformという専用のコンポーネントを持っています。。
RectTransformのAnchorは、画面サイズが変わったときに、UI 要素をどこを基準に配置するかを決める機能です。
AnchorにはPresetが用意されており、それらを使うことでUI要素を画面のどこに配置したいかを設定することができます。
例えば、Anchorを画面左上に配置すると、画面左上が基準となり、UI要素が配置されます。
PosX, PosYを設定することで基準点から何ピクセルずらしたところに配置するのかも設定することができます。
UI Scale Modeは画面サイズが変わった時のスケールを決め、Anchorはどこを基準にUI要素を配置するのかを設定します。
終わりに
本記事では、UnityにおけるCanvasの基本的な使い方を整理しました。
Canvasは、ゲーム世界とは別にUIを管理するための仕組みであり、Render Mode、UI Scale Mode、Anchorを理解することで、画面サイズが変わっても崩れにくいUIを作ることができます。
今後もゲーム開発をする中で得た知見を記事にまとめていきたいと思います。
関連記事
ゲーム開発に関する関連記事はこちら
Discussion