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

　この手順ではタイトルシーンからアルバム機能を持つアルバムシーンへの遷移と、アルバムシーンの実装を行います。
手順が多いので２つの工程に分けて実装していきます。

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

３６．シナリオの内容に合わせてCG画像を表示する機能と、表示したCGの番号をセーブする機能を追加する

実装する概要

　シナリオの内容に合わせて、背景画像をCGか、あるいは普通の背景画像にするかを自動で切り替える制御処理を追加します。
またCGが表示された場合には、メッセージの最後まで再生終了後にCGの番号をセーブして回収状態として登録します。
次回のゲームスタート時にこの情報を取得して、次の手順で作成するアルバムシーンで活用します。

＜実装動画＞
ゲーム中にCG画像が表示されるか確認。表示されたシナリオをすべて再生すると回収済CGとしてセーブされる
https://gyazo.com/b60f6027a335c0ac0887e7f0b5d2bad4

ゲーム中に回収後、ゲームを再度スタートした際にタイトルシーンで回収済みのCGの番号を取得(GameData の getCGNos の値が自動で代入される)
https://gyazo.com/cb4df400ebbac82d0ade1088147f8cc0

設計

　Resources フォルダにCG用のフォルダを作成し、背景画像と同様に、シナリオのデータに合わせて動的に画像を差し替える処理を行います。
シナリオデータがCG画像の指定であればCGを読み込んで表示し、背景の場合には今までと同じように背景用の画像を読み込んで表示します。

　この制御はシナリオデータを読み込んで自動的に制御を行うようにロジックを組みます。
画像の番号によって分岐し、CGの番号か、背景の番号かで画像の読み込むフォルダを分けるようにします。

　CG用の画像ですが、ゲーム画面では背景画像と同列に扱います。そのためExcelデータ上は、100 からスタートするように設定してください。
100以上の値を持つ画像の番号をCG、それ以下の値を持つ画像の番号を背景、と制御するようにします。

　CGを表示した場合、そのシナリオ内のメッセージがすべて再生されたときに、GameData スクリプトに新しく作成するセーブ用のメソッドを呼び出して、CGの番号をセーブします。
この値をゲーム再開時のタイトルシーンで読み込んで、回収済のCGの番号を取得するように設計します。この値を参照してアルバムシーンではCGのサムネイル画像を表示させます。

実装手順

　以下の手順で実装を行います。

　１．CG画像をUnityにインポートしてロードできる準備をする
　２．GameData スクリプトを修正し、アルバム機能にかかわる処理を追加する
　３．TextMessageViewew スクリプトを修正して、CG画像の読み込み処理と、アルバム機能にかかわる処理を追加する
　４．Title シーンと Title スクリプトを修正して、アルバム機能にかかわる処理を追加する
　５．ゲームを実行して動作を確認する

１．CG画像をUnityにインポートしてロードできる準備をする

　CGとして使用する画像をUnityにインポートしてゲーム内で利用するための準備を行います。

　Resources フォルダの中に CG フォルダを作成します。その中にCG用の画像を配置します。

　配置した画像ファイルは "cg_"で始まるファイル名に、通し番号をつけて名前をつけてください。
Resources フォルダのロード機能を利用してゲーム中にCG画像をロードして読み込んで利用する際に、このファイル名を指定しますので
異なる名前になっているとロードが成功せずに、画像が表示されません。画像のファイル番号は 0 からスタートし、連番で用意してください。

　また未回収時の画像について、小文字で "frame" というファイル名にして登録をしてください。
CG画像を回収していない場合には、そのファイル名を利用して未回収用の画像を呼び出しますので、名前の指定が違うと白い画像(画像未設定時のもの)になります。

Resourcesフォルダのファイル設定画像

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

２．GameDataスクリプトを修正し、アルバム機能にかかわる処理を追加する

　アルバム機能にかかわる処理を実装するために必要となる変数を３つ追加します。

　１つ目はロードしたCGの番号を代入する List<int> 型の getCGNos 変数です。ゲーム実行時に、ここに回収済のCGの番号をロードして代入します。

　２つ目は回収したCGの番号のセーブ・ロードに使用する string 型の GET_CG_NO 変数です。固定値を入力するため、変数を分かりやすく大文字にしています。
この文字列にCGの番号を付与して、セーブする際のID(Key)にします。そしてこの変数を利用してセーブデータの確認をし、ロードを行います。

