見出し画像

Unity UIの基本①｜Canvasの使い方を初心者向けに徹底解説

ファイブボックス

Unityでゲームを作っていると、画面上に文字やボタン、HPバー、メニュー画面などを表示したくなることがあります。

たとえば、次のようなものです。

・スコア表示
・HPバー
・ゲームオーバー画面
・スタートボタン
・設定画面
・アイテム一覧

このような画面上に表示する部品を、Unityでは UI として作成します。
今回から数回に分けて、UnityのUIについて解説していきます。

第1回となる今回は、UIを作るときの土台になる Canvas について確認します。


Canvasとは

Canvasは、UnityでUIを表示するための土台です。
Text、Image、Button、Slider、ToggleなどのUIパーツは、基本的にCanvasの中に配置して、Canvasの中にないと画面上には表示されません。
イメージとしては、Canvasは UI専用の画用紙 のようなものです。

通常のゲームオブジェクトは、Sceneビューの中に配置します。
一方、UIはCanvasの上に配置して、ゲーム画面の手前に表示します。

このように、Canvasの中にUIパーツを入れて画面を作っていきます。

Canvasの作成

Canvasを配置する

Canvasを作成するには、Hierarchyウィンドウで右クリックします。

  • UI > Canvas

Canvasを作成すると、同時に EventSystem も作成されることがあります。EventSystemは、Buttonをクリックしたり、Input Fieldに文字を入力したり、プログラムからUIを更新したりするために必要なオブジェクトです。

今回はCanvasの説明が中心なので、EventSystemについては後のButton回で詳しく扱います。

Canvasの中にImageを配置

Canvasだけを見ても少し分かりにくいので、まずはCanvasの中にImageを配置してみます。

HierarchyでCanvasを選択した状態で、右クリックします。

  • UI > Image

Canvasの中にImageが作成されます。

Imageは、UI上に画像や色付きの四角形を表示するための部品です。
最初は白い四角形として表示されます。
このImageを使って、Canvasの上にUIが配置されていることを確認していきます。

Canvasの大きさについて

CanvasをSceneビューで見ると、とても大きな四角形として表示されます。ここで少し混乱しやすいのは、Canvasの大きさです。

通常のSpriteやCubeなどと違い、Canvasはゲーム画面に合わせてUIを表示するための領域です。

そのため、World座標に配置されたオブジェクトと比較すると、Sceneビュー上では大きく見えることがあります。

ただし、実際に大事なのはSceneビューでの見た目ではなく、Gameビューでどう表示されるか です。

UIを確認するときは、Gameビューを見ながら調整すると分かりやすいです。

Canvasの主な設定

Canvasを選択すると、InspectorにCanvasコンポーネントやCanvas Scalerコンポーネントが表示されます。

特に重要なのは、次の項目です。

  • Render Mode - Canvasの表示方法を決める設定

  • Pixel Perfect - UIをにじみにくく、くっきり表示する設定

  • Sort Order - Canvas同士の表示順を決める設定

  • Canvas Scaler - 画面サイズが変わったときのUIサイズを調整する設定

  • Graphic Raycaster - ボタンなどのUIをクリックできるようにする設定

まずは、特に重要な Render Mode と Canvas Scaler を押さえておくと良いです。

Render Modeとは

Render Modeは、Canvasをどのように表示するかを決める設定です。
主に次の3つがあります。

  • Screen Space - Overlay

  • Screen Space - Camera

  • World Space。

RenderModeの項目

Screen Space - Overlay

Screen Space - Overlayは、UIを画面の一番手前に表示するモードです。
カメラの位置や向きに関係なく、UIが画面に表示されます。

たとえば、スコア、HP、ボタン、メニュー画面などは、このモードで作ることが多いです。

今回のように、ImageやTextを画面上に表示するだけなら、Screen Space - Overlayで問題ありません。

Screen Space - Camera

Screen Space - Cameraは、指定したカメラを基準にUIを表示するモードです。
Render Camera というプロパティに、対象のカメラを設定して使います。

例えば、背景用のUIをつくりたいなど、カメラとの距離や表示順を意識したUIを作りたい場合に使います。

World Space

World Spaceは、Canvasを3D空間や2D空間の中に配置するモードです。
この場合、Canvasは画面に固定されるのではなく、Scene内のオブジェクトとして扱われます。

たとえば、キャラクターの頭上にHPバーを表示したい場合などに使います。

通常のメニュー画面やスコア表示ではなく、ゲーム空間の中にUIを置きたいときに使います。

今回はScreen Space - Overlayを使う

今回は、もっとも基本的な使い方として、CanvasのRender Modeは

  • Screen Space - Overlay

のまま進めます。

この状態でCanvasの中にImageやTextを置くと、Gameビューの画面上にUIとして表示されます。

