３Ｄレールガンシューティング　発展２０

　タイトルシーンにステージ選択機能を追加します。

発展２０ーステージ選択機能ー

＜実行動画①　ゲームを最初に開始した場合　=>　１つだけボタンが生成される＞

動画ファイルへのリンク

＜実行動画②　クリアしたステージがある場合 => クリアしたステージと、次のステージのボタンが生成される＞

設計

　前回の手順でクリアしているステージの情報をステージの番号で管理する機能を追加しました。
この機能を活用することで、この手順では、ゲームの進行に利用するステージ選択の機能を設計して実装します。

大きく分けて、２つの機能が必要になります。

　１．まだステージを１つもクリアしていない状態 => ゲームを開始した際の状態です
　２．１つ以上のステージをクリアしている状態 => ゲーム内でステージを１つ以上クリアしている状態です

　１の機能については、ステージ選択機能として、最初から挑戦するステージについては選択できる状態になっている必要があるためです。
ゲームを開始したら、１番最初のステージは選択できるようにするためです。

　２の機能については、最初のステージをクリアして以降の機能です。この場合、クリアしているステージの他に、次に挑戦するステージを選択できる状態にする必要があります。

　よって、この２つの機能を満たす処理のロジックを考えて、それをプログラムとして組み立てていくことが求められます。

　どのような設計ロジックにすればいいのかを検討してみてください。
なおボタンは最初からゲーム内に設置はしておかないで、選択できるステージの数だけをその都度確認して、必要なものだけを生成をしていくようにします。

Canvas を作成する

　ステージ選択にはボタンの機能を利用します。
そのため、タイトルシーンには新しく Canvas ゲームオブジェクトを配置します。
解像度など、基本的な設定は忘れずに行うようにしてください。

　下記は参考画像です。この通りに製作する必要はありません。
自分のイメージしているタイトルシーンとボタンの表示になるようにレイアウトを検討しましょう。

　ヒエラルキーの空いている場所で右クリックをしてメニューを開き、UI => Canvas で作成します。

　他のゲームオブジェクトの子オブジェクトにならないようにしてください。
一緒に EventSystem ゲームオブジェクトも作成されます。

ヒエラルキー画像

インスペクター画像

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

ボタンの配置位置用のゲームオブジェクトを作成する

　続いて、ボタンの生成位置を設定するためのゲームオブジェクトが必要になります。
設計部分でも説明があったように、ボタンは最初から設置はしておかないで、選択できるステージの数だけ生成をしていくようにします。

　生成するためには生成する位置の情報が必要になりますので、そのためのゲームオブジェクトを作成しておきます。
同時にこのゲームオブジェクトは生成されたボタンの親オブジェクトになるため、ボタンのフォルダ役としても機能します。

　Canvas ゲームオブジェクトの子オブジェクトとして CreateEmpty して作成します。
名前は Content のようにわかりやすい名称にしてください。

　ボタンを等間隔や設定したサイズで並べたい場合には、LayoutGroup コンポーネントを活用することを検討しましょう。
どの種類の LayoutGroup コンポーネントを利用するかも自分で検討してみてください。

　こちらも参考画像です。

ヒエラルキー画像

インスペクター画像

Sceneビュー画像

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

ボタンを作成する

　ボタンの配置位置のゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを作成します。
名称も分かりやすい名前に変更しておきましょう。

　下記の画像は参考例です。ボタンの色やフレームなどは任意のものに設定してください。

ヒエラルキー画像

インスペクター画像

Sceneビュー画像

　子オブジェクトとして Text ゲームオブジェクトもあります。
ここにはステージの名称が表示されます。フォントやサイズなどは任意ですが。表示したい文字の長さを検討して調整を行ってください。
文字が大きすぎたり、表示する幅が狭すぎたりすると、文字は表示されません。

インスペクター画像

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

　ボタンを複製して、複数のボタンが並んだ際にどのようなレイアウトになるかを確認しておいてください。
その後、最初にあったボタン以外の複製した各ボタンは削除しておいてください。

StageButton スクリプトを作成する

　ボタンのゲームオブジェクトにアタッチし、ボタンの制御を行うためのスクリプトを作成します。
ボタンを押した際の処理、画面に表示するステージの名前などの設定を行います。

　また現在は１つのステージにしか遷移しませんが、stageNo 変数を活用することで、指定したステージへの遷移を行う処理を記述できます。
これも自分で考えて書いてみてください。

StageButton.cs

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

using UnityEngine;
using UnityEngine.UI;

public class StageButton : MonoBehaviour {

    [SerializeField]
    private Button btnChoose;

    [SerializeField]
    private Text txtStageName;

    private int stageNo;


    /// <summary>
    /// ボタンの設定
    /// </summary>
    /// <param name="stageNo"></param>
    /// <param name="name"></param>
    public void SetUpStageButton(int stageNo, string name = null) {

        this.stageNo = stageNo;

        btnChoose.onClick.AddListener(() => OnClickStageButton(stageNo));
        txtStageName.text = name == null ? "Stage " + (stageNo + 1) : name;
    }

    /// <summary>
    /// ボタンを押下した際の処理
    /// </summary>
    /// <param name="stageNo"></param>
    private void OnClickStageButton(int stageNo) {
        GameData.instance.chooseStageNo = stageNo;

        // TODO この部分でステージを分岐させます
        TransitionManager.instance.FadeNextScene(1.0f, SceneName.MainGame);
    }
}

　スクリプトを作成したらセーブします。

