こんにちわ、オオバです。

「UnityのCanvasのオススメ設定が知りたい」
というご質問をよく頂きます。

そこで👆のような少し強めのUIデザイナーの方々を
対象読者として オススメのCanvas設定 をまとめてみました。

ぜひともご自身の手でCanvasを作ってみてください。

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

結論を簡単にまとめます。

横文字だらけ でよくわからないかもしれません。
記事内では全部キャプチャ付きで解説しています。
ご安心ください😌

では詳細の解説に入ります。

この記事の内容

CanvasとはUIの格納先

そもそもCanvas(キャンバス)とは
Unity UI (uGUI) の格納先です。

UI要素はすべてCanvasの配下に格納する必要があるのです。

などなど。
Canvasの中に存在しないUIは表示されません。

ところで、ほとんどの場合、
Canvasはエンジニアが設定している と思います。

ただUIデザイナーの中には 自分で作ってみたい
作ったことはあるが 正しいのか自信がない 人もいるのではないでしょうか。

そこでゼロからオススメ設定のCanvasを作っていきます。

ゲームの仕様によって多少の差はあるにしても、
ほとんどのタイトルはこの設定でまかなえる かなと思います。

ぜひ覚えて自分で作ってみてください。

ゼロからオススメ設定Canvasの作り方

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

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_0

何もないところから
オススメ設定のCanvasを作っていきます。

1.メニューからCanvas作成がもっとも簡単でオススメ

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_1

一連の設定を終えているCanvasが作成されます。
この メニューから作る方法が最も簡単でオススメ です。

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_2

この2つが作られましたね。
ここからCanvasの設定をカスタマイズしていきます。

2. 平行投影カメラに変更

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

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_3

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

3. CanvasとCanvasScalerの設定

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_4

Reference ResolutionとはUIの解像度

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

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

4. Canvasにカメラをセット

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

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_5

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

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_6

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

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_7

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

まとめ : Unityでよく使うCanvas設定

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

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

ヒエラルキー

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_8

カメラ

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_9

Canvas

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_10

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

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_11

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

【UIデザイナー向け】知らないと損するUnityでよく使うCanvas設定_12

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

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

ぜひとも手を動かしてCanvasを作ってみてください。
Canvasの設定を知った上でUIデザインするとより説得力が増しますよ。


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

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

オススメ記事
検証環境