【Unity入門】Canvas Scalerで複数の画面サイズに対応できるようにする方法

2019年5月24日

こんにちは、もぎです。

初期設定では画面サイズが変わった場合、テキストなどUIの表示のされ方が変わってしまいます。

表示のされ方を一定にするにはCanvasオブジェクトについているCanvas Scalerをいじっていく必要があります。

この記事ではCanvas Scalerで様々な画面サイズに対応できる方法を解説していきましょう!

今回やること

どのような画面サイズでも画面いっぱいにImageが広がるようにする。

Canvas Scalerとは

Canvas ScalerとはCanvasオブジェクトを作成したときについているコンポーネントのことです。

画面サイズが変わった場合にUIをどのように表示するか変更することができます。

準備

CanvasとImageオブジェクトを作る

様々な画面サイズに対応できるようにしていくのですが、対応できたかわかりやすくするためにCanvasの子階層にImageオブジェクトを配置しておきましょう。

Sceneビューを2D表示にする

Imageオブジェクトを画面いっぱいに広げていきます。

その前に広げやすくするために2Dで表示されるようにしましょう。

Sceneビューの『2D』というボタンを押してください。

Imageを画面いっぱいに広げる

2Dで表示されるようになったらImageを画面いっぱいに広げましょう。

画面を拡大して検証

現在の状態だとGameビューいっぱいにImageが広がっていますね。

試しにGameビューを拡大したらどうなるのか検証してみてください。

画面サイズが大きくなると余白ができてしまいますね。

これはなぜかというとCanvasについているCanvas ScalerコンポーネントのUI Scale Modeが『Constant Pixel Size』になっているからです。

Constant Pixel Sizeというのはどのような画面サイズであっても同じ大きさ(Pixel)で表示されるモードです。

ですので通常時のGameビューでは画面いっぱいであっても、画面を拡大すると余白ができてしまうのです。

Canvas Scalerで様々な画面サイズに対応させる

それではCanvas Scalerをいじってどのような画面サイズでも画面いっぱいにImageが広がるようにしましょう。

やることは非常に簡単です。

Canvas ScalerコンポーネントのUI Scale Modeを『Scale With Screen Size』にしてください。

Scale With Screen Sizeというのは、どのような画面サイズでも同じようにImageなどのUIが表示されるようになるモードのことです。

UI Scale Modeを『Scale With Screen Size』に変更したら、拡大しても通常時のGameビューと同じように表示されるはずです。

今回はImageを画面いっぱいに広げたいので、広げた後に検証してみましょう。

Imageを画面いっぱいに広げてください。

それでは、Gameビューを拡大してみましょう。

画面サイズが大きくなっても同じように画面いっぱいにImageが広がっていますね!

まとめ

この記事では、Canvas Scalerで様々な画面サイズに対応できるようにする方法について解説してきました。

モバイルゲームを作る場合など、様々な画面サイズに対応する必要がある場面は多々あります。

そのような時は今回の記事を思い出してみてください!