テキストアドベンチャー　手順９

　以下の内容で順番に実装していきます。

２５．メッセージ表示用のスクリプトを作成する⑦（パラグラフの最後のメッセージが表示されたときに分岐の選択肢用のボタンを生成する分岐を作り、【２４】の生成処理に紐づける）
２６．メッセージ表示用のスクリプトを作成する⑧（シナリオデータに合わせてキャラの立ち絵と背景を制御する）

２５．メッセージ表示用のスクリプトを作成する⑦（パラグラフの最後のメッセージが表示されたときに分岐の選択肢用のボタンを生成する分岐を作り、【２４】の生成処理に紐づける）

　パラグラフの最後のメッセージが表示されたときに分岐の選択肢用のボタンを生成する処理を追加します。
この処理を追加することで、【２４】でデバッグして確認しているGameDirectorクラスの選択肢ボタン生成処理と、TextMessageViewerクラスの分岐発生の処理とを紐づけていきます。

TextMessageViewerスクリプトのNextTouchメソッドを修正して、分岐発生の処理を追加する

TextMessageViewer.cs

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

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

public class TextMessageViewer : MonoBehaviour {

    （宣言フィールド　省略）

    public GameDirector gameDirector;                         // <= 宣言フィールドの最後の部分に追加(☆)

　　（Startメソッド～CompleteOneMessageメソッドは修正箇所なしのため、中略）

    /// <summary>
    /// タップするまで全文を表示したまま待機（修正する）
    /// </summary>
    /// <returns></returns>
    private IEnumerator NextTouch() {
        // タップを待つ
        yield return new WaitUntil(() => isTapped);

　　　　// タップを促すイメージを非表示
        tapIconObj.SetActive(false);

        // 次のメッセージ準備
        messagesIndex++;
        wordCount = 0;

        // リストに未表示のメッセージが残っている場合
        if (messagesIndex < messages.Length) {
            // １文字ずつ文字を表示する処理をスタート
            StartCoroutine(DisplayMessage());
        } else {
            // 全メッセージ表示終了
            isDisplayedAllMessage = true;

            Debug.Log("全メッセージ 表示終了");
　　　　
            // シナリオデータに設定されている分岐の数だけ、分岐選択肢ボタンを作成
            StartCoroutine(gameDirector.CreateBranchSelectButton(branchs.Length));  // <= 追加（☆）
            }
        }
    }
}

　修正が完了したら、ヒエラルキーからTextMessageViewerゲームオブジェクトを選択し、インスペクターを確認します。
GameDirectorクラスのアサインが出来る場所が追加されていますので、こちらにヒエラルキー上にあるGameDirectorゲームオブジェクトをドラッグアンドドロップしてアサインします。
　これで１つのシナリオデータ内（パラグラフ内）のすべてのメッセージが表示されたあとにタップすると、画面に先ほどデバッグで確認した分岐用の選択肢ボタンが
シナリオデータに登録されている分岐の数だけ生成されるようになります。

GameDirectorスクリプトのStartメソッドを修正する

　これで選択肢ボタンの生成をデバッグする必要がなくなりましたので、GameDirectorスクリプトを開いて、Startメソッドを修正しましょう。

GameDirector.cs

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

void Start(){
        // シナリオの初期値
        currentSenarioNo = 0;

        // 最初のSenarioを読み込んでゲームスタート
        ProcSenarioData(currentSenarioNo);                 // <= コメントアウトを解除して、シナリオデータを再生する

        // 分岐選択肢ボタン生成用のDebug処理
        //StartCoroutine(CreateBranchSelectButton(3));  // <= コメントアウトする
    }

　修正が終わったらゲームを実行します。
　
　デバッグ前と同じようにシナリオデータのメッセージが再生されていき、最後のメッセージが終わってタップをした際に、
シナリオデータに登録されている分岐の数だけ選択肢ボタンが表示されるか確認しましょう。
またその選択肢ボタンを押した際にも、タップされた選択肢ボタンとタップされなかった選択肢ボタンの挙動がデバッグの際と同じ挙動かどうかを確認します。

　タップ後、次のシナリオデータのメッセージが再生され始めれば処理は成功です。無事にGameDirectorクラスの処理とTextMessageViewerクラスの処理とが紐づきました。

２６．メッセージ表示用のスクリプトを作成する⑧（シナリオデータに合わせてキャラの立ち絵と背景を制御する）

　Excelのシナリオデータには、まだゲーム内に反映されていない情報があります。
１つはキャラの立ち絵イメージです。これはメッセージの再生に合わせて制御を行います。例えば、会話をしているキャラは画面に表示されていることがほとんどだと思いますが
そのキャラの前に会話していたキャラがいたのであれば、二人分のキャラを画面に表示させておいた方が話の流れとしてはスムースでしょう。

