Unityに関連する記事です

干支の選択機能を追加する


 引き続き、干支の選択機能を実装していきます。この手順では干支のボタン用のプレファブの作成と、動作の確認を行います。


 完成動画です。灰色になっている干支が選択されている干支になります。この干支+ランダム4種類の干支がゲーム内に生成されます。

https://gyazo.com/e91a216fbb2e336c846078ae18f25e97



 実装の手順です。
 1.EtoButtonPlaceゲームオブジェクトの子オブジェクトとしてButtonゲームオブジェクトを追加し、EtoButtonに名前を変える
 2.EtoButtonスクリプトを作成する
 3.EtoButtonスクリプトをEtoButtonゲームオブジェクトにアタッチし、アサイン情報を登録して、プレファブにする

 4.EtoButtonゲームオブジェクトがEtoButtonPlace内に正常に配置できるか確認する
 5.EtoSelectPopUpゲームオブジェクトのインスペクターにEtoButtonPrefabゲームオブジェクトをアサインする
 6.ゲームを実行して動作を確認する



 新しく学習する内容になります。

・Button.onClick.AddListenerメソッドにコルーチンメソッドを登録する方法


1.EtoButtonPlaceゲームオブジェクトの子オブジェクトとしてButtonゲームオブジェクトを追加し、EtoButtonに名前を変える


 干支のボタン用のゲームオブジェクトである、EtoButtonゲームオブジェクトを作成します。

 EtoButtonPlaceゲームオブジェクトの上で右クリックを行い、UI => Button を選択し、ゲームオブジェクトを作成します。名前をEtoButton に変更します。
子オブジェクトとしてTextゲームオブジェクトが一緒に追加されますが、こちらは削除してください。


ヒエラルキー画像



Sceneビュー画像 
EtoButtonPlaceゲームオブジェクトの子オブジェクトとして作成されたEtoButtonゲームオブジェクト



 Buttonゲームオブジェクトとして作成したのは、このEtoButtonゲームオブジェクトをタップすることでボタンに表示されている干支の情報をGameDataに登録し、ゲーム内に反映させるためです。



 EtoButtonPlaceゲームオブジェクトには、GridLayoutGroupコンポーネントがアタッチされています。
そのためこのEtoButtonゲームオブジェクトのRectTransformの Width と Height の値は自動的に設定値(300, 300)に調整されます。
この値はGridLayoutGroupコンポーネントによって制御されていますので、このゲームオブジェクトからは操作をして変更することはできません(そのため灰色になっています)

EtoButtonゲームオブジェクトのRectTransform



 ImageコンポーネントとButtonコンポーネントは変更ありません。
干支の画像は指定せずにおきます(白いまま)。こちらは後でこのゲームオブジェクトを生成した際に、動的に画像を設定するためです。

 最後にインスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントをアタッチします。設定は変更しなくて大丈夫です。

EtoButtonゲームオブジェクトのインスペクター画像



EtoButtonゲームオブジェクトのインスペクター画像



 以上の手順でこのゲームオブジェクトは完成です。


2.EtoButtonスクリプトを作成する


 EtoButtonゲームオブジェクトを制御するために、EtoButtonスクリプトを作成します。
このスクリプトでは、EtoSelectPopUpスクリプトによって生成された際に、干支データを受け取り、その干支データに合わせた干支の画像を表示させるメソッドや、
タップした際に、管理している干支データの情報を GameDataスクリプトに用意した selectedEtoData 変数に登録するメソッドを用意して、実行させます。


EtoButton.cs

 <= クリックすると開きます。



<Button.onClick.AddListenerメソッドにコルーチンメソッドを登録する方法>


 以前、スクリプトからButtonコンポーネントの持つOnClickイベントにメソッドを登録する方法について学習しました。
今回登録するメソッドはコルーチンメソッドになりますので、書式が次のようなラムダ式の形になります。


    // ボタンにメソッドを登録
    btnEto.onClick.AddListener(() => StartCoroutine(OnClickEtoButton()));

 引数を指定できますので、もしもコルーチンメソッドに引数がある場合には持たせることも可能です。


