Unity – iOS / Androidで背景を下揃えに、その他は中央表示させるCanvas設定

uGUIで縦横比が変わっても背景を下揃えにして、その他のUIを中央揃えにしたい場合のCanvas設定方法です。

今回の設定をunitypackageにしましたのでダウンロードはこちらからお願いします。たぶんunitypackageを見てもらった方が早いです。

こんな感じの2つのCanvasを作っていきます。

背景用Canvasの作成

端末の縦横比が変わっても縦横比固定で下揃えのCanvasを作っていきます。まずCanvasBgを作成し、Inspector設定は以下のようにします。

まず Canvas > Render Modeを Screen Space - Camera に設定し、 Canvas Scaler (Script) > UI Scale Mode を Scale with Screen Size に設定します。

今回はデフォルトデザインを3:2で作成しているため Referense Resolution は1920×1280にしていますが必要な16:9で作成している場合はここの設定を変更する必要があります。

重要なのは Match を Width 1 に設定することです。これにより横幅を基準に背景が拡大縮小することになります。

そのCanvasの中にPanelなどUIを下揃えで設置していくことになります。

前景用Canvasの作成

次に前景用Canvas、つまり中央揃えにするUIです。

こちらも背景用とほぼ同じ設定です。違うところは Match を Height 1 に設定することです。これにより縦幅を基準に背景が拡大縮小することになります。