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

お悩みさん
お悩みさん
  • Canvasをなんとなく使っていて心配
  • UnityのCanvasのオススメ設定が知りたい
  • オオバ
    オオバ
    本記事ではこれらの悩みを解決します。

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

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

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

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

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

    スマホ向けCanvas設定

    ①UI Scale Modeを「Scale With Screen Size」に設定

    ②Screen Match Modeを「Expand」に設定

    ③Render Modeを「Screen Space - Camera」に設定

    ④Screen Space - Cameraの場合は、カメラのProjectionをOrthographicに設定

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

    👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

    Unity UIにCanvasは必須

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

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

    Canvasの作り方4ステップ

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

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_0

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

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

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_1

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_2

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

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

    EventSystemは消しちゃダメ

    注意点を1つ紹介。Canvasと一緒に作られる「EventSystem」を消してはいけません。削除するとUI内でのボタンやタップが動かなくなります。UI内のイベントを管理する重要なコンポーネントなので、消さないようにお願いいたします。

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

    ステップ2. CanvasScalerの設定

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_3

    Reference ResolutionとはUIの解像度

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

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

    ノーコード(プログラミングなし)でUIボタンを実装する方法をこちらの記事で紹介しています。Visual Scriptingに興味ある方はチェックしてみてください。

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

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_4

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

    4. Canvasにカメラをセット

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_5

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_6

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_7

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

    Render Modeは「Screen Space - Overlay」でもよい

    今回紹介したCanvasの設定は「Screen Space - Camera」ですが、実は「Screen Space - Overlay」でも良いです。

    「Screen Space - Overlay」はCameraコンポーネントを使わずに最前面で描画するスタイル。テスト段階や検証UIを作るときには使えます。

    今までの経験上、おすすめは「Screen Space - Camera」です。ゲーム開発しているとUIにブラーなどのポストエフェクトをかけたくなるのです。あとあとのことを考えると「Screen Space - Camera」を選択しておく方が安全だと考えます。

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

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

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

    ①Canvasはメニューから作るのがオススメ

    ②カメラを平行投影にする

    ③Canvasとカメラをひもづける

    ④縦持ち、横持ちで解像度の値を変更する

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

    Hierarchyウィンドウ

    【Unity UI】知らないと損するスマホ向けCanvas設定_8

    👉 今さら聞けないUnityのヒエラルキー(Hierarchy)とは?

    CameraのInspectorウィンドウ

    【Unity UI】知らないと損するスマホ向けCanvas設定_9

    CanvasのInspectorウィンドウ

    【Unity UI】知らないと損するスマホ向けCanvas設定_10

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_11

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

    【Unity UI】知らないと損するスマホ向けCanvas設定_12

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

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

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

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

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

    「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
    ぜひチャンネル登録をお願いします!

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

    オススメ記事
    検証環境