Canvas Scalerとは

Canvasには、Canvas Scalerというコンポーネントがあります。
Canvas Scalerは、画面サイズが変わったときにUIをどのように拡大・縮小するかを決める設定です。

たとえば、パソコンの画面、スマートフォンの画面、タブレットの画面では、画面サイズや縦横比が違います。

Canvas Scalerを適切に設定しておくと、画面サイズが変わってもUIが大きく崩れにくくなります。

UI Scale Mode

Canvas Scalerの中で重要なのが、UI Scale Modeです。

主に次の設定があります。

  • Constant Pixel Size - 画面サイズが変わってもUIを同じピクセルサイズで表示する

  • Scale With Screen Size - 基準となる画面サイズに合わせてUIの大きさを調整する

  • Constant Physical Size - 画面の物理的な大きさを基準にUIサイズを調整する

はじめてゲームUIを作る場合は、まず「Scale With Screen Size」で作成するとよいと思います。
これは、基準となる画面サイズを決めて、そのサイズに合わせてUIを拡大・縮小する設定です。

Scale With Screen Sizeにしてみる

Canvasを選択し、Canvas ScalerのUI Scale Modeを変更します。

すると、Reference Resolution（画面の解像度）を設定できるようになります。
たとえば、横長のゲーム画面なら次のように設定します。

  • Reference Resolution

  • X : 1920

  • Y : 1080

これは、1920×1080の画面を基準にUIを作るという意味です。

スマートフォン向けやWebGL向けなど、作りたいゲームの画面比率に合わせて設定します。

Matchの設定

Scale With Screen Sizeにすると、Matchという設定も表示されます。

これは、横幅と高さのどちらを基準にしてUIを調整するかを決める設定です。

  • 0に近い：横幅を重視

  • 1に近い：高さを重視

  • 0.5：横幅と高さの中間

最初は、Match : 0.5　で試しておくと分かりやすいです。

細かい画面対応は少し難しいので、AnchorやRect Transformの回で改めて詳しく扱います。

その他の設定

Canvasには、Render ModeやCanvas Scaler以外にも、いくつかの設定項目があります。

ただし、通常のText、Image、Buttonなどを使うだけであれば、最初は細かく変更しなくても大丈夫です。

  • Pixel Perfect - UIをピクセル単位できれいに表示するための設定

  • Sort Order - 複数のCanvasがあるときの表示順を決める設定

  • Target Display - 複数画面を使う場合に、どの画面へ表示するかを決める設定

  • Additional Shader Channels - 特殊なUIシェーダーで使う追加情報を設定する項目

  • Vertex Color Always In Gamma Color Space - UIの色の扱いに関する詳細設定

  • Graphic Raycaster - UIがクリックやタップを受け取るための設定

今回のまとめ

今回は、Unity UIの土台になる Canvas について確認しました。

Canvasは、Text、Image、Button、SliderなどのUIパーツを配置するための場所です。
UIを作るときは、基本的にCanvasの中に各パーツを入れていきます。

CanvasはSceneビューで見ると大きく表示されることがありますが、実際に大事なのは Gameビューでどう見えるか です。
UIを調整するときは、Gameビューを見ながら確認すると分かりやすくなります。

Canvasの表示方法は、Render Mode で設定します。

主な設定は次の3つです。

Screen Space - Overlay：画面の一番手前にUIを表示する

Screen Space - Camera：指定したカメラを基準にUIを表示する

World Space：ゲーム空間の中にCanvasを配置する

通常のスコア表示、HP表示、ボタン、メニュー画面などは、まず Screen Space - Overlay で作成すれば問題ありません。

UI Scale Modeには、主に次の設定があります。

Constant Pixel Size：画面サイズが変わってもUIを同じピクセルサイズで表示する

Scale With Screen Size：基準となる画面サイズに合わせてUIの大きさを調整する

Constant Physical Size：画面の物理的な大きさを基準にUIサイズを調整する

はじめてゲームUIを作る場合は、Scale With Screen Size がおすすめです。

Scale With Screen Sizeでは、Match の設定も重要です。

0に近い：横幅を重視

1に近い：高さを重視

0.5：横幅と高さの中間

最初は、Match : 0.5 で試しておくと扱いやすいです。


次回予告

次回は、Canvasの中に配置するUIパーツの中から、Panel について解説します。

Panelは、メニュー画面の背景、ゲームオーバー画面、設定画面などを作るときによく使うUIです。

次回は、Panelの作成方法、色や透明度の変更、表示・非表示の切り替えまで確認していきます。


こちらはUnity初心者向けの記事をテーマ別にまとめています。
▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

いいなと思ったら応援しよう！

ファイブボックス よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！