Unityに関連する記事です

 この手順ではゴール地点についてゲームクリアの状態になった際に、画面にリザルト(ゲームの結果)を表示する処理を実装していきます。


<実装画面 リザルト表示>
https://gyazo.com/5531b43515436c7c7d6af8a270e94350


手順21 ーリザルト表示の実装ー
37.Canvas内にUI部品を作成する(リザルト表示)
38.ゲームクリアの際にリザルトを表示する処理と、クリックで最初からリスタートする処理を追加する



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

・Button.onClick.AddListenerメソッド ースクリプトからボタンタップ用メソッドの登録ー
・GameObject型以外のインスタンスの方法
・スクリプトを経由して別のスクリプトの処理を実行していく方法



37.Canvas内にUI部品を作成する(リザルト表示)

1.設計


 画面前面にリザルト表示を表示したいので、Canvas内に子オブジェクトとして ResultPopUp ゲームオブジェクトを作成してプレファブにしておきます。
ゴール地点に到着した際に、この ResultPopUp ゲームオブジェクトを生成する処理を UIManager スクリプトに追加して、制御を行うようにします。

 ResultPopUp ゲームオブジェクトには、プレイヤーが獲得したコインのポイントを表示したり、アニメーション処理の制御を行うため
専用の ResultPopUp スクリプトを作成してアタッチしておきます。このスクリプトを通して ResultPopUp ゲームオブジェクトの制御を行うようにします。
 

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


 最初に ResultPopUp ゲームオブジェクトを作成していきます。


完成図


ヒエラルキー画像



 それでは順番に作成していきます。


1.Canvas ゲームオブジェクトの子オブジェクトとして ResultPopUp ゲームオブジェクトを作成する

 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
空のゲームオブジェクトが作成されますので、名前を ResultPopUp に変更します。


ヒエラルキー画像



 ResultPopUp ゲームオブジェクトは、これから作成するゲームオブジェクト群をまとめておくフォルダ役のゲームオブジェクトです。
ヒエラルキーで ResultPopUp ゲームオブジェクトを選択して、インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加してください。
このコンポーネントを利用することで、ResultPopUp ゲームオブジェクトの子オブジェクトの表示/非表示を一括で操作できるようにします。設定は特に変更ありません。


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



ResultPopUp ゲームオブジェクト Sceneビュー画像



2.ResultPopUp ゲームオブジェクトの子オブジェクトとして、btnTitle ゲームオブジェクトを作成する

 ResultPopUp ゲームオブジェクトを選択して右クリックをしてメニューを開き、UI => Button を選択します。
ResultPopUp ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトが作成されますので、名前を btnTitle に変更します。


ヒエラルキー画像


 
 btnTitle ゲームオブジェクトはリザルト表示の背景画像の設定とともに、ボタンとしての役割を担います。
SceneビューとGameビュー画像を参考に、ゲーム画面全体を覆うように配置してください。背景の画像については、今回は初期設定の background を使用し、色と透過度を変更しています。
フレーム画像を用意したり、色を変更したりなど、自由に変更してください。サイズと画像以外の設定は変更なしで問題ありません。


btnTitle ゲームオブジェクト SceneビューとGameビュー画像



btnTitle ゲームオブジェクト インスペクター画像(Colorの設定値は(75, 75, 75, 100))



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



3.ResultPopUp ゲームオブジェクトの子オブジェクトとして、imgFrame ゲームオブジェクトを作成する

 ResultPopUp ゲームオブジェクトを選択して右クリックをしてメニューを開き、UI => Image を選択します。
ResultPopUp ゲームオブジェクトの子オブジェクトとして Image ゲームオブジェクトが作成されますので、名前を imgFrame に変更します。


ヒエラルキー画像



 imgFrame ゲームオブジェクトは、リザルトとして表示する内容をまとめるフレームの役割を持ちます。このゲームオブジェクトの中に、ゲームのプレイ結果を表示します。

 Image コンポーネントの Source Image 欄に、自由な画像を設定してください。今回は無料のイラスト素材を探してインポートして利用しています。
SceneビューとGameビュー画像を参考に、画面の中央付近に、適宜なサイズで設置してください。(インスペクターのRectTransform コンポーネントの Position も参考にしてください)


imgFrame ゲームオブジェクト SceneビューとGameビュー画像



 サイズと位置の調整が完了したら、Image コンポーネントの Raycast Target のチェックを外しておいてください。
