　ゲーム制作　　 Unity ソフトウエア　

Unity ソフトウエアでゲーム制作#1モグラたたき編（17.uGUI　Canvas設定）

2024-11-26

本投稿は2024年9月時点の内容になります。アップデートにより変更となる場合があります。また環境によって違いがあると思いますのであくまで参考として、ご了承ください。

様々な書籍、ブログや動画を参考にさせていただきました。多すぎて一つ一つはｔお紹介できませんが感謝です。

初心者の自分がUnity ソフトウエアでゲームを作ってみました。とりあえずシンプルなものということでモグラたたきに挑戦です。ゲーム作ってみるかという感じになったときに、いいタイミングで某ゲームのイベントシナリオ内ミニゲームにモグラたたきが実装されていたのでUIとかエフェクトとか、諸々の仕様を~~ぱくって~~参考にして作ってみましたよ。様々なHowToの中の選択肢のひとつとして、同じ初心者さんの参考になればよいです。

uGUI（unity Graphical User Interface）を使う

今回から数回にわたってUIづくりをしていきたいと思います。今回は基本となるCanvasの設定をしていこうと思います。

本記事のポイント

uGUIのCanvasキャンバスの設定を解説
Unity 初心者の５大ハマりポイント　キャンバス大きすぎる問題を解決します。

Canvasの設置

Canvasとは

UI が配置、描画される抽象的な領域。すべての UI 要素は Canvas コンポーネントがアタッチされたゲームオブジェクトの子でなければなりません。
すべての UI 要素は Canvas コンポーネントがアタッチされたゲームオブジェクトの子でなければならない。

UIを配置する特別な領域って感じですね。早速Canvasを設置していきましょう。

Canvasの作成

ヒエラルキー上で右クリック＞「UI」＞「キャンバス」をクリック
任意に名前を変更します。今回は「UI」にしました。

もうすこし見てみましょう

Canvasを見てみる

ヒエラルキー上のCanvas「UI」をダブルクリックしてみましょう。視点が「UI」に移り、シーンが消えてしまいましたね。
よく見ると左下の角に小さく見えています。
ヒエラルキー上の他のゲームオブジェクトをダブルクリックしてみます。グッとシーンが寄りましたね。

「UI が配置、描画される抽象的な領域」ということですね。

これがUnity 初心者の５大ハマりポイント　キャンバス大きすぎる問題です。

Canvasコンポーネントの設定

Canvasコンポーネントの設定を見ていきます。ここで一番大事なのはレンダーモードです。Unity 公式の

Canvas　レンダーモード：スクリーンスペース-オーバーレイ

このモードでは、キャンバスはスクリーン合わせて縮小拡大された後、シーンやカメラへの参照をせずに直接レンダリングされます（ UI はシーンにカメラがなくてもレンダリングされます）。スクリーンのサイズや解像度が変わった場合、自動的に合うように UI は縮小拡大します。UI はカメラビューのような他のグラフィックの上に描画されます。
Unity マニュアル

イメージ的にはゲームディスプレイに張り付いてるイメージです。

Canvas　レンダーモード：スクリーンスペース-カメラ

このモードでは、Canvas は指定したカメラの前にいくらかの距離をとって、平面オブジェクトの上にあるかのようにレンダリングされます。
Unity マニュアル

特定のカメラの前にカメラの動きを追従して、焦点距離にあわせて大きさも合わせてくれる魔法のスクリーン、もしくは鏡筒のないレンズ（後ろ玉との間をオブジェクトも通過できる）の前玉にくっついてるイメージかなあ

Canvas　レンダーモード：ワールド空間

このモードは UI をシーン内の平面オブジェクトであるかのようにレンダリングします。しかし Screen Space – Camera モードとは異なり、平面はカメラの方を向く必要ななく、好きな方向に向けることができます。
Unity マニュアル

シーンに設置してある透明な立て看板なイメージ

どれを選べばいいのかですが、２D ゲームにおけるマケイヌおすすめの設定を一つ紹介します。

Canvasが大きすぎる問題解決　レンダーモードのおすすめ設定例

2DゲームにおけるCanvasレンダーモード設定ですが、おすすめは、シーンに配置した他のゲームオブジェクトとのサイズや位置関係を維持しやすいので「ワールド空間」です。ですが設定には少しだけコツがあります。この方法でキャンバス大きすぎる問題も解決です。

2DにおけるCanvasレンダーモードおすすめの設定方法

まずレンダーモードを「ワールド空間」にします。
位置X Y Zを０にする
幅と高さはゲームサイズを解像度に設定している場合は解像度に、今回のようにアスペクト比にしている場合は、よく使われる解像度の数字を入力します。今回はアスペクト比16：９にしているので「幅」を「1080」、「高さ」を「1920」にしました。
最後にスケールで整えます。スケールは（メインカメラのサイズ×２）/（Canvasの高さ）です。今回はカメラのサイズ8に設定しているので16/1920（0.00833333333）と入力すればぴったりになります。
補足　Canvasの合わせかたに「スペーススクリーン-カメラ」にメインカメラをアサインした後「ワールド空間」に変更する方法もありますが、どうやらサイズとスケールの組み合わせがプロジェクトごとに変わってしまって安定しないようなので、今回のやり方の方が再現性があります。

Canvas 他の設定

シンプルな2Dだとあまり弄るところはなさそう。

Canvas　他の設定

頂点カラーは常にガンマ　マニュアルいわくガンマから線形への変換で色の精度が上がるらしく、常に表示されてる警告も気になるので、とりあえずチェックしておきます。
「ソートレイヤー」に「UI」を追加して設定します。
「RectMask2D」コンポーネントを追加しておきます。親の矩形で同一平面上の子のオブジェクトにマスクをかけます。UIにイメージ置くときとかにはみ出た部分をマスクしてくれるので便利。シンプルだけどその分通常のマスクよりパフォーマンスがいい。

まとめ

２DゲームにおけるCanvasキャンバスのレンダーモードの設定は「ワールド空間」にして、スケールを「（メインカメラのサイズ×２）/（Canvasの高さ）」で設定するのがおすすめ
ソートレイヤーに「UI」を設定しておくと、後々便利かも
RectMask2Dコンポーネントをつけておくと、後々便利かも