ボタンのゲームオブジェクトに StageButton スクリプトをアタッチして設定を行い、プレファブにする

　ボタンに StageButton スクリプトをアタッチして、インスペクターから必要な情報をアサインしてください。

インスペクター画像

　以上で設定は完了です。
設定が完了したら、プレファブにして、ヒエラルキーからは削除 しておいてください。

Title スクリプトを修正する

　ゲームの実行に合わせて、クリアしているステージの情報を元に、ステージ選択用のボタンの生成を行う機能を追加します。

　ボタンの生成にはボタンのプレファブを利用し、そのボタンのプレファブにアタッチされている StageButton スクリプトにステージの番号などを設定して利用します。
このようにすることで、１つのプレファブを異なるボタンとして機能させることが出来るようになります。

　何回か学習している手法ですので、どのような変数や処理があれば、該当するボタンを生成することができるのかを考えてみてください。
また生成する際には、位置の情報も必要になります。全体像をイメージしてから、最初から最後までの処理の流れを考えていくといいでしょう。

Title.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Title : MonoBehaviour {

    ////*　新しい変数の宣言を４つ追加  *////


    [SerializeField]
    private StageButton stageButtonPrefab;

    [SerializeField]
    private Transform stageButtonTran;

    [SerializeField]
    private List<StageButton> stageButtonList = new List<StageButton>();

    [SerializeField]
    private int[] debugStageNos;


    ////*  ここまで  *////


    void Start() {
        SoundManager.instance.PlayBGM(SoundDataSO.BgmType.Title);


        ////*  処理を追加します  *////


        // デバッグ用。クリアしたステージ番号の登録
        if (debugStageNos.Length > 0) {
            for (int i = 0; i < debugStageNos.Length; i++) {
                GameData.instance.AddClearStageNoList(debugStageNos[i]);
            }
        }

        // ステージボタンの作成
        GenerateStageButtons();


        ////*  ここまで  *////


    }

    void Update() {


        ////*  ボタンを押した際にシーン遷移するようにするので、この処理は不要になります  *////


        //if(Input.GetMouseButtonDown(0)){
        //    TransitionManager.instance.FadeNextScene(1.0f, SceneName.Main);   //  <=  シーン遷移したい列挙子を選択します
        //}


        ////*  ここまで  *////


    }


    ////*  新しいメソッドを１つ追加します  *////


    /// <summary>
    /// クリアしているステージと次のステージの分のステージ選択ボタンの作成
    /// </summary>
    private void GenerateStageButtons() {

        // １ステージ
        StageButton stageButton = Instantiate(stageButtonPrefab, stageButtonTran, false);
        stageButton.SetUpStageButton(0);
        stageButtonList.Add(stageButton);

        // 2ステージ以降
        for (int i = 0; i < GameData.instance.clearStageNoList.Count; i++) {
            stageButton = Instantiate(stageButtonPrefab, stageButtonTran, false);
            stageButton.SetUpStageButton(GameData.instance.clearStageNoList[i] + 1);
            stageButtonList.Add(stageButton);
        }
    }


    ////*  ここまで  *////


}

　スクリプトを修正したらセーブします。

＜処理を読み解く＞

　Title スクリプトに記述した処理はどのような内容になっていますか？
しっかりと処理を読みなおして、どのような処理によってボタンが生成されるのか、
なぜ、クリアしたステージの情報を使うことで、次のステージの情報の設定されたボタンが生成されるのか、
常に、なぜなのか？　という疑問を持って処理の内容を読み解くようにしてください。

　そして処理の内容を日本語にしてコメントを記述してください。
処理が読み解けていればコメントを書くことが出来ます。

Title ゲームオブジェクトの設定を行う

　Title スクリプトに新しい変数を追加しているので、そちらに必要な情報をアサインしてください。

インスペクター画像

　以上で設定は完了です。

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

タイトルシーンに必要なゲームオブジェクトがあるかを確認してください。
例えば、GameData ゲームオブジェクトがないと、ステージの情報が取得出来ませんので、メインシーンでプレファブにしてこちらのヒエラルキーにも配置してください。
BGM を鳴らしているのであれば、SoundManager ゲームオブジェクトも必要です。

ヒエラルキー画像(参考です。ここには SoundManager ゲームオブジェクトはありませんが、自分のプロジェクトに合わせてください)

　ゲームを実行する前に、どのような処理が実行されて、どういった部分の制御を確認すればいいのかをしっかりと認識しておきます。
その上でゲームを実行してデバッグを行ってください。

　Title スクリプトにはデバッグ用の処理が記述されていますので、クリアしたステージの番号を自由に設定できます。
この機能も活用して、最初にゲームを実行した際に表示されるボタンと、クリアしたステージの番号と次のステージの番号のボタンが表示される機能と
両方の部分のチェックを行ってください。

＜実行動画①　ゲームを最初に開始した場合　=>　１つだけボタンが生成される＞

動画ファイルへのリンク

＜実行動画②　クリアしたステージがある場合 => クリアしたステージと、次のステージのボタンが生成される＞

動画ファイルへのリンク

　これからゲームを作っていく際には、これらのチェックポイントや正誤の判定はすべて製作者に委ねられます。
教材がある間はよいですが、自分のオリジナルのゲームにはこういったチェックする内容はすべて自分で考える必要がありますので
今から物事を考える癖をつけるようにしていってください。

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

　次は　発展２１　ーセーブ・ロード機能の実装①－　です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

３Ｄレールガンシューティング　発展２０ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school