　３つ目はゲームに登場するCGの総数を設定する、 int 型の cgTotalCount 変数です。インスペクターより、実際にゲームに登場するCGの総数を登録します。
　

　回収したCGの番号のセーブ・ロード用にメソッドを２つ追加しています。

GameData.cs

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

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

public class GameData : MonoBehaviour
{

    // 今までの宣言フィールドは変更なし。以下の３つの変数を宣言フィールドに追加する

　　public List<int> getCGNos = new List<int>();    // 獲得したCGの番号のリスト。-100して作成する

    private string GET_CG_NO = "getCGNo_";          // CG回収データのセーブとロード用の key

    [Header("CGの総数")]
    public int cgTotalCount;


    void Awake() {
        // 変更なしのため省略
    }


    private void CreateScenarioDataList() {
        // 変更なしのため省略
    }


    public void SaveEndingData(int endingNo) {
        // 変更なしのため省略
    }    


    public bool LoadCheckEndingData() {
        // 変更なしのため省略
    }


    public void SaveReadBranchNo(int branchNo) {
        // 変更なしのため省略
    }


    public void LoadReadBranchNos() {
        // 変更なしのため省略
    }

    public void Save(int currentBranchNo) {
        // 変更なしのため省略
    }

    public Dictionary<int, string> GetSaveDatas() {
        // 変更なしのため省略
        }
    }


////* メソッドを２つ追加する。ここから追加 *////


    /// <summary>
    /// 回収したCGの番号を保存
    /// </summary>
    /// <param name="backGroundImageNo"></param>
    public void SaveGetCGNo(int backGroundImageNo) {
        // CGの番号を設定
        int cgNo = backGroundImageNo - 100;

        // KeyとCG番号をセットしてセーブの準備
        PlayerPrefs.SetInt(GET_CG_NO + cgNo, cgNo);

        // セーブ
        PlayerPrefs.Save();

        Debug.Log("CG回収 : " + GET_CG_NO + cgNo);
    }

    /// <summary>
    /// 回収しているCGの番号を保存データと照合してロード
    /// </summary>
    public void LoadGetCGNos() {

        // 登録されているCGの数だけ確認する
        for (int i = 0; i < cgTotalCount; i++) {

            // CGの通し番号とセーブされているCGの番号を照合
            if (PlayerPrefs.HasKey(GET_CG_NO + i)) {

                // セーブされている番号があったらListに追加
                getCGNos.Add(i);

                Debug.Log("回収済CG : " + GET_CG_NO + i);
            }
        }

        Debug.Log("回収済みCG : " + getCGNos.Count + " / " + cgTotalCount);
    }

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

}

GameDataゲームオブジェクトを確認する

　新しく追加した cgTotalCount 変数が 0 で表示されています。これはゲーム内に用意するCGの総数です。今回は 15 に設定をします。

　もう１つ新しく追加した getCGNos 変数は List ですので、Size 0 になっています。この部分はそのままで問題ありません。
CGを回収したデータをロードした場合に、ここにCGの番号が代入されて、そのデータをアルバムシーンにて参照する設計にしています。
なおデバッグしやすいように public 修飾子を利用してインスペクターに表示していますので、ここに回収したCGの番号を登録することでデバッグが可能です。
　

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

　以上で完了です。

３．TextMessageViewew スクリプトを修正して、CG画像の読み込み処理と、アルバム機能にかかわる処理を追加する

設計

　SetUpScenarioDataメソッドの中に、シナリオに応じて背景画像を読み込むのか、あるいはCG画像を読み込むのかを制御する処理を追加します。　

　NextTouch メソッドの中に、シナリオ内の全メッセージの再生が終了した際に、そのシナリオでCG画像が使用されていた場合にはそのCG画像を回収済画像としてセーブを行う処理を追加します。

TextMessageViewewスクリプトを修正する

　public 修飾子を持つ変数の追加はありませんので、修正が終了したらインスペクターの確認をして、アサイン漏れがないかチェックだけしてください。

TextMessageViewer.cs

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

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

