i-school - 2Dまるばつゲーム(三目並べ) 手順3
 以下の内容で順番に実装を進めていきます。

手順3 ーマス目用の Grid の作成ー
 5.Canvas内にマス目用のゲームオブジェクトを設置するための準備をする
 6.Canvas内にマス目用のゲームオブジェクトを作成する



 新しい学習内容は、以下の通りです。

 ・GridLayoutGroup コンポーネント



5.Canvas内にマス目用のゲームオブジェクトを設置するための準備をする

1.設計


 レイアウトは任意です。

 このページでは参考例を提示しておきます。この通りにである必要はありませんが、
Canvas 内に、管理しやすいようにゲームオブジェクトを配置していきましょう。


2.GridSetTran ゲームオブジェクトを作成する


 複数の Grid (マス)を管理するフォルダ役のゲームオブジェクトを作成します。
ゲーム画面の中央に設置しています。Anchor も中央です。

 GridLayoutGroup コンポーネントをアタッチすることで、子オブジェクトとして Grid を配置した際に
自動的にサイズや並び方を調整するように設定しています。


ヒエラルキー画像



インスペクター画像



3.<GridLayoutGroupコンポーネント>


 GridLayoutGroupコンポーネントはLayoutを自動的に調整するコンポーネントの1つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広いLayoutの調整が可能です。
 
 今回設定を行ったプロパティについて説明していきます。


1.CellSize

 CellSizeは、GridLayoutGroupの子オブジェクトとして配置されたゲームオブジェクトの大きさのWidthとHeightをこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります。

 今回は x = 250, y = 250 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。


2.Spacing

 Spacing は設定したx と y の値の分だけ、隣あうゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は横方向のスペース、y は縦方向のスペースの距離です。

 今回は x を 10 に設定していますので、ゲームオブジェクト同士は横に 10 のスペースを取って自動的に並ぶようになります。


3.StartCorner

 子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは画面の左上から順番に並び始めるようになります。


4.Start Axis

 子オブジェクトを並べる方向です。縦方向に並べる場合には Vertical、横方向に並べる場合には Horizontal を選択します。
今回は横方向に並べてそろえたいので、Horizontal を選択しています。


5.ConstraintとConstraintCount

 行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。
子オブジェクトを並べていった際に、指定数が並んだら途中で折り返すのか、そのままずっと範囲内であれば指定方向に並べていくのかをプルダウンメニューで設定できます。

 今回は Fixed Raw Count の設定にしています。行(Raw =横)方向に指定数だけ並んだら、次の列に移ってまた行方向並べ始めるという設定です。
Constraint Count が指定数になります。今回は 3 を指定していますので、行(横)方向に3つ子オブジェクトが並んだら
次の列へ移動してまた行方向に3つ子オブジェクトを並べる、という並び順を指定しています。

 3目並べは9マスありますので、行方向に3つずつ並べて、それを3列分作る、という設定になります。



 新しいコンポーネントに触れたときは、自分で設定を変えて試してみてください。
 マニュアルや、他の記事なども参考にしてください。
Unity公式マニュアル
Grid Layout Group
https://docs.unity3d.com/ja/current/Manual/script-...
Unityで魔物使い ゲームを作る様
Grid Layout Group
https://unity-shoshinsha.biz/archives/tag/grid-lay...



6.Canvas内にマス目用のゲームオブジェクトを作成する

1.設計


 GridSetTran ゲームオブジェクトを親として、子オブジェクトとしてマス目用の Grid ゲームオブジェクトを作成します。
先ほどの説明にもあったように、GridLayoutGroup コンポーネントを利用しているので、自動的にサイズと位置が調整されます。

 これらは実装例ですので、並ぶ際のサイズやスペースなどは、自分のゲーム画面のサイズを考えながら、適宜な値に調整してください。
ピッタリに並べたいのであれば、上下左右のスペースはない方がいいです。

 遊ぶ人の視点にたって、どういったゲーム画面の方が見やすくて遊びやすいかを考慮してレイアウトを決めていきましょう。


2.Grid ゲームオブジェクトを作成する


 GridSetTran ゲームオブジェクトの子オブジェクトとして Button コンポーネントがアタッチされているゲームオブジェクトを作成し、Grid に名前を変更します。
Button ゲームオブジェクトは子オブジェクトとして Text コンポーネントがアタッチされているゲームオブジェクトを自動的に作成します。
こちらの名称も txtGridOwner に変更しておきます。

 Grid(Button) の Image コンポーネントには背景用の画像を任意に設定してください。ここでは未設定です。

 txtGridOwner (Text) の Text コンポーネントには、このマスの所有者として〇か×のいずれかを記述します。
そのため、文字の大きさ・色・フォントを任意に設定してください。


ヒエラルキー画像



インスペクター画像



インスペクター画像



Sceneビュー画像




3.複数の Grid を並べて、仮のゲーム画面を作成する


 Grid を複数並べることで、三目並べのゲーム画面が完成します。
Grid については、次の手順でプログラムから自動的に並べる処理を作成します。
ここではまず、手動で Grid を並べてみて、そのサイズ感、ゲーム画面としての見た目のレイアウトをしておきます。

 Grid ゲームオブジェクトを選択して ctrl + D ボタンか、右クリックでメニューを開いて Duplicate を選択し、Grid を複製します。
この手順を繰り返して、Grid を9個になるまで複製してください。


ヒエラルキー画像



インスペクター画像


 
 理想のゲーム画面になるように調整してみましょう。


4.Grid ゲームオブジェクトをプレファブにする


 ゲーム画面がどのように出来上がるのかを確認し、問題なくなったら、最初にあった Grid ゲームオブジェクト以外は削除します。
その後、残った1つの Grid ゲームオブジェクトをプレファブにします。
事前にプレファブ用のフォルダを作成しておくといいでしょう。

 プレファブになったら、Grid ゲームオブジェクトもヒエラルキーから削除して、すべての Grid ゲームオブジェクトをなくしておきます。



 以上でこの手順は終了です。

 次は 手順4 −ロジックに基づいたプレファブの生成と配列による管理方法− です。