【Unity】UIを複数の解像度に対応させる超シンプルな方法

どうも、ゆみねこです。

Unityでゲームを作っている皆さん。解像度(画面サイズ)を気にしてますか?
特にAndroidアプリ。いろいろな画面サイズに対応させる必要がありますよね。

スマホで見るかもしれないし、タブレットで見るかもしれないし、BlueStacksを使って4Kモニターから見るかもしれないですよね(最後のは知らんがなって話ですが)。

困ります!!お客様!!困ります!!あーっ!!困ります!!お客様!!あーっ!!お客様!!

衝撃の事実! 初期設定のままだと、解像度が変わったときに、UIのレイアウトがガタガタに崩れます!

Gameビューの解像度を16:9などに設定して、試してみましょう。
あなたのUIは大丈夫ですか?(大丈夫なら回れ右して帰れ)
ある設定をすれば簡単に解決できるので、さっそく見ていきましょう!

UI Scale ModeをScale With Screen Size に

結論から述べましょう。以下の通りに設定してください。

  1. Hierarchyにて、Canvasを選択
  2. Inspectorの「Canvas Scaler」の項目を見る
  3. UI Scale Modeを「Scale With Screen Size」に変更
  4. Reference Resolutionに、基本の解像度を入力
    (フルHDなら1920 ,1080、縦なら逆)
イェア

以上! お疲れ様でした!

なにをやっているのか知りたい方へ

解決方法は分かったけど、どうしてこれでOKなのかわからない……。
ちゃんと理由も含めて知りたい……。

そんな勉強熱心な子羊たちのために、各要素を解説していきます。

Canvas Scaler

Canvas 内の UI 要素の全体的なスケールとピクセル密度を制御するためのコンポーネントです。
要するに、Canvas内にあるUIの大きさを決めるわけですね。

Scriptから動的生成でもしない限り、基本はCanvasを作成した際に自動でくっついてきます。

UI Scale Mode

Canvas内のUIをどのように拡大・縮小するかを決めます。
Canvas Scalerにて設定でき、3つのモードから選びます。

Constant Pixel Size

画面サイズに関係なく、ピクセル単位で同様のサイズに保ちます。

画面の中心が(0,0)になるため、例えば画面サイズの幅が800ピクセルの場合、左端は-400ピクセルになりますよね。
ButtonのX座標を-400ピクセルにすれば、Buttonの中心が画面の左端にピッタリと収まります。

ここで、画面サイズの幅を1800ピクセルに変更したとします。左端までの距離は、-900ピクセルです。
Buttonの座標は「中心点からX軸に-400ピクセル」という指定なので、Buttonは左端より500ピクセルも右に表示されてしまいます。

これが、画面サイズの変更によるレイアウト崩れの正体です。
なんと、デフォルトでこの設定になってます。

UIまでPixel Perfectなドットで表現するわけでもない限り、Content Pixel Sizeにしてもメリットはほとんどありません。
下記の「Scale With Screen Size」に変更することをおすすめします。

Scale With Screen Size

Reference Resolutionで設定した解像度をもとに、UI要素を拡大・縮小します。

たとえば、1920×1080で設定した場合、その画面サイズを基本として、UIを自動的に拡大・縮小してくれます。
最初に基本となる解像度を決めておく必要があるものの、後はレイアウト崩れを気にする必要がなくなるため、汎用性が高いです。

Constant Physical Size

UI 要素を画面サイズや解像度によらず、物理的に同様のサイズに保ちます。

……Unityマニュアルによるとそう書いてありますが、ぶっちゃけ意味不明です。Dead Spaceみたいに、ゲーム空間にUIを設置したい時に使うんでしょうかね?(ぼくが質問してどうする)

ゲーム空間に直接描画する画期的なUIで革命をもたらした「Dead Space」。このゲームを境に、ゲームUIが大きく変化した(気がする)。

まあ、基本は使うことがないので、無視して大丈夫です。

スポンサードサーチ

まとめ

というわけで、復習です。

  • UIの拡大・縮小は、Canvas Scalerが制御している
  • UI Scale Modeを「Scale With Screen Size」にすると、解像度に合わせて自動で拡大・縮小する
  • Dead Spaceは面白いよ。ぜひ遊んでみよう!

これで、レイアウト崩れともおさらばです!

この他にも、Twitterや他の記事にて、ゲーム開発者のためのお役立ち情報をたくさん配信しています。

更新を見逃したくない方は、ぜひぼくのTwitterをフォローしておいてください。(質問や仕事の依頼も歓迎です!)

人気記事

実際に4年間通ったぼくが、専門学校の闇を全て暴きます。

 

記事をシェアする