見出し画像

Unity UI入門⑭｜Grid Layout Groupの使い方徹底解説 | ボタンやアイテムを自動で並べよう

ファイブボックス

Unityでメニュー画面やステージ選択画面などを作っていると、複数のボタンや画像をきれいに並べたいことがあります。

もちろん、Rect Transformを使って1つずつ位置を調整することもできます。
しかし、ボタンが増えるたびに位置を調整したり、間隔をそろえたりするのは少し大変です。

そんなときに便利なのが、Layout Groupです。

Layout Groupを使うと、子オブジェクトを横方向、縦方向、格子状などに自動で並べることができます。

今回は、その中でも特に使いやすい Grid Layout Group を中心に確認していきます。


1．Layout Groupとは

Layout Groupは、子オブジェクトの位置やサイズを自動的に整えるためのコンポーネント です。

代表的なLayout Groupには、次の3種類があります。

  • Horizontal Layout Group

  • Vertical Layout Group

  • Grid Layout Group

Layout Groupは、並べたいUIそのものではなく、それらをまとめている親オブジェクトに追加します。

たとえば、Panelの中に複数のButtonがある場合は、Panel にLayout Groupを追加します。

Canvas
└─ Panel ← Layout Groupを追加
    ├─ Button
    ├─ Button
    ├─ Button
    └─ Button

すると、Panelの子になっているButtonの配置が自動的に管理されます。


2．Horizontal Layout Group

Horizontal Layout Groupは、子オブジェクトを横方向に並べます。

たとえば、

のような配置になります。

ゲーム画面の操作ボタンや、メニューのボタン、タブなどを横一列に並べたい場合に便利です。

3．Vertical Layout Group

Vertical Layout Groupは、子オブジェクトを縦方向に並べます。

メニュー画面や設定画面など、項目を上から順番に並べたい場合によく使います。

Horizontal Layout GroupとVertical Layout Groupには似た設定項目が多く、基本的な違いは横方向に並べるか、縦方向に並べるかです。

そして今回詳しく確認するのが、もう1つのLayout GroupであるGrid Layout Groupです。


4．Grid Layout Groupとは

Grid Layout Groupは、子オブジェクトを縦横の格子状に並べるコンポーネントです。

たとえば、下のように同じサイズのUIを規則正しく配置できます。


ゲームでは、次のような画面に利用できます。

  • ステージ選択

  • アイテム一覧

  • キャラクター選択

  • カード一覧

  • ボタン一覧

今回は、複数のButtonを並べながらGrid Layout Groupの設定を確認してみましょう。

4-1．Grid Layout Groupを追加

まず、Canvasの中にPanelを作成します。

そのPanelの子としてButtonを複数作成します。

Canvas
└─ Panel
    ├─ Button
    ├─ Button
    ├─ Button
    ├─ Button
    ├─ Button
    └─ Button

Panelを選択して、コンポーネントを追加

Add Component → Grid Layout Group

Grid Layout Groupを追加すると、Panelの子になっているButtonが自動的に並びます。
ここで重要なのは、Grid Layout Groupは、自分自身の位置を変更するコンポーネントではありません。

Grid Layout Groupが付いているオブジェクトの子オブジェクトを並べるためのコンポーネントです。

4-2．Cell Size

まず確認したいのが、Cell Sizeです。

Cell Sizeでは、子オブジェクト1つ分のサイズを設定します。

  • X：横幅

  • Y：高さ

たとえば、

X = 150
Y = 80

とすると、それぞれのButtonが 150 × 80 のサイズで配置されます。

Grid Layout Groupを使っている場合、子オブジェクトのRect TransformでWidthやHeightを変更しても、Grid Layout Groupによってサイズが変更されます。

そのため、Grid Layout Group内にあるUIのサイズを変更するときは、基本的にCell Sizeを変更します。

4-3．Spacing

Spacingでは、セル同士の間隔を設定します。

  • X：横方向の間隔

  • Y：縦方向の間隔

たとえば、

Spacing X = 20
Spacing Y = 20

とすると、それぞれのセルの間に20の間隔ができます。

  • Cell Size - UIそのものの大きさ

  • Spacing - UI同士の間隔


4-4．Padding

Paddingでは、Grid Layout Groupの外側の余白を設定します。

設定できるのは、

  • Left

  • Right

  • Top

  • Bottom

たとえば Top を30にすると、親オブジェクトの上端から30だけ空けて、子オブジェクトが配置されます。

Spacingと似ていますが、役割は異なります。

  • Spacing - 子オブジェクト同士の間隔

  • Padding - 親オブジェクトの端と子オブジェクトとの間の余白

4-5．Start Corner

Start Cornerでは、どの角から子オブジェクトを配置するかを設定します。
選択できるのは次の4種類です。

  • Upper Left

  • Upper Right

  • Lower Left

  • Lower Right

たとえばUpper Leftでは、左上から順番に配置されます。

① ② ③
④ ⑤ ⑥

Upper Rightでは、右上を基準に配置されます。

