Unityメモ – 文字を1文字づつ表示する方法

Posted: 2016年5月12日 カテゴリー: プログラミングメモ, Unity, Unity メモ
タグ:, ,

今回はUnityのuGUIで文字を1文字づつ表示していく方法をメモします。

内容的にはXNAメモ – 流れるテキストの作り方 と大体同じです。

実装方法ですが、文字前文を保持し、それを一定範囲表示します。表示する範囲は一定時間毎に1文字毎増やしていきます。

それでは実装に入ります。まずはクラス宣言です。今回はuGUIで実装しますが、TextMeshも同じ処理を使える様にまずは基礎クラスを作ります。継承する時にジェネリックの部分には表示に使用するコンポーネントのタイプを指定します。

using UnityEngine;
using System.Collections.Generic;

public abstract class ITimedText<T>
    : MonoBehaviour
{
    /// <summary>
    /// 1文字の待ち時間
    /// </summary>
    [SerializeField]
    float m_waitDuration = 0.0f;

    /// <summary>
    /// 文字を全部表示した時に呼ぶイベント
    /// </summary>
    [SerializeField]
    UnityEngine.Events.UnityEvent m_onTextEndEvent = null;

    // 表示に使用するコンポーネント
    protected T m_textComponent;

    // 文字全文
    string m_text;

    // 次の文字までのタイマー
    float m_timer;

    // 現在表示する最後の文字の位置
    int m_currentIndex;

    void Start()
    {
        Initialize();
    }

    protected virtual void Initialize()
    {
        m_text = "";
        m_timer = new Timer(m_waitDuration);
        m_currentIndex = 0;
        SetupTextComponent();
    }

    /// <summary>
    /// テキストコンポーネントの設定
    /// </summary>
    protected abstract void SetupTextComponent();

    /// <summary>
    /// 表示する文字をテキストコンポーネントに設定する
    /// </summary>
    /// <param name="text">表示する文字</param>
    protected abstract void SetTextDisplay(string text);

宣言と初期化処理を一通り書きました。abstract宣言してあるメソッドはこのクラスを継承したクラス内で実装を紹介します。

それでは実際に表示する文字の範囲を更新していく処理を実装します。行うことは上記に書いてある通り、一定時間が経過したら表示する文字の位置を変えていく処理を作ります。表示する文字自体の設定は上記で宣言したSetTextDisplay()を呼び出します。

    public bool IsLastIndex { get { return (m_currentIndex >= m_text.Length); } }

    void Update()
    {
        UpdateText();
    }

    protected virtual void UpdateText()
    {
        if (IsLastIndex)
        {
            return;
        }

        m_timer += Time.deltaTime;
        if (m_timer.IsTimeUp < m_waitDuration)
        {
            return;
        }

        // 次の文字に移動する
        m_currentIndex++;
        m_timer = 0.0f;

        // 表示する文字を設定
        SetTextDisplay(m_text.Substring(0, m_currentIndex));

        if (m_onTextEndEvent != null && IsLastIndex)
        {
            // 最後に達したので、イベントを飛ばす
            m_onTextEndEvent.Invoke();
        }
    }

表示する文字の範囲を取り出すのはstring.SubString()を使用します。ここに一定時間毎にインクリメントしているインデックスを渡す事で、戦闘からそのインデックスまでの文字を獲得出来ます。

あとは実際に文字を設定するメソッドを追加します。

    public void SetText(string text)
    {
        m_text = text;
        m_currentIndex = 0;
        m_timer = 0.0f;
        SetTextDisplay("");
    }

基礎クラスは出来ましたので、これを継承してuGUI向けのクラスを作ります。やる事は簡単で、コンポーネントの設定と、Textクラスへの文字の設定を実装します。

using UnityEngine;
using System.Collections.Generic;

public class UITimedText
    : ITimedText<UnityEngine.UI.Text>
{
    protected override void SetupTextComponent()
    {
        m_textComponent = GetComponent<UnityEngine.UI.Text>();
    }

    protected override void SetTextDisplay(string text)
    {
        m_textComponent.text = text;
    }
}

後はこのスクリプトをTextがあるオブジェクトに追加し、SetText()メソッドを呼んで文字を渡せば1文字づつ表示されるようになります。

 

今回は以上です。動画は何かキャプチャが上手く行かなかったので、その内上げるかもしれません。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中