はじめに
今回はUIを画面の横幅いっぱいに並べてみる記事になります！
実際に作るのはこんな感じ。
一応このUIはこちらのSimaple UIというアセットを利用させていただいています。
では早速作っていきましょう。
作り方
まずは横いっぱいにしたいボタン等のUIたちを入れる親ゲームオブジェクトを作成します。
Canvas以下に空のゲームオブジェクト(Create Empty)を作ってください。
ここで画面の横のピクセル数や縦横の比率が変化しても対応できるように、Anchorをanchor presetsから横いっぱいに広がっているものを選択してください。
ここからが一番重要で、ゲームオブジェクトにHorizontal Layout Groupというコンポーネントをアタッチします。
Horizontal Layout Groupのざっくりとした説明はこんな感じ。
Horizontal Layout Group コンポーネントは、子のレイアウト要素を互いに隣合わせに配置します。
Horizontal Layout Group - Unity マニュアル
いわゆる子オブジェクトの配置・サイズを自動で調整して並べてくれるコンポーネントになります。
するとImageやButtonといったUIを子オブジェクトに配置してみると、いい感じに並べてくれるはずです。
あとはゲームオブジェクトの座標やHorizontal Layout Groupのspacing，paddingを調整すれば完成です。
さいごに
この手法は色んなスマホの形，ピクセル数に対応するために必須な知識だと思うので是非マスターしておくと良いと思います。
ではまた。