③ ② ①
⑥ ⑤ ④

通常のメニューやステージ選択などでは、Upper Leftが分かりやすいでしょう。

4-6．Start Axis

Start Axisでは、子オブジェクトをどちらの方向から優先して並べるかを設定します。

設定できるのは、

  • Horizontal

  • Vertical

Horizontal

Horizontalでは、横方向へ並べてから次の行へ進みます。

① ② ③
④ ⑤ ⑥

Vertical

Verticalでは、縦方向へ並べてから次の列へ進みます。

① ③ ⑤
② ④ ⑥

同じ6個の子オブジェクトでも、Start Axisによって並ぶ順番が変わります。


4-7．Child Alignment

Child Alignmentでは、親オブジェクトの中で、子オブジェクト全体をどこに配置するかを設定します。

  • Upper Left

  • Upper Center

  • Upper Right

  • Middle Left

  • Middle Center

  • Middle Right

  • Lower Left

  • Lower Center

  • Lower Right

親オブジェクトのサイズよりもGrid全体が小さい場合、この設定によって配置位置の違いが分かりやすくなります。

たとえば、Middle Centerを選択すると、Grid全体が親オブジェクトの中央付近に配置されます。

4-8．Constraint

Grid Layout Groupで特に重要な設定の1つがConstraintです。
Constraintでは、Grid の行数や列数をどのように決めるかを設定します。

次の3種類があります。

  • Flexible

  • Fixed Column Count

  • Fixed Row Count

Flexible

Flexibleでは、Grid Layout Groupが利用できるサイズなどに応じて配置します。

自動的に配置してくれるため便利ですが、作りたいレイアウトによっては列数を予想しにくい場合があります。

Fixed Column Count

Fixed Column Countでは、列数を固定できます。

たとえば、

Constraint Count = 3

とすると、3列で配置されます。

□ □ □
□ □ □
□ □

ステージ選択画面など、「必ず3列にしたい」という場合に便利です。

Fixed Row Count

Fixed Row Countでは、行数を固定します。

たとえば2行に設定すると、

□ □ □ □
□ □ □ □

という形で配置できます。

Grid Layout Groupを初めて使う場合は、配置結果が分かりやすいFixed Column Countから試してみるとよいでしょう。


5．ステージ選択画面を作ってみよう

それでは、Grid Layout Groupを使って簡単なステージ選択画面を作ってみましょう。

Panelの子としてButtonを6個作成します。

スクリプトファイル：LayoutManager を作ってPanelにアタッチします。
LayoutManager には、以下のコードを作って、ボタンの文字を置き換えてみます。

using UnityEngine;
using UnityEngine.UI;   // Textコンポーネントを使用するために必要

public class LayoutManager : MonoBehaviour
{
    void Start()
    {
        for(int i=0;i<6;i++)    //Buttonの数だけループ
        {
            //Buttonの子要素にあるTextコンポーネントを取得して、テキストを設定
            transform.GetChild(i).GetComponentInChildren<Text>().text = "STAGE "+(i+1);
        }
    }
}


Grid Layout Groupを次のように設定します。

Cell Size

X = 180
Y = 80
Spacing

X = 20
Y = 20

Constraintを、Fixed Column Count  に変更し、

Constraint Count = 3

とします。

プレイをすると、

STAGE 1　STAGE 2　STAGE 3
STAGE 4　STAGE 5　STAGE 6

という形で、3列に自動配置できます。

Buttonが増えた場合も、Grid Layout Groupが自動的に位置を調整してくれます。

1つずつRect Transformの位置を調整する必要がないため、多数のUIを配置するときに便利です。

6．Grid Layout Groupを使うときの注意点

最後に、Grid Layout Groupを使うときによくあるポイントを確認しておきましょう。

子オブジェクトを移動しても元に戻る

Grid Layout Groupは子オブジェクトの位置を自動的に管理します。

そのため、子オブジェクトをRect Transformで移動しても、レイアウトが更新されるとGrid Layout Groupによって元の位置へ戻ります。

位置を調整したい場合は、Grid Layout Group側の設定を変更します。

Buttonのサイズを変更しても元に戻る

Grid Layout Groupでは、子オブジェクトのサイズをCell Sizeで管理します。

子ButtonのWidthやHeightではなく、Grid Layout GroupのCell Sizeを変更しましょう。

思った列数にならない

Constraintを確認します。

列数を固定したい場合は、Fixed Column Count を選択して、Constraint Countに列数を設定します。

並ぶ順番がおかしい

Grid Layout Groupでは、Hierarchy上の子オブジェクトの順番に従って配置されます。

並び順がおかしい場合は、

  • Hierarchyの順番

  • Start Corner

  • Start Axis

を確認してみましょう。

15．今回のまとめ

今回は、Layout Groupを使ってUIを自動的に並べる方法を確認しました。

今回のポイントは次のとおりです。

こちらはUnity初心者向けの記事をテーマ別にまとめています。
▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

いいなと思ったら応援しよう！

ファイブボックス よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！