パズルゲーム 発展５
最終更新：
orika_ex_miyako 2022年11月13日(日) 09:58:00履歴
干支の選択機能を追加する�� 
今回のパズルゲームは干支を使ったゲームになっています。
せっかくですからプレイヤー自身に好きな干支を選択してもらうことができれば、よりゲームを楽しんでもらうことができます。
そこでゲームのサイクルを修正して、以下のようなゲームサイクルの設計を行います。
ゲームには選択した干支１つ＋ランダムな干支４つという形で、生成される干支に選択した干支の内容が反映されるようにします。
１．干支を選択するEtoSelectPopUpが表示されてタップで干支を１つ選択してゲームスタートをタップする ２．ゲームが開始される ３．残り時間が0になったらResultPopUpが表示されて、ゲーム結果が表示される ４．ResultPopUpをタップすることで【１】に戻る
２〜４までの流れは同じですので、【１】の干支を選択する操作を追加します。
手順は発展５〜７で実装を行っていきます。
発展５ではEtoSelectPopUpゲームオブジェクトの作成、発展６では干支のボタン用のプレファブの作成、発展７ではEtoSelectPopUpスクリプトの作成と動作の確認を行います。
完成動画です。灰色になっている干支が選択されている干支になります。この干支＋ランダム４種類の干支がゲーム内に生成されます。
https://gyazo.com/e91a216fbb2e336c846078ae18f25e97
実装の手順です。
１．干支の選択を行う、EtoSelectPopUpゲームオブジェクトを作成する(干支のボタンやスタートボタンを表示)
新しく学習する内容になります。
・GridLayoutGroupコンポーネントの使用方法
それではまずはEtoSelectPopUpゲームオブジェクトを作成していきましょう。
１．干支の選択を行う、EtoSelectPopUpゲームオブジェクトを作成する(干支のボタンやスタートボタンを表示)
ヒエラルキーにあるCanvasゲームオブジェクトの中に、新しくゲームオブジェクトを追加していきます。
これはEtoSelectPopUpという名前で、ゲーム内に登場させる干支を１つ選択するためのポップアップとなります。
このポップアップ内に、干支のイメージ画像を持ったボタンをスクリプトを使って生成し、完成させます。
この手順が終わった際には、下記の画像のような形になります。
ヒエラルキー全体
EtoSelectPopUpのヒエラルキー構成
EtoSelectPopUpの完成画像
Canvasゲームオブジェクトの子オブジェクトとして、EtoSelectPopUpゲームオブジェクトを作成する
Canvasゲームオブジェクトの上で右クリックを行い、Create Empty を選択し、ゲームオブジェクトを作成します。名前を EtoSelectPopUp に変更します。
EtoSelectPopUpゲームオブジェクトはフォルダ代わりに利用します。このゲームオブジェクト内にボタンを生成する場所やゲームスタート用のボタンなどを配置します。
EtoSelectPopUpゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネントがアタッチされているか確認してください。
もしもTransformコンポーネントである場合には、再度作成してください。
インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントをアタッチします。設定は変更しなくて大丈夫です。
インスペクター画像を参考にしてください。これでこのゲームオブジェクトは完成です。
EtoSelectPopUp インスペクター画像
Sceneビュー画像(透明なオブジェクトですので、画面の中央にあれば問題ありません)
EtoSelectPopUpゲームオブジェクトの子オブジェクトとしてImageゲームオブジェクトを追加し、BackGroundに名前を変える
EtoSelectPopUpゲームオブジェクトの上で右クリックを行い、UI => Image を選択し、ゲームオブジェクトを作成します。名前を BackGround に変更します。
BackGroundゲームオブジェクトでは、干支選択時の背景画像を設定します。
BackGroundゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考に（細かい数字は適宜切り上げてください）、Canvasと同じ大きさにして、ゲーム画面を隠すように配置しておいてください。
つづいてImageコンポーネントのSourceImageに、干支選択時の背景となる画像を設定します。
ここでは無料画像を探してきてインポートして利用していますが、画像は自由に設定してください。（干支に合わせて和風な素材を利用しています）
合わせてImageコンポーネントにある Raycast Target のチェックを外します。
以上でこのゲームオブジェクトは完成です。
BackGroundゲームオブジェクト インスペクター画像
Sceneビュー画像
Gameビュー画像
EtoSelectPopUpゲームオブジェクトの子オブジェクトとしてImageゲームオブジェクトを追加し、EtoButtonPlaceに名前を変える
EtoSelectPopUpゲームオブジェクトの上で右クリックを行い、UI => Image を選択し、ゲームオブジェクトを作成します。名前を EtoButtonPlace に変更します。
EtoButtonPlaceゲームオブジェクトは、スクリプトから生成された干支のボタンを等間隔で並べて表示する役割を持つゲームオブジェクトになります。
EtoButtonPlaceゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考に（細かい数字は適宜切り上げてください）、BackGround内に適宜な大きさにして配置してください。
またBackGroundゲームオブジェクトよりも手前に表示されるように、Canvas内のヒエラルキー位置はBackGroundゲームオブジェクトよりも下に配置してください。
ヒエラルキー画像
つづいてImageコンポーネントのSourceImageに、干支ボタンの並ぶ背景となる画像を設定します。
ここではUnityのBackGroundスプライトをそのまま利用していますが、画像は自由に設定してください。
干支のボタンがカラフルですので、なるべく単色で、かつ半透明にしておくとBackGroundの画像も見えて豪華な画面の作りになります。
合わせてImageコンポーネントにある Raycast Target のチェックを外します。
EtoButtonPlaceゲームオブジェクト インスペクター画像��
Sceneビュー画像
最後にコンポーネントを１つ追加します。インスペクターの一番下にある Add Component ボタンを押して、GridLayoutGroupコンポーネントをアタッチします。
以下の画像のように設定をしてください。
EtoButtonPlaceゲームオブジェクト インスペクター画像�◆�GridLayoutGroup
以上でこのゲームオブジェクトは完成です。
＜GridLayoutGroupコンポーネントの使用方法＞
GridLayoutGroupコンポーネントはLayoutを自動的に調整するコンポーネントの１つです。
設定によって縦方向でも横方向でも並べることができるため、汎用性が広いLayoutの調整が可能です。
今回設定を行ったプロパティについて説明していきます。
１．CellSize
CellSizeは、GridLayoutGroupの子オブジェクトとして配置されたゲームオブジェクトの大きさのWidthとHeightをこの大きさに自動的に調整します。
そのため元のゲームオブジェクトの大きさは使用されなくなります。
今回は x = 300, y = 300 で設定をしていますので、子オブジェクトは自動的にこのサイズのゲームオブジェクトに調整されます。
２．Spacing
Spacing は設定したx と y の値の分だけ、隣あうゲームオブジェクトとの間にスペースを自動的に取ってくれる機能です。
この値を 0 にすればスペースのない間隔でゲームオブジェクト同士が並びます。x は横方向のスペース、y は縦方向のスペースの距離です。
今回はそれぞれ 20 に設定していますので、ゲームオブジェクト同士は縦横に 20 のスペースを取って自動的に並ぶようになります。
３．StartCorner
子オブジェクトを並べ始めるスタート地点です。プルダウンメニューから選択可能です。
今回は Upper Left の設定にしていますので、子オブジェクトは画面の左上から順番に並び始めるようになります。
４．Start Axis
子オブジェクトを並べる方向です。縦方向に並べる場合には Vertical、横方向に並べる場合には Horizontal を選択します。
今回は横方向に並べてそろえたいので、Horizontal を選択しています。
５．ConstraintとConstraintCount
行と列の数を指定数で制約することができる機能です。プルダウンメニューで設定できます。
子オブジェクトを並べていった際に、指定数が並んだら途中で折り返すのか、そのままずっと範囲内であれば指定方向に並べていくのかをプルダウンメニューで設定できます。
今回は Fixed Column Count の設定にしています。横方向に指定数だけ並んだら、次の列に移ってまた並べ始めるという設定です。
Constraint Count が指定数になります。今回は 3 を指定していますので、横方向に3つ子オブジェクトが並んだら
次の行へ移動してまた横方向に3つ子オブジェクトを並べる、という並び順を指定しています。
干支は12種類ありますので、横方向に3つ、それを4行分作る、という設定になります。
新しいコンポーネントに触れたときは、自分で設定を変えて試してみてください。
マニュアルや、他の記事なども参考にしてください。
Unity公式マニュアル
Grid Layout Group
https://docs.unity3d.com/ja/2019.4/Manual/script-G...
Unityで魔物使い ゲームを作る様
Grid Layout Group
https://unity-shoshinsha.biz/archives/tag/grid-lay...
EtoSelectPopUpゲームオブジェクトの子オブジェクトとしてButtonゲームオブジェクトを追加し、btnStartに名前を変える
Canvasゲームオブジェクトの上で右クリックを行い、UI => Button を選択し、ゲームオブジェクトを作成します。名前を btnStart に変更します。
また子オブジェクトとしてTextゲームオブジェクトが一緒に追加されますが、こちらは削除してください。
btnStartゲームオブジェクトをタップすることでゲームをスタートさせます。また、背景画像を設定します。
btnStartゲームオブジェクト インスペクター画像��
btnStartゲームオブジェクト インスペクター画像��
Sceneビュー画像��
Sceneビュー画像��
以上でこのゲームオブジェクトは完成です。
btnStartゲームオブジェクトの子オブジェクトとして、TextBasePrefabを配置し、txtStartLabelに名前を変える
btnStartゲームオブジェクトの子オブジェクトとして TextBasePrefab を配置してください。
名前を txtStartLabel に変更します。この部分にゲームスタートの文字列を表示させます。
txtStartLabelゲームオブジェクトを選択し、インスペクターを確認します。RectTransfromコンポーネント、あるいはSceneビュー内で位置を大きさを調整します。
画像を参考にしてください。（細かい数字は適宜切り上げてください）
Textコンポーネント内のText欄にタイトルとなる文字列を設定します。ここでは "ゲームスタート" という文字列を表示させています。
txtStartLabelゲームオブジェクト インスペクター画像��
txtStartLabelゲームオブジェクト インスペクター画像��
Sceneビュー画像��
Sceneビュー画像��
以上でこのゲームオブジェクトは完成です。
btnStartゲームオブジェクトの子オブジェクトとしてImageゲームオブジェクトを追加し、imgFrameに名前を変える(必要に応じて)
この作業は必要に応じて行ってください。
btnStartゲームオブジェクトに設定した背景画像がゲームスタートの文字列を覆うようにFrameとしての役割を持っていますが
今回のケースではこのフレームになる部分が上下にしかなかったため、このゲームオブジェクトを追加して左右にもFrame用の画像を表示して文字列を囲むようにしています。
imgFrameゲームオブジェクト インスペクター画像
Sceneビュー画像
以上でこのゲームオブジェクトは完成です。
ここまでの完成画像の確認
以上ですべての作業は終了です。次は干支のボタン用のプレファブの作成とスクリプトの修正を行います。
画像を確認して抜けているゲームオブジェクトがないか、確認してください。
EtoSelectPopUp スクリプトアタッチ画像 アサイン
Sceneビュー画像��
Sceneビュー画像��
Sceneビュー画像��
以上でこの手順は終了です。
次は 発展６ です。
コメントをかく