はかせのラボ

私の頭の中を書いていく雑記ブログです

Unity 画面比率が変わってもUIとかが崩れないようにする方法

あいさつ

どうも、はかせです。
今回はUnityのUIの話です。

画面比率が変わるとUIはどうなる?

多分Unityで開発やってるとGameビューでUIとか置いてくと思うんですけど
Gameビューと完成品の画面比率が異なる場合ってあると思うんですよね。

じゃあそうなった場合何もしなかった場合UIがどうなるかって話です。
文字で言うよか実際の画面見た方が早いですよね。
まずは全画面にしない画面です。
f:id:hakase0274:20190406222314p:plain
次に全画面にした時の画面です。
f:id:hakase0274:20190406222348p:plain

文字の場所が変わってしまいました

UIほど画面上のどこにあるか大事なものはないというのに、
何もしなければ画面サイズを変えるだけで場所が変わってしまいます。

なんでずれたの?

結論から言うとUnityのCanvasの設定です。
UnityでUIを作ろうとするとCanvasを置き
そこに各UI要素を載せていきます。

つまりCanvasがUIの土台なわけですね。
そしてCanvasでの各UI要素のサイズだとかはCanvasScalerという
コンポーネントが管理しています。
こいつがデフォルトだとこんな設定になってます。
f:id:hakase0274:20190406222754p:plain

この設定は画面比率を無視して
ピクセル単位でUIの位置やサイズを決定するという設定です。
画面比率を絶対固定するというならいいですが
実際そんなことは少ないと思います。

解決方法

さっきのCanvasScalerの設定を変えてやります。
具体的にはこうです。
f:id:hakase0274:20190406223140p:plain
この設定はゲームの画面がどうなろうと
絶対1600:900の比率でUI要素の位置やサイズを調整するという設定です。

では結果です。
まずは全画面にしない画面です。
f:id:hakase0274:20190406223455p:plain
次に全画面にした時の画面です。
f:id:hakase0274:20190406223519p:plain
位置ズレが起きていませんね。

あとがき

今回はUIズレの話でした。
Unityちゃんと触ってる方でしたら当たり前のことかもですが
最近の自分はたまにUnityを触るだけのにわかと化してきているので
たまに忘れそうになります。

なのでこういう大事だけど忘れやすいことをちょこちょこメモとして
残していきたいのが最近の私です。

それでは今回はこの辺でノシ