こんにちは、Unityエンジニアのオオバです。

CanvasとはUnityでUIを作るときに必須のコンポーネント です。設定が複雑で何が正しいのか分かりづらいところが難点です。この記事はUnity歴8年。UI開発歴12年のオオバがおすすめするスマホ向けCanvas設定を解説します。

UI開発に困っているUnityエンジニア、UIデザイナーに届くと嬉しいです。

👉 【保存版】Unityのコンポーネント徹底解説【Unity基礎】

Canvas、CanvasScaler、カメラをそれぞれ設定する

結論、Canvas、CanvasScaler、カメラを以下の設定にします。

まとめたのは良いのですが、 横文字だらけ でよくわからないですよね。記事内では全部キャプチャ付きで解説していますのでご安心ください😌では詳細の解説に入ります。

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

Unity UIにCanvasは必須

そもそもCanvas（キャンバス）とはUnity UI （uGUI） の格納先です。UI要素はすべてCanvasの配下に格納する必要があります。

• ボタン
• スクロールリスト
• 画像
• テキスト

などなど。 Canvasの中に存在しないUIは表示されません。 UIを作るときには必ずCanvasが必要であることを覚えておいてください。

Canvasの作り方4ステップ

ここからCanvasの作り方を解説します。全体で4ステップです。準備として、空のシーンを作っておきます。

ショートカット⌘ + Nで新規シーンを作った状態です。

👉 【初心者向け】効率を上げるオススメのUnityエディタレイアウト紹介

ステップ1.メニューからCanvas作成

結論から言いますと、Canvasは メニュー GameObject から作ると簡単でミスがありません。

• ① : メニューGameObjectをクリック
• ② : UIを選択
• ③ : Canvasをクリック

このように一連の設定を終えたCanvasが作成されます。Hierarchyウィンドウを確認してみましょう。

• Canvas
• EventSystem

以上の2つのGameObjectが作られましたね。正常な状態です。

👉 【Unity基礎】GameObjectの使い方（生成や削除など）全て解説

では、ここからCanvasをスマホ向けにカスタマイズしていきます。

ステップ2. CanvasScalerの設定

Canvasを作成すると、CanvasScalerコンポーネントも作られます。CanvasScalerとはUIの解像度を管理する重要なコンポーネント。この章ではCanvasScalerを適切に設定していきます。

• ① : GameObject「Canvas」を選択
• ② : Render Mode を Screen Space - Camera へ
• ③ : UI Scale Mode を Scale With Screen Size へ
• ④ : Reference Resolution を X:1920 Y:1080 へ※横画面の場合
• ⑤ : Screen Match Mode を Expand へ

Reference ResolutionとはUIの解像度

Reference ResolutionとはUIの解像度です。
今回は横持ちのゲーム開発を前提としました。

縦持ちの場合は、 Reference ResolutionのXとYを逆にすると良いでしょう。
また解像度を下げたい場合は、数値を下げたりもします。

ステップ3. 平行投影カメラに変更

通常UIを写す場合は 平行投影カメラ を使います。
平行投影カメラとは、遠くのモノも近くのモノも同じ大きさで映し出します。

• ① : Main Camera を選択
• ② : 座標を0にする
• ③ : Clear Flags を Solid Color へ変更
• ④ : Projection を Orthographic（平行投影）に変更

カメラの設定変更は完了です。

4. Canvasにカメラをセット

最後にカメラをCanvasをひもづけます。

Canvasの Render Camera にMain Cameraをセット。

↑のような感じでドラッグします。

最終的にCanvasはこのような設定です。

Unityでよく使うスマホ向けCanvas設定まとめ

記事の内容を簡単にまとめます。

Canvas、カメラ共に最終的な設定はこんな感じです。

👉 今さら聞けないUnityのヒエラルキー（Hierarchy）とは？

これでUIを開発する準備が整いました。Canvas配下にUIを追加してみましょう。

ボタンを3つ配置してみました。

このように表示されます。

正しいCanvasの作り方を知っていると、自分でUnityを触るときに役立ちます。

ぜひとも手を動かしてCanvasを作ってみてください。Canvasの設定を知った上でUIを作ることでトラブル回避できます。UIデザイナーの場合Canvasの設定を知っているとどのようにUIが動くのかイメージしやすくなるためデザインしやすくなります。

Canvas設定がわからなくなったときは、この記事で復習してみてください。

次の記事ではUnityでスマホ向けUIの作り方を解説しています。基本的なUIの作り方から本格的な複数解像度対応までを紹介。 全体を通してUIづくりをマスターできるようになっています。 本記事とあわせて読んでみてください。

TikTokを始めました！！毎朝7時から自作ゲーム開発を配信しています。
ぜひフォローをお願いします！

最後まで読んでいただきありがとうございました！
すばらしいUnity UIライフをお過ごしください。

• Unity2020.3.19f1