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

　ステージデータを活用し、経路の移動が完了した際に、分岐があるか判定をおこない、分岐がある場合には画面上に選択肢を表示し、
選択した内容の経路へ分岐させる機能の処理を作成します。

発展５ー経路分岐用ポップアップウインドウの作成ー

　２回の手順に分けて実装を行います。
まずは、分岐の処理の前に、分岐が発生した際に画面に表示する選択肢用のボタンとその配置位置の準備から行います。

　今後自分で処理を作成していく際にも、まずは実装したい処理の全体を俯瞰的に考えて、その事前の準備として必要なものはなにかを精査し、
１つずつ順番に作成していくことをイメージしてください。

Canvas 内にボタンを配置するためのゲームオブジェクトを作成する

　分岐用のボタンを３つ配置できるように、Canvas 内にゲームオブジェクトを配置します。

　完成した際のゲームオブジェクトの構成です。
分岐方向は、右・左・前方(真っすぐ正面)の３つです。

ヒエラルキー画像

RootBranchSet ゲームオブジェクトを作成する

　分岐用のボタンを配置するためのゲームオブジェクトを管理するフォルダ役のゲームオブジェクトです。

インスペクター画像

Sceneビュー画像

RightBranchTran ゲームオブジェクト

　分岐用のボタンのうち、右方向の分岐のボタンを表示する位置の設定を行うゲームオブジェクトです。
この位置に分岐用ボタンを生成します。Rotation の値に注意してください。

　これは、分岐方向を示す矢印の画像を回転させるために設定しています。
矢印の画像は、初期設定で上方向を向いていることを想定して Rotation の値を設定していますので、
矢印の画像により、Rotation の値は適宜調整を行ってください。

インスペクター画像

Sceneビュー画像

LeftBranchTran ゲームオブジェクト

　こちらは左方向への分岐のボタンを配置するためのゲームオブジェクトです。
Rotation の値については、先ほどの説明と同じです。画像に応じて適宜調整してください。

インスペクター画像

Sceneビュー画像

CenterBranchTran ゲームオブジェクト

　正面方向への分岐ボタンを配置するためのゲームオブジェクトです。
Rotation の値については、矢印の画像が上方向を初期向きとして想定しているため、このゲームオブジェクトでは設定していません。

インスペクター画像

Sceneビュー画像

分岐用ボタンの作成

RightBranchTran ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを作成する

　分岐用のボタンのゲームオブジェクトを１つ作成し、完成したらプレファブにします。
RightBranchTran ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを作成してください。
名前は btnSubmitBranch に変更してください。

　３つの分岐のボタンを作成するのではなく、１つの分岐のボタンを３つの分岐ボタンとして活用する手法で設計します。
分岐ボタンを生成後、どの分岐位置に配置するかによって、矢印の画像を回転させて、分岐方向の情報をそれぞれ異なる情報として管理させます。

　ゲームオブジェクトのサイズについては、適宜調整してください。
矢印の画像についても、無料イラストなどを Unity へインポートして利用してください。
ここでは、上方向の矢印の画像を１つだけ用意し、Image コンポーネントの SourceIamge の項目にアサインしてください。
この画像を配置する位置に応じて回転させて利用しています。

ヒエラルキー画像　

インスペクター画像(この画像では矢印の画像はセットされていません)

Sceneビュー画像

矢印の画像例

　プレファブにしたら、ヒエラルキーから分岐ボタンは削除してください。

SubmitBranchButton スクリプトを作成する

　分岐用のボタンにアタッチし、ボタンの制御や、分岐方向の情報を管理させる機能を持つスクリプトを作成します。

SubmitBranchButton.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class SubmitBranchButton : MonoBehaviour {

    [SerializeField]
    private Button btnSubmit;

    private BranchDirectionType branchDirectionType;

    private UIManager uiManager;


    /// <summary>
    /// 分岐ボタンの設定
    /// </summary>
    /// <param name="branchDirectionType"></param>
    /// <param name="uiManager"></param>
    public void SetUpSubmitBranchButton(BranchDirectionType branchDirectionType, UIManager uiManager) {
        this.branchDirectionType = branchDirectionType;
        this.uiManager = uiManager;

        btnSubmit.onClick.AddListener(OnClickSubmitBranch);
    }

    /// <summary>
    /// 分岐ボタンをタップした際の処理
    /// </summary>
    private void OnClickSubmitBranch() {
        // アニメ演出
        transform.DOPunchScale(Vector3.one * 0.3f, 0.25f).SetEase(Ease.InQuart);

        // 分岐の種類を決定
        uiManager.SubmitBranch(branchDirectionType);
    }

    /// <summary>
    /// 分岐ボタンを非活性化
    /// </summary>
    public void InactivateSubmitButton() {
        btnSubmit.interactable = false;
    }
}

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

　各メソッドや変数が、どういった役割を持って用意されているかをしっかりと理解してから進めてください。

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

　プレファブにした分岐用のボタンに SubmitBranchButton スクリプトをアタッチして、インスペクターから各変数へのアサイン設定をおこなってください。

　Button コンポーネントのアサインを行う必要がありますので、btnSubmitBranch ゲームオブジェクト自体か、
btnSubmitBranch ゲームオブジェクトにアタッチされている Button コンポーネントをドラッグアンドドロップしてアサインしてください。
自動的に Button コンポーネントの情報が登録されます。

インスペクター画像(この画像では矢印の画像はセットされていません)

　以上で移動先の分岐の処理に必要なゲームオブジェクトの作成が完了しました。
次の手順では、スクリプトの修正を行い、分岐の機能を実装します。

　=>　次は　発展６　ー経路分岐機能ー　です。

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

印刷する

コメント（0）

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

コメントをかく

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

i-school