3.EtoButtonスクリプトをEtoButtonゲームオブジェクトにアタッチし、アサイン情報を登録して、プレファブにする


 作成したEtoButtonスクリプトをEtoButtonゲームオブジェクトにドラッグアンドドロップしてアタッチします。

 ヒエラルキーからEtoButtonゲームオブジェクトを選択して、インスペクターを確認します。
EtoButtonスクリプトが追加されて、アサイン情報が表示されていれば正常です。


EtoButtonゲームオブジェクトのインスペクター画像




 4つのアサイン情報がありますが、EtoData変数に関してはゲーム実行時に値が代入されますので、ここは設定を行わなくて問題ありません。

 残る3つの変数に順番にアサインを行います。すべてEtoButtonゲームオブジェクトにアタッチされている各コンポーネントをアサインすることになります。
アサイン動画を参考してください。


アサイン動画 .劵┘薀襯ーからコンポーネントをアサインする方法(コンポーネントのアタッチしているゲームオブジェクトを指定する)
https://gyazo.com/285737bf736aaefb5e56c8ca6b117146


アサイン動画◆EtoButtonゲームオブジェクトを選択した状態で、インスペクターからコンポーネントをアサインする方法(コンポーネント自体を指定する)
https://gyazo.com/0231a5f6ba42f729cb78cf617ab2a04f


アサイン動画 プレファブにしてからコンポーネントをアサインする方法
https://gyazo.com/b61f0b2c3001cdc4531bcc9222abe0bf


EtoButtonゲームオブジェクトのアサイン完了時のインスペクター画像




 アサインが終了したら、EtoButtonゲームオブジェクトをプレファブ化します。
ヒエラルキーからPrefabsフォルダへドラッグアンドドロップしてください。ヒエラルキーのEtoButtonゲームオブジェクトの色が青くなればプレファブ化できています。

 Prefabsフォルダに作られたEtoButtonゲームオブジェクトの名前を EtoButtonPrefab に変更します。


EtoButtonPrefabゲームオブジェクトのインスペクター画像



EtoButtonPrefabゲームオブジェクトのインスペクター画像



EtoButtonPrefabゲームオブジェクトのインスペクター画像



 以上でこの手順は完成です。


4.EtoButtonゲームオブジェクトがEtoButtonPlace内に正常に配置できるか確認する


 従来であればプレファブ化したゲームオブジェクトは破棄しますが、今回はこの手順が終了してから破棄します。

 ヒエラルキーにあるEtoButtonゲームオブジェクトを選択して右クリックし、Duplicate を選択します。同じEtoButtonゲームオブジェクトが新しく複製されます。
このとき、この複製されたEtoButton(1)ゲーオブジェクトも GridLayoutGroupコンポーネントの影響下にいるため、EtoButtonゲームオブジェクトと同じ位置ではなくて、右横にスペースを空けて複製されます。


複製した際のSceneビュー、Gameビュー、ヒエラルキーの画像


複製動画
https://gyazo.com/2cd4e1028ffcbc997ba86535eaa34cf1

 これを何回か繰り返して、EtoButtonPlaceの子オブジェクトとして、EtoButtonゲームオブジェクトを12個並べてみてください。Duplicateは [ Ctrl + D ]キーでも行えます。
 横3個、縦4個に並んだ際に、EtoButtonPlaceからはみ出ずに綺麗に並んでいれば問題ありません。


12個複製した際のSceneビュー、Gameビュー、ヒエラルキーの画像



12個複製動画
https://gyazo.com/79309505a266c041c2134fe3f1a43038


 もしもEtoButtonPlaceよりもEtoButtonが大きすぎてはみ出てしまう場合や、逆にEtoButtonPlaceに対してEtoButtonが小さすぎてしまう場合には、
