【Unity】Canvasのキホンのキ、実装しながら秒速で覚えよう

Canvasの設定を知りたい人

Canvasって何が出来るの？
設定があり過ぎてよく分からないんだけれど、結局何が大事なの？

こういった疑問に答えます。

本記事の内容

●Canvasの爆速設定手順
●Canvasで設定できること

この記事を書いている私は12才からフルスクラッチでゲームを作っています。
またコンパイラを専門として情報理工学の博士まで進学、中退をしており、プログラミング言語の文法にも関わる論文を書いていました。

※実行環境
Unity2021.3.1f1
Windows 10

Canvasの爆速設定手順
Canvasで設定できること

Canvasの爆速設定手順

1.「Hierarchy」ウィンドウの余白で「右クリック > UI > Canvas」
2.「Hierarchy」ウィンドウの「Canvas」で「右クリック > UI > Legacy > Button」

3.「Scene」ビュー右上のボタンから、2Dビューに切り替える
4.「Scene」ビュー内を「ホイールクリック」や「Alt+右クリック」で縮小する

以上でボタンが正面に表示させることが分かります。
Canvasとして最小限の設定はこれで完了です。

既にUIのオブジェクトを並べてコーディングが出来る状態なので、Canvasで触るところと言えば細かいパラメータをいじるぐらいでしょう。
以降でパラメータの概要を説明します。

Canvasで設定できること

Canvas関連のパラメータは少なくないので、これらで何が出来るかをザックリ把握していきましょう。
コンポーネントごとに整理しています。

Canvasコンポーネント

「Render Mode」にて、UIを表示する方法を大まかに切り替えられます。

Screen Space – Overlay	ゲーム画面の最前面に描画
Screen Space – Camera	カメラとの距離や角度を保つように描画
World Space	ひとつのゲームオブジェクトのように描画

特段作りこまない限り、まずは「Screen Space – Overlay」から始めましょう。
覚える、初めて使うの段階ではまず、よほどこだわりがない限り「とりあえず動く」を優先することをオススメします。

Canvas Scalerコンポーネント

画面の拡大、縮小に対応します。
特にその縦横比の扱い方を設定する部分が、「UI Scale Mode」です。

Constant Pixel Size	ウィンドウが拡大縮小しても指定したピクセル数のまま表示
Scale With Screen Size	ウィンドウの拡大縮小に合わせて拡大縮小して表示
Constant Physical Size	パソコンのスクリーン上に常に同じ大きさで表示

一旦は「Screen With Screen Size」をオススメします。
実行してみたらボタンが思ったより小さい！などの手間をとりあえず省けるからです。

ちなみにこういった縦横比や解像度の違いへの対応はゲーム、特にUIでは重要な局面も出てきます。

例えばスマートフォンゲームで機種の違いによってボタンやゲージが隠れてしまった場合、操作不能になったり、対戦ゲームでは有利不利に差がついてしまいますね。
逆にキャラクターの1枚絵なんかは、多少ハミ出てもいいので大きく表示した方がいい場合もあるかもしれません。

そういった類のコントロールをここで行うことが出来ます。

Graphic Raycaster

そんな単純ではありませんが、ひとことで表せばCanvas内の要素がクリックされたかどうかを判定するコンポーネントです。

この役割が分かりやすいのは「Blocking Objects」という項目でしょう。
Canvasコンポーネントの「Render Mode」にて「Screen Space – Camera」か「Constant Physical Size」を選択した場合、キャラクターなどの他のオブジェクトが下図のようにボタンなどより手前にくることがあります。