public class TextMessageViewer : MonoBehaviour {

　　// 今までの宣言フィールドはそのまま変更なし。新しく１つの変数を追加

    private int backGroundImageNo;                      // 背景用画像の番号。CGの場合は100から設定


    void Start() {
        // 変更なしのため省略
    }


////* SetUpScenarioDataメソッド内に処理を追加 *////

    public void SetUpScenarioData(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);
  
        // 再生するBGMを設定
        bgmNo = senarioData.bgmNo;

        // 取得した番号のBGMを再生
        SoundManager.Instance.PlayBGM((SoundManager.BGM_Type)bgmNo);

        // 分岐用のメッセージを設定
        branchMessages = new string[senarioData.branchMessages.Length];
        branchMessages = senarioData.branchMessages;

        // 条件付きの分岐番号を設定
        conditionalBranchNo = new List<int>(senarioData.conditionalBranchNo);

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


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


　　　　// 背景の番号を設定
        backGroundImageNo = senarioData.backgroundImageNo;

        // シナリオの背景を設定。背景の番号がCGの番号以外なら
        if (backGroundImageNo < 100) {
            // 通常の背景を設定
            imgBackground.sprite = Resources.Load<Sprite>("BackGround/" + backGroundImageNo);   // <= 引数が変わっているので注意

        } else {
            // CGを設定
            imgBackground.sprite = Resources.Load<Sprite>("CG/cg_" + (backGroundImageNo - 100));
        }


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


        autoScenerioNo = senarioData.autoScenarioNo;

        if (senarioData.endingNo != 0) {
            endingNo = senarioData.endingNo;
        }

        // 未読/既読シナリオの判定を初期化(未読とする)
        isReadBranchNo = false;

        // 現在のシナリオの分岐番号を設定
        currentBranchNo = senarioData.senarioNo;

        // 既読のシナリオ分岐番号かどうか確認
        foreach (int readBranchNo in GameData.instance.readBranchNoList) {
            if (readBranchNo == currentBranchNo) {
                // このシナリオデータは既読状態
                isReadBranchNo = true;
            }
        }

        // 既読のシナリオではない場合には自動再生を停止して文字送りの速度を戻す
        if (!isReadBranchNo) {
            isAutoPlay = false;
            currentWordSpeed = wordSpeed;
        }

        // 既読スキップ
        SkipMessage();

        // セーブできるようにする
        isSaving = false;
        btnSave.interactable = true;

        // 1文字ずつメッセージ表示を開始
        StartCoroutine(DisplayMessage());
    }


　　void Update() {
        // 変更なしのため省略
    }
	

    private IEnumerator DisplayMessage() {
        // 変更なしのため省略
    }
 

　　private IEnumerator WaitTime() {
　　　　// 変更なしのため省略
　　}


　　private void CompleteOneMessage() {
 　　　 // 変更なしのため省略
　　}


////* NextTouch メソッド内に処理を追加 *////

    /// <summary>
    /// タップするまで全文を表示したまま待機
    /// </summary>
    /// <returns></returns>
    private IEnumerator NextTouch() {
        if (!isAutoPlay) {
            // タップを待つ
            yield return new WaitUntil(() => isTapped);
            Debug.Log("非オート。タップ待ち");
        } else {
            // 自動再生中は１つのメッセージ全文を表示したら、指定した秒数待機
            yield return new WaitForSeconds(autoPlayWaitTime);
            Debug.Log("オート中 : " + autoPlayWaitTime + " 秒待機");
        }
        
        iconNextTap.SetActive(false);

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

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

            // 現在のシナリオの分岐番号を既読番号として保存
            GameData.instance.SaveReadBranchNo(currentBranchNo);


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

            // 背景としてCGを表示していたなら
            if (backGroundImageNo >= 100) {
                // 回収済みとしてCG番号を保存
                GameData.instance.SaveGetCGNo(backGroundImageNo);
            }

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


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

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

                // まだこのエンディングを見ていなければ(エンディングの番号リストになければ)、エンディングの番号を保存
                if (GameData.instance.endingNos.Contains(endingNo)) {
                    GameData.instance.SaveEndingData(endingNo);
                    Debug.Log("Ending SaveNo :" + endingNo);
                }

            } else {
                if (branchs[0] == -1) {
                    // 分岐なしの場合は自動的に次のシナリオを再生
                    // 次のシナリオの呼び出し
                    gameDirector.ChooseBranch(autoScenerioNo);

                } else {

                    // 分岐ボタンの作成
                    StartCoroutine(gameDirector.CreateBranchSelectButton(branchMessages, branchs, conditionalBranchNo));
                }
            }
        }
    }


    private bool JudgeEnding() {
        // 変更なしのため省略
    }


    public void OnClickAutoPlay() {
        // 変更なしのため省略
    }


    public void OnClickSkipReadingMessage() {
        // 変更なしのため省略
    }


    private void SkipMessage() {
        // 変更なしのため省略
    }


    private void OnClickSave() {
        // 変更なしのため省略
    }


    public void OnClickDataLoad() {
        // 変更なしのため省略
    }
}