EtoButtonPlaceゲームオブジェクトのGridLayoutGroupコンポーネントのインスペクターから Sizeの x と y の値を 300 から調整してください。
このとき、EtoButtonゲームオブジェクトが正方形になるように x と y は同じ値にしてください。

 上記の画像のように、問題なく綺麗にEtoButtonゲームオブジェクトが並ぶようになったら、これらのEtoButtonゲームオブジェクトをすべて削除してください。
ゲームの実行と同時に自動的に生成するようにしますので、1つでもEtoButtonゲームオブジェクトがEtoButtonPlaceの子として残っていると正常に並びません。


複製したゲームオブジェクトを削除動画(EtoButtonPlaceには子ゲームオブジェクトがない状態にする)
https://gyazo.com/ff72bb2f001e75c7729386955eaa448a

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


5.EtoSelectPopUpゲームオブジェクトのインスペクターにEtoButtonPrefabゲームオブジェクトをアサインする


 EtoSelectPopUpゲームオブジェクトを選択し、先ほどの手順でコメントアウトしていた2つの変数のコメントアウトを解除します。
インスペクターに EtoButtonPrefab 変数が表示されますので、こちらに先ほど作成したプレファブの EtoButtonPrefab ゲームオブジェクトを
Project内の Prefabs フォルダ内から選択してドラッグアンドドロップしてアサインします。


アサイン動画
https://gyazo.com/72e8d3d38b88988dbd0e06e0c784ffbc

EtoSelectPopUpゲームオブジェクトのインスペクター画像


 
 以上でこの手順は完成です。


6.ゲームを実行して動作を確認する


 すべての手順の実装が完了しました。ゲームを実行して動作を確認します。


ゲーム実行時のGameビュー



 最初に干支の選択画面内で、干支ボタンが12個生成されます。そのため、以前のように、いきなりゲームがスタートすることはありません。

 上記の画像のように、生成されたEtuButtonPrefabにはちゃんと別々の干支の画像が設定されていますでしょうか。
画像を設定していないEtoButtonPrefabゲームオブジェクトですが、干支データを参照することによって12種類の干支の画像に自動的に書き換わって表示されます。

 画像がうまく反映されない場合には、EtoButtonゲームオブジェクトのアサインが漏れていないか、あるいはGameManagerのCreateEtoButtonsメソッドが記述されていないか、など
複数の要因が考えられますので、Debug.Logを利用して原因を特定していきます。

 もしも干支の選択中に後ろでゲームが動いている場合には、GameManagerスクリプトのStartメソッドを確認してください。自動的にゲームが始まる処理が残っている可能性があります。



 干支をタップして選択するとGameDataのselectedEtoData の変数に更新がはいり、干支データがタップされた干支の情報に書き換わります。
この処理が動かない場合には、EtoButtonスクリプトを見直してください。ボタンにメソッドの登録がされていないか、GameDataへの干支データを代入する処理の記述漏れの可能性があります。

検証動画(Gameビューで干支ボタンをタップ(クリック)すると、GameDataのselectedEtoData の値が更新される)
https://gyazo.com/cbb90bfa8dda8cf60bcfa32cf3fd4e68



 ゲームスタートと書かれたスタートボタンを押すことで干支の選択ポップアップが徐々に消えて、ゲームが開始されます。
選択した干支が生成される干支に含まれているかをGameManagerゲームオブジェクトのインスペクターから確認します。

検証動画(干支で辰を選択した状態でゲームスタートを押した際に、GameManagerのSelectedEtoDataListの最初の干支データに辰がいることを確認する)
https://gyazo.com/2c06076b00606485f958f62c12538b77



 ゲーム終了まで進めていき、リザルト表示を行います。タップをすると以前とは異なり、ゲームがリスタートせずに、干支の選択ポップアップが再度表示されます。

検証動画(リザルト表示時にタップした際、干支の選択に戻る)
https://gyazo.com/7ff79e43d5512f905238f7b41670439e


 以上の手順で、干支を選択してゲーム内に反映させる機能の実装が終了し、無事に新しいゲームサイクルが完成しました。



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

 次は 発展8 です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます