Unityでインディゲームを作る!

Unityでのゲーム制作を目指し、それに関わる話題についてのブログ

Unity UIのレイアウトが画面の解像度が変わっても崩れないようにするには![ Canvas Scaler ]

 プレイヤーにとって、重要なゲームの情報を伝えるHUD(ヘッドアップ・ディスプレイ)や設定のナビゲーションを担うメニュー画面など、UI(ユーザー・インターフェイスはとても重要な要素です。

CanvasScaler_Constant_FullHD

 特にそのレイアウトは重要で、環境によって崩れるなどあってはならないのですが、UnityのUI、具体的にはCanvasの初期設定では画面の解像度によって、UIの各要素の大きさが変わったり、その結果レイアウトが崩れたりしてしまいます。

CanvasScaler_Constant_4K

 4K解像度にしたら、こんなにUIが小さくなっちゃった!というのは流石にそのままにはしておけないですよね。

 

CanvasScaler_ConstantMode

 画面の解像度にUIレイアウトを対応させるためには、Canvasに標準で装着されている、Canvas ScalerのモードをConstant Pixel SizeからScale With Screen Sizeへと変更します。

CanvasScaler_ScaleWithScreenSize

 FullHDの解像度である1920x1080をReference Resolutionとして入力しています。これによって、FullHDでのUIレイアウトと・・・

CanvasScaler_SWSS_FullHD

4K解像度でのUIレイアウトが一致するようになりました。

CanvasScaler_SWSS_4K

 大画面のゲームならこれで行けそうですが、モバイルシミュレーターでモバイル画面を確認したら、画面外にハミ出たりしてたので携帯ゲームなどでは更に調整が必要かもしれません。