　以上で完了です。

４．Title シーンと Title スクリプトを修正して、アルバム機能にかかわる処理を追加する

事前準備

　Titleシーンへ移動し、Titleシーンの Canvas ゲームオブジェクト内に、アルバムシーンへの遷移用のボタンを設置してください。位置や大きさは適宜に調整してください。

Titleシーン　ヒエラルキー画像

Titleシーン　SceneビューとGameビュー画像

参考画像
btnAlbum ゲームオブジェクト　インスペクター画像①

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

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

設計

　Titleスクリプトを修正して、ゲームの実行時に、GameDataにセーブされているCGの番号があるかチェックを行い、セーブされた番号がある場合にはCGの番号を取得する処理を追加します。
また Titleシーンに設置したアルバムシーンへの遷移用のボタンを制御し、ボタンを押すことによってアルバムシーンへ遷移する処理を追加します。
いまはまだアルバムシーンを作成していませんので、処理だけ事前に作成しておき、後程、アルバムシーンを作成してから遷移処理を確認します。

　変数にはアルバムシーンへの遷移用のボタン用の変数を追加します。

Title スクリプトを修正する

Title.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;

public class Title : MonoBehaviour 
{
　　// いままでの宣言フィールドは変更ありませんが、記述します。

    public bool isNewGameButton;

    [SerializeField]
    private Button btnNewGame;

    [SerializeField]
    private Button btnDataLoad;

    [SerializeField]
    private DataLoadPopUp dataLoadPopUpPrefab;    // ロード用ポップアップのプレファブアサイン用

    private DataLoadPopUp dataLoadPopUp;   　　　 // 生成されたロード用ポップアップのクローンの代入用

    [SerializeField]
    private Transform canvasTran;                 // ロード用ポップアップの生成位置


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

    [SerializeField]
    private Button btnAlbum;                      // アルバムシーンへ遷移するボタンの制御用

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


    void Start() {
　　　　// エンディングの登録がある場合、すべてのエンディングを見ているか確認。
        if (GameData.instance.endingCount > 0) {
            CheckEndingCount();
        }

　　　　// セーブされている、既読のシナリオ分岐番号を取得
        GameData.instance.LoadReadBranchNos();

        // ロードボタンにメソッドを登録
        btnDataLoad.onClick.AddListener(OnClickDataLoad);


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

        // 回収しているCGがあるか確認して、回収しているCGがある場合には、そのCGの番号を取得してGameDataのリストに登録
        GameData.instance.LoadGetCGNos();

        // アルバムシーンへの遷移処理を登録
        btnAlbum.onClick.AddListener(OnClickAlbumScene);

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

    }

    /// <summary>
    /// エンディングを見た数の確認
    /// </summary>
    private void CheckEndingCount(){
        // 変更なしのため省略
    }

    /// <summary>
    /// Gameシーンへ遷移。ボタンに登録する
    /// </summary>
    public void LoadGameScene() {
        // 変更なしのため省略
    }

    /// <summary>
    /// エンディング・コンプリート時に追加されるボタンに登録する処理。スクリプトから登録する
    /// </summary>
    private void OnClickNewGameButton() {
        // 変更なしのため省略

    }