　もう１つは背景のイメージです。こちらはパラグラフ単位でシナリオデータが進むことを考えると、各シナリオデータで１つの背景イメージを設定すれば問題なさそうです。

　これらの情報はすでにシナリオデータには含まれていますので、TextMessageViewerスクリプトを修正して以下の処理を追加します。

　　１．パラグラフが始まる（新しいシナリオデータが再生される）際に背景イメージを変更する処理を追加する。
　　２．メッセージの再生に合わせてキャラの立ち絵イメージを制御する処理を追加する。

１．背景イメージを用意する

　シナリオデータには背景イメージを変更する際の情報として、イメージの通し番号を設定しています。
そのため、ゲーム内で使用するために用意した背景イメージは、同じ書式でファイル名を設定しておく必要があります。
このファイルをResourcesフォルダ内に配置し、それをゲーム内で読み込む処理を行うことで動的に背景イメージを差し替えて変更を行います。

　Resourcesフォルダ内にBackGroundフォルダを作成しましょう。その中に背景イメージを配置し、ファイル名は半角数字に変更します。
この数字とシナリオデータの背景イメージ用の数字とを合致させて背景イメージを読み込みます。下記の画像のような状態にしてください。

２．キャラの立ち絵イメージを用意する

　こちらはResourcesを使って動的に変更する方法ではなく、Canvas内にキャラの立ち絵イメージを設定して用意おき、そちらを表示/非表示を切り替える形で設計します。
もしも動的に立ち絵イメージを変更したい場合には、差し替えたいゲームオブジェクトにクラスを持たせることで対応できます。(今回はそちらの方法では実装しません。)

　まずはフォルダ代わりとなる空のゲームオブジェクトを１つ、Canvas内に作成をします。名前をCharaTranに変更しましょう。
Positionについては、立ち絵イメージの位置を全体的に制御するようになりますので、まずは(0, -100, 0)の位置にしておいて、適宜調整をしてください。

　なお、このCharaTranゲームオブジェクトの位置は、BranchSelectButtonTranゲームオブジェクトよりも優先順位を低い位置に設定します。
そうしないと選択肢が表示された際に、キャラの立ち絵の方が選択肢よりも手前に表示され、選択肢を隠してしまいます。(後述のヒエラルキーの画像を参考にしてください)

　CharaTranゲームオブジェクトのインスペクターを確認し、一番下にあるAdd Componentを選択してGirdLayoutGroupをアッドします。
このコンポーネントは縦方向、あるいは横方向のいずれか指定した方向に対して、子オブジェクトの大きさとスペースを制御して並べる機能を持っています。

　画像をみながら設定を行ってください。

　Cell Sizeは、このCharaTranゲームオブジェクトの子オブジェクト(１キャラ分)のWidthとHeightになります。適宜調整してください。

　Spacingに値を設定することで、子オブジェクトがくっつかないように間隔を空けて配置してくれます。
　
　Constrait Countが1行に並べる際の最大値です。今回は横方向に、最大で３キャラ分並べる予定ですので、こちらを3に変更します。
ここでは３キャラ分を想定していますが、もっと人数が増えるのであればこのConstrait Countを変更してください。

３．DisplayCharaスクリプトを作成する

　続いて、キャラの立ち絵用のゲームオブジェクトを作成していきます。
まずは始めに、以下のスクリプトを作成します。こちらは現在ゲーム中にキャラが表示されているか、いないかを判断させるためのスクリプトです。

DisplayChara.cs

using UnityEngine;

public class DisplayChara : MonoBehaviour
{
    public CHARA_NAME_TYPE charaNameType;
}

４．DisplayCharaスクリプトを各 imgChara ゲームオブジェクトにアタッチする

　スクリプトの作成が終了しましたら、CharaTranゲームオブジェクトの子ゲームオブジェクトとしてImageゲームオブジェクトを追加します。
CharaTranゲームオブジェクトの上でメニューを表示し、UI => Image を選択します。名前はimgChara_0とします。また名前の左横にあるActiveスイッチをオフにして、非表示状態に設定します。

　こちらに先ほど作成したDisplayCharaスクリプトをアタッチします。キャラの名前をプルダウンメニューから設定できますので、Enumの0番目のキャラから順番に設定していきます。
　
　このimgChara_0を２つ複製してください。名前は最後の末尾の数字を1つずつ加算した値に変更してください。
完成すると、次のようなヒエラルキーと、各imgCharaになります。
　
ヒエラルキー(表示の優先順位があるので位置に注意！)