このチェックがある部分はクリックに対して反応するようになるため、チェックを入れておくと、
この画像と重なっている Image コンポーネントのクリックが反応しなくなってしまうためです。そのため、Button コンポーネントが反応しなくなります。
学習済の項目になりますので、再度、自分で調べてみてください。


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



4.ResultPopUp ゲームオブジェクトの子オブジェクトとして、lblTitle ゲームオブジェクトを作成する

 ResultPopUp ゲームオブジェクトを選択して右クリックをしてメニューを開き、UI => Text を選択します。
ResultPopUp ゲームオブジェクトの子オブジェクトとして Text ゲームオブジェクトが作成されますので、名前を lblTitle に変更します。


ヒエラルキー画像



 この lblTitle ゲームオブジェクトは、リザルト表示のタイトルを表示する役割を持ちます。

 Text コンポーネントを選択して、Text プロパティ欄に "Stage Clear!!" と入力してください。この値は動的には変化しませんので、ずっとこの内容が表示されます。
合わせて、フォントと、フォントのサイズも変更します。文字のフォントサイズ大きい場合、ゲームオブジェクトのサイズ自体も大きくないと表示されません。
文字の位置は中央寄せ・中央がいいでしょう。

 また Text コンポーネントにも Raycast Target のチェックがありますので、こちらのチェックを外しておいてください。


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



lblTitle ゲームオブジェクト SceneビューとGameビュー画像


 
 文字の設定が完了したら、サイズと位置を調整します。SceneビューやGameビュー画像(インスペクターも)を参考に適宜なサイズと位置に調整してください。


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



5.ResultPopUp ゲームオブジェクトの子オブジェクトとして、lblScore ゲームオブジェクトを作成する

 ResultPopUp ゲームオブジェクトを選択して右クリックをしてメニューを開き、UI => Text を選択します。
ResultPopUp ゲームオブジェクトの子オブジェクトとして Text ゲームオブジェクトが作成されますので、名前を lblScore に変更します。


ヒエラルキー画像



 lblScore ゲームオブジェクトは、リザルトに表示するコインの点数のラベルの役割を持ちます。


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



 Text コンポーネントの Text プロパティ欄に "Score :" と入力してください。この値は常にラベルとして表示する内容になります。(スクリプトから動的に変更しません)
合わせて、フォントと、フォントのサイズも変更します。Sceneビュー、Gameビューを見ながら、適宜なサイズに調整してください。
文字の位置の設定は、左寄せ・中央がよいでしょう。

 他の Text コンポーネントと同じように、Raycast Target のスイッチを外しておいてください。


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



 文字の設定が完了したら、サイズと位置を調整します。SceneビューやGameビュー画像(インスペクターも)を参考に適宜なサイズと位置に調整してください。
このゲームオブジェクトの右側にコインのポイント数を表示するようにしますので、画面の中央よりも左側に寄せて配置してください。


lblScore ゲームオブジェクト Sceneビュー画像



lblScore ゲームオブジェクト SceneビューとGameビュー画像



6.ResultPopUp ゲームオブジェクトの子オブジェクトとして、txtScore ゲームオブジェクトを作成する

 ResultPopUp ゲームオブジェクトを選択して右クリックをしてメニューを開き、UI => Text を選択します。
あるいは、lblScore ゲームオブジェクトを複製します。(どちらでも構いません)
ResultPopUp ゲームオブジェクトの子オブジェクトとして Text ゲームオブジェクトが作成されますので、名前を txtScore に変更します。


ヒエラルキー画像



 txtScore ゲームオブジェクトは、リザルトにコインのポイント数を表示する役割を持ちます。


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




 最初に文字数の表示確認のために、Text コンポーネントの Text プロパティ欄に "000000" と入力してください。
この値はゲームのプレイ内容に応じて、スクリプトから動的に入力値を差し替えます。
合わせて、フォントと、フォントのサイズも変更します。Sceneビュー、Gameビューを見ながら、適宜なサイズに調整してください。
文字の位置の設定は、右寄せ・中央がよいでしょう。

 他の Text コンポーネントと同じように、Raycast Target のスイッチを外しておいてください。


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



 文字の設定が完了したら、サイズと位置を調整します。SceneビューやGameビュー画像(インスペクターも)を参考に適宜なサイズと位置に調整してください。
このゲームオブジェクトは lblScore ゲームオブジェクトの右側に表示するようにしますので、画面の中央よりも右側に寄せて、同じ高さで配置してください。


txtScore ゲームオブジェクト Sceneビュー画像



txtScore ゲームオブジェクト SceneビューとGameビュー画像



7.ResultPopUp ゲームオブジェクトの子オブジェクトとして、lblRestart ゲームオブジェクトを作成する

 ResultPopUp ゲームオブジェクトを選択して右クリックをしてメニューを開き、UI => Text を選択します。
ResultPopUp ゲームオブジェクトの子オブジェクトとして Text ゲームオブジェクトが作成されますので、名前を lblRestart に変更します。


ヒエラルキー画像



 この lblRestart ゲームオブジェクトは、リザルト表示内にリスタートを促す文字を表示する役割を持ちます。


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



 Text コンポーネントを選択して、Text プロパティ欄に "Tap to Restart!" と入力してください。この値は動的には変化しませんので、ずっとこの内容が表示されます。
合わせて、フォントと、フォントのサイズも変更します。文字のフォントサイズ大きい場合、ゲームオブジェクトのサイズ自体も大きくないと表示されません。
文字の位置は中央寄せ・中央がいいでしょう。

 また Text コンポーネントにも Raycast Target のチェックがありますので、こちらのチェックを外しておいてください。


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



 文字の設定が完了したら、サイズと位置を調整します。SceneビューやGameビュー画像(インスペクターも)を参考に適宜なサイズと位置に調整してください。
この文字はスクリプトから点滅を行うように制御をします。ユーザーに気づいてもらうためです。


lblRestart ゲームオブジェクト Sceneビュー画像



 以上でリザルト用のゲームオブジェクトの作成は終了です。


3.ResultPopUp スクリプトを作成する


 ResultPopUp ゲームオブジェクトにアタッチするスクリプトを作成します。
変数は4つ宣言して、ResultPopUp ゲームオブジェクト内の各コンポーネントをアサインして、操作できるように紐づけを行います。

ResultPopUp.cs

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



<Button.onClick.AddListenerメソッド ースクリプトからボタンタップ用メソッドの登録ー>


 ButtonコンポーネントにはOnClickというイベントを登録する場所があります。ここにゲームオブジェクトのアサインを行うことで、
アサインしたゲームオブジェクトにアタッチされているスクリプトの、public修飾子で宣言されているメソッドを登録することができます。




 この処理をスクリプトから追加して行う処理が、onClick.AddListenerメソッドです。引数のない場合と引数のある場合で書式が変化します。

 利点は、メソッドをprivate修飾子でも登録できること、スクリプトから登録しているので、Unity内の上記の画像のButton部分への登録作業や、確認をする必要がなくなること、などがあります。

 今回は引数のないメソッドを登録していますので、引数にはそのままメソッド名を記述します。メソッドの()を書くとエラーになるので、メソッド名のみを記述します。

  // ボタンにメソッドを登録
  btnTitle.onClick.AddListener(OnClickRestart);

 詳細については公式のリファレンスを参考にしてください。記事を多くあります。

Unity公式スクリプトリファレンス
Button.on.Click.AddListener
https://docs.unity3d.com/2019.1/Documentation/Scri...


4.ResultPopUp ゲームオブジェクトに ResultPopUp スクリプトをアタッチして設定を行う


 作成した ResultPopUp スクリプトをヒエラルキーにある ResultPopUp ゲームオブジェクトにドラッグアンドドロップしてアタッチします。


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



 ResultPopUp ゲームオブジェクトのインスペクターを確認します。ResultPopUp スクリプトで宣言している4つの変数のアサイン情報が表示されますので、
順番に該当のコンポーネントを持つゲームオブジェクトをドラッグアンドドロップしてアサインします。


 txtScore 変数には、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントをアサインします。
ヒエラルキーにある ResultPopUp ゲームオブジェクトの子オブジェクトである txtScore ゲームオブジェクトをドラッグアンドドロップしてアサインします。
これにより、txtScore ゲームオブジェクトにアタッチされている Text コンポーネントを扱えるようになりました。
 
 canvasGroup 変数には、ResultPopUp ゲームオブジェクトにアタッチされている CanvasGroup コンポーネントをアサインします。
ヒエラルキーにある ResultPopUp ゲームオブジェクトをドラッグアンドドロップしてアサインします。

 このコンポーネントの Alpha プロパティ欄を操作することで背景と文字列を一緒に表示させます。
この処理には DOTween 機能を利用していますので、いきなり表示されるのではなくて、徐々に画面が薄暗くなってリザルトが表示されるように演出しています。

 canvasGroupRestart 変数には、lblRestart ゲームオブジェクトにアタッチされている CanvasGroup コンポーネントをアサインします。
