【Unity】画面サイズが変わってもUIを崩さないようにする

Unity でスマホ向け画面を作成していてハマったので備忘録として残しておこうと思います。
同じような事象の対策を探されている方がいらっしゃれば参考にしてみてください。
※Unity初心者なので他にいい方法があれば是非コメント頂けると幸いです。

今回は下記の様に、一枚の背景画像に対して画面比率、画面サイズが変わっても崩れないようにします。

対策イメージ

下記の手順で対応します。
① Canvasを設置
② CanvasのRenderMode設定を変更(ここは必須ではないが今回手順を踏む)
③ CanvasにImageを設置
④ ImageのRect Transform設定を変更し、画像をセット

■詳細

① Canvasを設置
下記図のようにCanvasを設置します。
⇒ GameObject > UI > Canvas

Canvasを設置

② CanvasのRenderMode設定を変更
CanvasのInspector欄にRender Modeがありますので、
ここをScreen Space – Cameraに変更。
RenderCameraにはMain Cameraをセットします。
※ここの対応は必須ではありませんが、筆者はSceneビューで確認出来る様に対応を入れています。

CanvasのRenderMode設定を変更

③ CanvasにImageを設置
Canvasに対してImageを設置します。手順は①と同様。
⇒ UI > Image

CanvasにImageを設置

④ ImageのRect Transform設定を変更し、画像をセット
Inspector欄のAnchorsに対して、Minを0、Maxを1にします(X、Y共)
Inspector欄のRect Transformに対して、Left、Right、Top、Bottom、Posを全て0にします
最後にSource Imageにセットしたい画像ファイルを設定します
⇒ ここまででSceneビューに画像が全面表示されたと思います。

ImageのRect Transform設定を変更し、画像をセット

動作確認

最後に動作確認をしてみたいと思います。
GameビューでDisplayサイズを色々変化させてみて下さい。
画面比率やサイズが変わっても画面崩れを防げていると思います。

800×400 縦向き
1560×1440 縦向き
1920×1080 横向き

最後まで読んでいただきありがとうございます。
Unity関連の記事は今後も残していきますので良ければ今後も参考にして頂ければと思います。

mana99 について

30代のシステムエンジニア 仕事以外にAndroidアプリを定期的にリリース モットーは「最短&シンプル」
カテゴリー: Unity タグ: , , パーマリンク