サイドパネルとは

テレビ放送などで画面の左右に表示される黒帯（ピラーボックス）のことです。今回はこのサイドパネルみたいなUIをuGUIで設定する方法を解説します。

（画面の左右に帯を出してそこにUIを表示するこの画面の作り方を紹介します）

#やり方

1.Canvasを設定する

Canvasをシーン上に新しく作成し、[Canvas Scaler]の[UI Scale Mode]を Scale With Screen Size に設定します。
また、Rederense Resolutionも設定しCanvas上の基準となるピクセル数を決定します。（今回は1920x1080に設定）

2.空のGameObjectをCanvas上に作成

名前は適当に「MainPanle」にしておきます。
作成したらRect Transformを調整して画面全体にフィットするサイズに変更します。

3. MainPanelの下に空のGameObjectを3つ生成

それぞれ上から「Left」「Center」「Right」という名前にして配置します。
RectTransformは初期値のままで変更しなくて大丈夫です。

4. 3つのオブジェクトを等間隔で配置させる

MainPanelにHorizontal Layout Groupコンポーネントを追加します。
また、[Control Child Size]のWidthとHeighの両方にチェックを入れます。

これを設定することで先程の「Left」「Center」「Right」が自動的に等分割されて画面上に配置されます。

（Horizontal Layout Groupにより等分割されて配置される）

5. Centerパネルのサイズを上書きする

このままだとCenterパネルの領域が狭いのでLayoutElementコンポーネントを使ってサイズを上書きします。

「Center」の名前のGameObjectにLayout Elementコンポーネントを設定し、[Preferred Width]にチェックを入れて必要な分の横幅のピクセル数を設定します。
ここのピクセル数は最初にCanvas Scalerで設定したピクセル数に依存して変化します。

（上の図の場合はCenterPanelの横幅が1000ピクセルで固定されサイドパネルがそれぞれ460ピクセルになる）

6. Left、Rightパネルから要素がはみ出ないようにする

このままUI要素をサイドパネルにおいてしまうと、描画された際にオブジェクトがサイドパネルからはみ出てしまうのでMaskを設定してしまいます。

Right、LeftそれぞれにRect Mask 2Dコンポーネントを追加します。

7. Left,RightパネルにそれぞれUIを配置する

ここまでで設定はできたので後はLeftとRightパネルの下にそれぞれ必要なUI要素を配置すれば完成です。

最後に

画面のアスペクト比が固定の場合でしかこの方法は試してないのでアスペクト比が可変の場合は上手く行かない可能性があります。

おまけ

Layout Elementのパラメータを動的に変更することで収納・展開アニメーションが作れます。