imgChara_0

imgChara_1

imgChara_2

　以上で背景イメージと立ち絵イメージの準備は完成です。

５．TextMessageViewerスクリプトを修正する

　それではここで、TextMessageViewerスクリプトを開いて修正していきます。こちらが最後の修正になりますので、長くなりますが全文を記載しておきます。

TextMessageViewer.cs

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

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

public class TextMessageViewer : MonoBehaviour
{
    public string[] messages;　　                            // 表示するメッセージの配列
    public CHARA_NAME_TYPE[] charaTypes;
    public int[] branchs;
    public Dictionary<int, CHARA_NAME_TYPE[]> displayCharas; // <= 追加(☆) シナリオデータに用意されている立ち絵の情報を代入

    public float wordSpeed;                                  // 1文字当たりの表示速度
    
    public Text txtMessage;                                  // メッセージ表示用
    public Text txtCharaType;
    public Image imgBackground;                              // <= 追加(☆)。背景制御
    public List<DisplayChara> displayCharasList;             // <= 追加(☆)。立ち絵制御。ImageだとEnebledを切っても位置が変わらないのでクラスをリストにする。インスペクターで設定する
    public Transform charaTran;

    public GameObject iconNextTap;             　            // タップを促す画像表示
    public GameDirector gameDirector;

    private int messagesIndex = 0;                           // 表示するメッセージの配列番号
    private int wordCount;                                   // １メッセージ当たりの文字の総数
    private bool isTapped = false;                      　   // 全文表示後にタップを待つフラグ
    private bool isDisplayedAllMessage = false;              // 全メッセージ表示完了のフラグ

    private IEnumerator waitCoroutine;                       // 全文表示までの待機時間メソッド代入用。Stopできるようにしておく
    private Tween tween;                                     // DoTween再生用。Killできるように代入して使用する

    void Start() {
        // タップアイコンを非表示にする　　　　
        tapIconObj.SetActive(false); 

        // Debug １文字ずつ文字を表示する処理をスタート
        //StartCoroutine(DisplayMessage());
    }

    /// <summary>
    /// シナリオのメッセージや分岐などを設定
    /// </summary>
    /// <param name="senarioData"></param>
    public void SetUpSenarioData(SenarioMasterData.SenarioData senarioData) {
        // シナリオの各データを準備
        messages = new string[senarioData.messages.Length];
        messages = senarioData.messages;

        charaTypes = new CHARA_NAME_TYPE[senarioData.charaTypes.Length];
        charaTypes = senarioData.charaTypes;

        branchs = new int[senarioData.branchs.Length];
        branchs = senarioData.branchs;

        displayCharas = new Dictionary<int, CHARA_NAME_TYPE[]>(senarioData.displayCharas);  　　　　　 // <= 追加(☆)

        // 初期化
        messagesIndex = 0;
        isDisplayedAllMessage = false;

        // シナリオの背景を設定
        imgBackground.sprite = Resources.Load<Sprite>("BackGround/" + senarioData.backgroundImageNo);　// <= 追加(☆)

        // 1文字ずつメッセージ表示を開始
        StartCoroutine(DisplayMessage());
    }
 
    void Update() {
        if (isDisplayedAllMessage) {
            // 全てのメッセージ表示が終了していたら処理を行わない
            return;
        }

        if (Input.GetMouseButtonDown(0) && wordCount == messages[messagesIndex].Length) {
            // 全文表示中にタップしたら全文表示を終了
            isTapped = true;
        }

        if (Input.GetMouseButtonDown(0) && tween != null) {
            // 文字送り中にタップした場合、文字送りを停止
            tween.Kill();
            tween = null;

            // 文字送りのための待機時間も停止
            if (waitCoroutine != null) {
                StopCoroutine(waitCoroutine);
                waitCoroutine = null;
            }

            // 全文をまとめて表示
            txtMessage.text = messages[messagesIndex];
            
            Debug.Log("文字送りスキップ 1ページまとめて 表示");

            // メッセージ表示完了処理
            CompleteOneMessage();

            // タップするまで全文を表示したまま待機
            StartCoroutine(NextTouch());
        }
    }

