読者です 読者をやめる 読者になる 読者になる

CGメソッド

CG制作に関してのヒント

MENU

【Unity】 Canvas Scalerで比率の違う端末解像度に対応する方法

Unity Unity-uGUI

follow us in feedly

触ってみないとちゃんと理解できないなということで、Canvas Scalerで比率の違う解像度に対応をやってみました。

画面比率について

機種別画面サイズ、解像度、縦横比のまとめをみると、2014年以降16:9で規格が統一されつつ有ります。

sounansa.net

ただ、iPadやまだよく使われているiPhone4Sも考慮しないわけにいかないので、こちらも考慮した画面を作成する必要があります。

Canvas Scalerで比率の違う解像度に対応する方法

仕様

たとえば、基準とする端末をiPhone5(1136×640 16:9)

縦持ちの画面を作成するとします。

UIの作成

  1. 1280×720の画像を用意。

  2. GameObject>UI>RawImageを作成し、用意した画像をアサイン。Rect Transformの値を用意した画像と同じ、Width1280 Height720に。

  3. Canvasを選択して、Canvas ScalerのUI Scale Modeを『Scale With Screen Size』に変更

  4. 続いて、 Reference Resolutionも用意した画像と同じ数字に X1280 Y720

  5. デフォルトならScreen Match ModeがMAtch Width Or Heghtになっているのでそのままに。

  6. 同様にMatchもデフォルトならWidth 0 になっていますが、縦持ちならこちらで。(横の場合は Height 1に寄せる)

  7. ぴったり画像と画面が一致していることを確認

f:id:min0124:20160730101416p:plainf:id:min0124:20160730103449p:plain

解像度ごとに変更

  1. Gameウインドウのタブの真下のボタンから、確認したい解像度を設定します。

  2. iPhone5 1136×640 16:9

  3. iPad Pro 2048x2732 4:3

  4. iPhone4S 960×640 3:2

iPhone5の場合

f:id:min0124:20160730101724p:plain

16:9で画像を作成しているのでぴったりです。

iPad Proの場合

f:id:min0124:20160730101731p:plain

横に合わせて、画像がスケールされますが、画面比率が4:3と16:9より正方形に近くなるので上下がかなり切れます。

iPhone4Sの場合

f:id:min0124:20160730101735p:plain

画面比率が3:2。こちらも16:9より正方形に近くなるので上下が切れます。

Match Height 1にした場合

f:id:min0124:20160730102757p:plain

ちなみにMatch Height 1にした場合は縦合わせになるので、iPadiPhone4Sの場合、左右に黒帯ができます。

感想

たとえば画面全面にイラストを載せたい場合(起動時のメインビジュアル等)に16:9の横合わせの設定にすると、iPadiPhone4Sでは上下が切れてしまいます。

かといって、縦合わせで黒帯を出すのもかっこ悪いので、上下が切れても良いようなレイアウトにした画像を準備するといったことも必要になると思います。

参考

www.metalbrage.com