    /// <summary>
    /// ロード用ポップアップ生成
    /// </summary>
    public void OnClickDataLoad() {
        if (dataLoadPopUp != null) {
            // ロード用ポップアップがすでに生成されている場合には処理しない(複数生成を防止)
            return;
        }
        
        // ロード用ポップアップを生成
        dataLoadPopUp = Instantiate(dataLoadPopUpPrefab, canvasTran, false);

        // ポップアップを設定
        dataLoadPopUp.SetUpDataLoadPopUp();
    }


////* 新しくメソッドを１つ追加。ここから *////


    /// <summary>
    /// アルバムシーンへ遷移
    /// </summary>
    private void OnClickAlbumScene() {
        SceneManager.LoadScene("Album");
    }


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

}

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

　スクリプトの修正が終了したので、Titleゲームオブジェクトを選択してインスペクターを確認します。
新しく追加した btnAlbum 変数が表示されていますのでアサインしてください。

　btnAlbum 変数には、Titleシーンに設置している、アルバムシーンへの遷移用のボタンをアサインします。
ヒエラルキーにある、アルバムシーンへの遷移用のボタンのゲームオブジェクトをドラッグアンドドロップしてアサインしてください。
このボタンを押すと、アルバムシーンへ遷移する処理を行いますが、今はまだシーンがないためエラーになります。

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

　以上で完了です。

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

　以上で完成です。まずは、シナリオデータの元となるExcelファイル、あるいはJsonファイルを修正して、
いずれかのシナリオの背景画像用の backgroundImageNo の値を 100 に設定してください。
この値と Resourcesフォルダの cg ファイルの通し番号とが連携しています。
backgroundImageNo の値を 100 に設定することで、ResourcesフォルダのCGフォルダにある cg_0 をロードする処理になっています。

参考用Jsonファイル

{
  "senario": 
  [
    {
      "senarioNo": "0",
      "messageString": "あいうえお,かきくけこ",
      "charaNoString": "1,2",
      "branchString": "-1",
      "displayCharaString" : "3/0,1",
      "backgroundImageNo" : "100",
      "bgmNo" : "0",
      "branchMessageString" : "123,aaa",
      "autoScenarioNo": "1",
      "endingNo": "0"
    },
    {
      "senarioNo": "1",
      "messageString": "さしすせそ\nなにぬねの,たちつてと",
      "charaNoString": "0,1",
      "branchString": "5/1/0,1,2",
      "displayCharaString" : "0,2/1",
      "backgroundImageNo" : "1",
      "bgmNo" : "0",
      "branchMessageString" : "fff,ddd,kkk",
      "autoScenarioNo": "0",
      "endingNo": "1"
    },
    {
      "senarioNo": "2",
      "messageString": "わをん",
      "charaNoString": "2,3",
      "branchString": "0",
      "displayCharaString" : "0,1,2",
      "backgroundImageNo" : "2",
      "bgmNo" : "0",
      "branchMessageString" : "gggg",
      "autoScenarioNo": "0",
      "endingNo": "0"
    }
  ]
}

　このJsonファイルでは、最初のシナリオデータの背景画像をCG画像に差し替えるようにしています。
ゲームを最初からスタートして、通常の背景画像ではなく、新しく用意したCG画像が表示されれば成功です。

　＜実装動画＞
ゲーム中にCG画像が表示されるか確認
https://gyazo.com/b60f6027a335c0ac0887e7f0b5d2bad4

　CGが無事に表示されたら、そのままシナリオをすべて再生すると回収済CGとしてセーブされます。
セーブ処理が成功すればDebug.Logが処理されますので、Console にCG回収済と表示されます。

　セーブの確認が取れたらゲームを一度終了し、再度ゲームを実行しなおしてください。タイトルシーンで
回収したCGの番号がセーブされている場合には、その番号を取得して、GameDataのリストに代入する処理が実行されます。
こちらもロードが成功した場合には、Debug.Logが処理されてConsoleに表示されます。

Console　セーブとロードに成功した場合の処理表示

ゲーム中に回収後、ゲームを再度スタートした際にタイトルシーンで回収済みのCGの番号を取得(GameData の getCGNos の値が自動で代入される)
https://gyazo.com/cb4df400ebbac82d0ade1088147f8cc0

　以上でこの手順は終了です。おつかれまでした！
次の手順では、回収したCGの番号を参照して、アルバムシーンとサムネイル画像を表示する処理を実装します。

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

印刷する

コメント（0）

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

コメントをかく

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

i-school