    /// <summary>
    /// １文字ずつ文字を表示
    /// </summary>
    /// <returns></returns>
    private IEnumerator DisplayMessage() {
        isTapped = false;
        
        // 表示テキストとTweenをリセット
        txtMessage.text = "";
        txtCharaType.text = "";
        tween = null;
        
        // 文字送りの待機時間を初期化
        if (waitCoroutine != null) {
            StopCoroutine(waitCoroutine);
            waitCoroutine = null;
        }

        // メッセージ表示中のキャラ名表示
        if (charaTypes[messagesIndex] != CHARA_NAME_TYPE.NO_NAME) {
            // NoNameの場合だけキャラ名表示
            txtCharaType.text = charaTypes[messagesIndex].ToString();
        }

///* ここから追加 *///

        // 立ち絵表示するキャラを設定（メッセージ表示中のキャラだけはない）
        foreach (DisplayChara chara in displayCharasList) {
            chara.gameObject.SetActive(false);
            // 表示させるキャラの確認
            foreach (KeyValuePair<int, CHARA_NAME_TYPE[]> item in displayCharas) {
                // 何番目のメッセージか確認
                if (item.Key == messagesIndex) {
                    for (int i = 0; i < item.Value.Length; i++) {
                        // 該当するキャラか確認
                        if (item.Value[i] == chara.charaNameType) {
                            // 表示させる設定なら表示
                            chara.gameObject.SetActive(true);
                        } 
                    }
                }
            }
        }

///* ここまで追加 *///
        
        // 1文字ずつの文字送り表示が終了するまでループ
        while (messages[messagesIndex].Length > wordCount) {
            // wordSpeed秒ごとに、文字を1文字ずつ表示。SetEase(Ease.Linear)をセットすることで一定の表示間隔で表示
            tween = txtMessage.DOText(messages[messagesIndex], messages[messagesIndex].Length * wordSpeed).
                SetEase(Ease.Linear).OnComplete(() => {
                    Debug.Log("文字送りで 全文表示 完了");

                    // (TODO) 他にも処理があれば追加する

                    // メッセージ表示完了処理
                    CompleteOneMessage();
                });
            // 文字送り表示が終了するまでの待機時間を設定して待機を実行
            waitCoroutine = WaitTime();
            yield return StartCoroutine(waitCoroutine);
        }
    }

    /// <summary>
    /// 全文表示までの待機時間(文字数×1文字当たりの表示時間)
    /// タップして全文をまとめて表示した場合にはこの待機時間を停止
    /// </summary>
    /// <returns></returns>
    private IEnumerator WaitTime() {
        yield return new WaitForSeconds(messages[messagesIndex].Length * wordSpeed);
    }

    /// <summary>
    /// １つ分のメッセージ表示完了処理
    /// </summary>
    private void CompleteOneMessage() {
        // 表示した文字の総数を更新
        wordCount = messages[messagesIndex].Length;

        // タップを促すイメージ表示
        iconNextTap.SetActive(true);
    }

    /// <summary>
    /// タップするまで全文を表示したまま待機
    /// </summary>
    /// <returns></returns>
    private IEnumerator NextTouch() {
        // タップを待つ
        yield return new WaitUntil(() => isTapped);

        iconNextTap.SetActive(false);

        // 次のメッセージ準備
        messagesIndex++;
        wordCount = 0;

        // リストに未表示のメッセージが残っている場合
        if (messagesIndex < messages.Length) {
            // １文字ずつ文字を表示する処理をスタート
            StartCoroutine(DisplayMessage());
        } else {
            // 全メッセージ表示終了
            isDisplayedAllMessage = true;
　　　　　　Debug.Log("全メッセージ 表示終了");

///* ここから修正 *///

            // エンディングか確認
            if (JudgeEnding()) {
                // エンディングの場合の処理

                // 立ち絵キャラを非表示にする
                for (int i = 0; i < displayCharasList.Count; i++) {
                    displayCharasList[i].gameObject.SetActive(false);
                }

            } else {
                // 分岐ボタンの作成
                StartCoroutine(gameDirector.CreateBranchSelectButton(branchs.Length));
            }
        }

///* ここまで修正 *///

    }

///* ここから追加 *///

    private bool JudgeEnding() {
        // エンディングの条件によって分岐

        // Trueならエンディング

        return false;
    }

///* ここまで追加 *///

}

　ゲームを実行してみましょう。まずは背景イメージが変更になるか確認します。その後、表示されるメッセージに合わせてキャラの立ち絵イメージが表示されたり、非表示になったりして
シナリオデータの設定の通りに制御されているかを確認します。

　これでテキストゲームの基本的なシステムの実装は終了です。おつかれさまでした。
　
　今後は演出や音楽、エンディングへの分岐など、ゲーム全体を見直しながら追加していく要素を実装していきます。

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

印刷する

コメント（0）

カテゴリ：
進学/スクール
総合

テキストアドベンチャー　手順９ - i-school 先頭へ

コメントをかく

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

i-school