ヒエラルキーにある ResultPopUp ゲームオブジェクトの子オブジェクトである lblRestart ゲームオブジェクトをドラッグアンドドロップしてアサインします。

 btnTitle 変数には、btnTitle ゲームオブジェクトにアタッチされている Button コンポーネントをアサインします。
ヒエラルキーにある ResultPopUp ゲームオブジェクトの子オブジェクトである btnTitle ゲームオブジェクトをドラッグアンドドロップしてアサインします。


<手順動画 アサイン>
https://gyazo.com/9d01c2f317aca587264ba0d948478fc0


ResultPopUp ゲームオブジェクト アサイン後 インスペクター画像



 以上でリザルト表示用のゲームオブジェクトの完成です。


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


 ResultPopUp ゲームオブジェクトが完成しましたので、Prefabs フォルダへドラッグアンドドロップしてプレファブにします。
プレファブになったらヒエラルキーにある ResultPopUp ゲームオブジェクトは削除してください。


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


38.ゲームクリアの際にリザルトを表示する処理と、クリックで最初からリスタートする処理を追加する

設計


 先ほどの手順で作成した ResultPopUp ゲームオブジェクトを、ゴール地点に到着してステージクリアとなった際に、自動的に生成するように処理を設計します。

 ResultPopUp ゲームオブジェクトは Canvas ゲームオブジェクトで扱うゲームオブジェクトですので、他のUI関係の制御と同じように
UIManager スクリプトに生成するための GenerateResultPopUp メソッドを追加し、プレファブを登録する処理を追加します。

 ゴール地点に到着した判定については、GoalChecker スクリプトの OnTriggerEnter2D メソッド内でゴール判定を行うようにしていますので
この処理の中に、UIManager スクリプトの GenerateResultPopUp メソッドの呼び出し命令を追加します。

 GoalChecker スクリプトは UIManager スクリプトの情報を変数で持っていませんので、UIManager スクリプトの変数を扱っている
PlayerController スクリプトを経由して命令を出すようにロジックを組みます。

 ResultPopUp ゲームオブジェクトは全体がボタンになっていますので、このリザルト表示をクリックすると、ゲームを最初からリスタートする処理が行われます。


UIManager スクリプトを修正して、リザルト表示を生成する処理を追加する


 新しくメンバ変数を2つ追加します。
ResultPopUp ゲームオブジェクトのプレファブを登録する変数と、その ResultPopUp ゲームオブジェクトを生成するための位置情報を登録する変数になります。

 ResultPopUp ゲームオブジェクトのクローンの生成を行うメソッドを追加し、GoalChecker スクリプトから命令を受けて、
ResultPopUp ゲームオブジェクトのクローンの生成を行うように処理を追加します。


UIManager.cs

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



<GameObject型以外のインスタンスの方法>

 
 Instantiate メソッドには戻り値があり、クローンの生成を行うとともに、生成を行った型を戻り値として左辺へ戻します。
そのため、GameObject 型でクローンの生成を行うと、GameObject 型が戻り値として戻されます。

 この機能は GameObject 型には限らないため、クローンの生成を行いたいゲームオブジェクトに、自作したスクリプトがアタッチされている場合には
そのスクリプトを使って、クローンの生成を行うとともに、そのスクリプトの型を戻り値として戻すことが出来ます。
この場合、左辺に用意する型もスクリプトの型を用意することで戻り値を受けとることが可能です。


GameObject型でのインスタンス処理
    [SerializeField]
    private GameObject resultPopUpPrefab;


    // ResultPopUp を生成
    GameObject resultPopUpObj = Instantiate(resultPopUpPrefab, canvasTran, false);

    // ResultPopUp スクリプトを取得
    ResultPopUp resultPopUP = resultPopUpObj.GetComponent<ResultPopUp>();

    // ResultPopUp の設定を行う
    resultPopUp.SetUpResultPopUp(score);



自作クラスでのインスタンス処理
    [SerializeField]
    private ResultPopUp resultPopUpPrefab;


    // ResultPopUp を生成
    ResultPopUp resultPopUp = Instantiate(resultPopUpPrefab, canvasTran, false);

    // ResultPopUp の設定を行う
    resultPopUp.SetUpResultPopUp(score);


 違いとしては、プレファブとして登録する際の型や、インスタンス処理の際の左辺に用意する型が異なります。

 そして最も大きな違いは、GetComponentメソッドの処理がないということです。下の自作クラスでインスタンス処理をした場合には
