テキストアドベンチャー　手順５ - i-school

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

１３．Canvas内にUI部品を作成する③（キャラの名前を表示するウインドウを用意する）
１４．enum（列挙型）クラスを作成し、キャラの名前を登録する
１５．メッセージ表示用のスクリプトを作成する⑤（表示されているメッセージと同期する形でキャラの名前を表示する）

１３．Canvas内にUI部品を作成する③（キャラの名前を表示するウインドウを用意する）

　
　Cancas内のMessageWindowにメッセージ表示中のキャラの名前を表示できるようにしていきます。

　MessageWindow上にてメニューを表示し、 UI => Image を選択し、名前を imgCharaName に変更します。
こちらは名前表示の背景イメージになります。

　続いて、作成したimgCharaNameゲームオブジェクトの上でメニューを表示し、 UI => Textを選択、名前を txtCharaNameType に変更します。
こちらがキャラの名前を表示するTextになります。

　ヒエラルキー上は以下のような状態になっているか、確認してください。

TextのOutlineをキレイに表示する

　Githubに公開されているCircleOutline.csを利用してみましょう。
このスクリプトをtxtCharaNameTypeゲームオブジェクトにアタッチすることで、文字の輪郭をキレイに表示してくれる機能が追加されます。

CircleOutline.cs

https://gist.github.com/FreelyApps/e9f3f4a4d89882b...

　
　設定方法は、EffectDistanceの数字を4～8前後にし、N Effect Numberも4～12前後にすると文字の輪郭を縁取ることが出来ます。
あまり数字が大きいと文字自体がつぶれてしまうため、読みやすくて綺麗なアウトラインになるように色々と試してみましょう。

１４．enum（列挙型）クラスを作成し、キャラの名前を登録する

　ゲームに登場するキャラクターの名前を毎回記述していては大変です。そこで列挙型という機能を使ってゲームに登場するキャラの名前を作成し、登録しておきましょう。　
毎回文字列で指定していては打ち間違いによるエラーも起こりやすいですが、Enum型で指定した場合、登録されている内容でしか選択が出来なくなりますので間違えることもなくなります。

　この機能を使い、会話中のキャラの名前を表示したり、後で実装するキャラのイメージ画像を表示させる際に利用していきます。

　Scriptsフォルダ内でメニューを表示し、Create => C# Script を選択、名前を CHARA_NAME_TYPE に変更します。enumのみのスクリプトのため、他のスクリプトとは異なりclassではありません。こういった場合は、ファイル名をすべて大文字などにしておくことで、他のスクリプトとの差別化が図れます。
もちろん、他のスクリプトと同じ命名規則で名前をつけても問題はありません。
　

　<= クリックするとサンプルコードが開きます。

/// <summary>
/// キャラクター名を登録する
/// </summary>
public enum CHARA_NAME_TYPE {   // <= MonoBehaviourを継承しない
    A,   // 実際に登場するキャラの名前にする。日本語もOK
    B,
    C,
    NO_NAME    // 名前表示なし    
}

　このスクリプトは他のスクリプトとは違い、MonoBehaviourクラスを継承していません。そのためゲームオブジェクトにアタッチすることはできませんが
MonoBehaviourを継承していないこのenumは、変数に代入しなくても、どのクラスからでも参照が出来ます。実際に使ってみて試してみましょう。

１５．メッセージ表示用のスクリプトを作成する⑤（表示されているメッセージと同期する形でキャラの名前を表示する）

　【１３】で作成したキャラの名前を表示するTextコンポーネントと、メッセージ表示用のスクリプトであるTextMessageViewerスクリプトとを紐づけして
メッセージの表示に合わせて、キャラの名前を表示するようにします。

　TextMessageViewerを修正していきますので、ダブルクリックしてTextMessageViewerスクリプトを開いてください。
修正箇所はなく、publicのメンバ変数の宣言を２つ追加し、DisplayMessageメソッド内にメッセージに合わせてキャラの名前を表示する処理の追加があります。
ここでは該当の箇所のみを抜粋して記載してあります。

　<= クリックするとサンプルコードが開きます。

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

public class TextMessageViewer : MonoBehaviour
{
    public string[] messages;                                // 表示するメッセージの配列
    public Text txtMessage;                                  // メッセージ表示用
    public float wordSpeed;                                  // 1文字当たりの表示速度

　　public CHARA_NAME_TYPE[] charaTypes;                     // <= キャラの名前が入る配列（追加★）
　　public Text txtCharaType;　　　　　　　　　　　　　　　　// <= キャラの名前表示用（追加★）

    （中略）  

    /// <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) {　　// <= CHARA_NAME_TYPEというenumを変数に代入せずにそのまま使用できます。[enum名.登録してあるキャラ名]で使用できます。
            // NoName以外の場合だけキャラ名表示
            txtCharaType.text = charaTypes[messagesIndex].ToString();  // <= enumはToString()メソッドで文字列に変換できます。その場合にはenumの部分は除いてキャラ名のみ変換対象になります。
        }

    */ ここまで追加 /*
        
        // 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);
        }
    }

    （中略）        
   
}

　エラーがなく記載できたらTextMessageViewerゲームオブジェクトのインスペクタ－を確認しましょう。
publicで追加した項目が2か所増えているはずです。

　まずはcharaTypesにキャラの名前を仮登録して、処理が正常に動くかどうかをデバッグをしましょう。
charaTypesはMessagesと同じで配列になっていますので、はじめはSize 0 に設定されています。
SizeはMessagesの値と同じ数に設定をします。画像例の場合、MessagesのSizeが 3 ですので、charaTypesのSizeも 3 に設定します。

　Elementが0～2まで追加されますので、こちらはプルダウンメニューになっていて、Enumで作成したキャラの名前を選択出来るようになっています。
まずは適当に選択しましょう。このElementの番号とMessagesのElementの番号とがリンクしています。

　続いて、txtCharaTypeの部分に、キャラの名前を表示させたいTextコンポーネントがアタッチされているゲームオブジェクトをアサインします。
ヒエラルキー上にあるtxtCharaNameTypeゲームオブジェクトをドラッグアンドドロップしてアサインしましょう。

　これでキャラの名前を表示させる処理と、表示させるTextコンポーネントとが紐づけされました。
　

　実行して、メッセージの数に合わせてキャラの名前が表示され、次のメッセージの表示に合わせて
キャラの名前が変更されているかどうかを順番に表示させて確認をしてみましょう。

https://gyazo.com/d4fb383bd7b2c85cfe34919a576a4b62