ゲームオブジェクトのクローンを生成する部分は同じですが、戻り値として ResultPopUp スクリプトを受け取っているため、
GetComponent メソッドを実行せずとも、そのスクリプトの情報を自動的に取得出来ています。

 このように GetComponent メソッド処理を省略する処理を書くことで、処理的に重い GetComponent 処理の負荷を減らすことが出来ます。
もしも生成したゲームオブジェクトのクローンに対して、何か処理を行いたいような場合には、GameObject型だけではなく、自作クラスにて生成することも念頭に置いて設計しておきましょう。


UIManager ゲームオブジェクトの UIManager スクリプトを設定する


 UIManager ゲームオブジェクトを選択してインスペクターを確認します。
UIManager スクリプト内に新しく宣言した2つの変数のアサイン情報が表示されますので設定します。


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



 resultPopUp 変数には、ResultPopUp スクリプトがアタッチされているゲームオブジェクトをアサインします。このゲームオブジェクトの情報を元にクローンを生成しますので
Prefabs フォルダにある ResultPopUp ゲームオブジェクトをドラッグアンドドロップしてアサインします。自動的に ResultPopUp スクリプトがアサインされます。

 canvasTran 変数は、ResultPopUp ゲームオブジェクトのクローンを生成する位置情報をアサインします。
ResultPopUpゲームオブジェクトは、Canvas ゲームオブジェクトの子オブジェクトとして作成しましたので
生成する位置も同じように Canvas ゲームオブジェクトの子オブジェクトとして生成を行います。

 ヒエラルキーにある Canvas ゲームオブジェクトをドラッグアンドドロップしてアサインします。自動的に Canvas の Transform コンポーネントがアサインされます。


<手順動画 アサイン>
https://gyazo.com/0d8bac19c51d90d1e28aca0fc5c31a2e


UIManager ゲームオブジェクト アサイン後のインスペクター画像



GoalChecker スクリプトを修正する


 OnTriggerEnter2D メソッド内に処理を追加して、PlayerController スクリプトの情報を取得し、その PlayerController スクリプトが扱える
public 修飾子で宣言している uiManager 変数を利用して、UIManager スクリプトにある GenerateResultPopUp メソッドを実行させます。


GoalChecker.cs

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



<スクリプトを経由して別のスクリプトの処理を実行していく方法>


 スクリプトでは、外部のスクリプトの情報を取得し、変数に代入することで、そのスクリプトへの参照や、メソッドを実行することが出来るようになります。
この処理にはさらに応用が利くようになっています。

 外部のスクリプトを取得した場合、そのスクリプトの扱っている public 修飾子の情報が扱えるので、別のスクリプトの情報をそのまま利用可能になります。


  // PlayerControllerの情報を取得
    PlayerController playerController = col.gameObject.GetComponent<PlayerController>();

    // PlayerControllerの持つ、UIManagerの変数を利用して、GenerateResultPopUpメソッドを呼び出す。引数にはPlayerControllerのcoinCountを渡す
    playerController.uiManager.GenerateResultPopUp(playerController.coinPoint);

 1つ目の処理によって、PlayerController スクリプトの情報を playerController 変数に代入して参照できる状態にしています。
このとき、PlayerController スクリプトの扱っている、Public 修飾子で宣言している UIManagear スクリプトも扱えるようになります。

 その処理が2つ目の処理になります。
PlayerController スクリプトの扱える、UIManager スクリプトに対して命令を出し、UIManager スクリプトの持つ GenerateResultPopUp メソッドを実行することが出来ます。

 今回のように、取得したスクリプトがどのような情報を扱えるのかを把握して設計しておくことで、このように直接 UIManager スクリプトを取得せずとも
間接的に取得している PlayerController スクリプトを通じて、命令を実行することが可能です。設計が重要といわれる所以です。


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


 ゲームを実行して、ゴール地点を通過してみてください。ResultPopUp ゲームオブジェクトが生成されて、画面にリザルトが表示されれば成功です。
また、Score の右側に、実際のプレイヤーのコインのポイント数が表示されるとともに、Tap to Restart の文字が点滅すれば成功です。


<実行動画 ゴール地点を通過してゴール判定が発生するとリザルトが表示される。獲得したコインのポイントも反映される>
https://gyazo.com/5531b43515436c7c7d6af8a270e94350


 画面を左クリック(スマホではタップ)するとリザルト表示が徐々に非表示になっていき、ゲームが最初からスタートします。


<実行動画 リザルト表示中に画面をクリックするとゲームが最初からスタートする>
https://gyazo.com/4160c3185b386f782a47075ecc83951b


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

 次は 手順22 ーリスタート処理の実装ー です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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