1文字ずつ流れるようにテキスト表示

2022年10月21日

テキストが会話風に、1文字ずつ流れるように表示させてみましょう。

クリックすると、1文字ずつ順に表示されて、最後に改行が入ります。

ストーリーや、キャラクターの会話シーンなどに活用できそうな仕組みですね。

1文字ずつ順に文字を出す

テキストを作成し、中央に配置。

幅やフォントサイズを設定し、、左上部に寄せました。

空のオブジェクトを作成。

TalkScript.csを作成し、GameObject（空のオブジェクト）に追加します。

TalkScript.csを記述します。

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

public class TalkScript : MonoBehaviour
{
    [SerializeField] Text text;
    private string[] wordArray;
    private string words;

    void Start()
    {
        words = "こ,こ,か,ら,先,は,2,つ,に,道,が,分,か,れ,て,い,る,よ,。,\n";
    }

    void Update()
    {
        if(Input.GetMouseButtonDown(0))
        {
            wordArray = words.Split(',');
            StartCoroutine("SetText");
        }
    }

    IEnumerator SetText()
    {
        foreach(var p in wordArray)
        {
            text.text = text.text + p;
            yield return new WaitForSeconds(0.1f);
        }
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class TalkScript : MonoBehaviour

{

[SerializeField] Text text;

private string[] wordArray;

private string words;

void Start()

{

words = "こ,こ,か,ら,先,は,2,つ,に,道,が,分,か,れ,て,い,る,よ,。,\n";

}

void Update()

{

if(Input.GetMouseButtonDown(0))

{

wordArray = words.Split(',');

StartCoroutine("SetText");

}

IEnumerator SetText()

{

foreach(var p in wordArray)

{

text.text = text.text + p;

yield return new WaitForSeconds(0.1f);

}

UIテキストを扱う際は、using UnityEngine.UI; を忘れずに書いておきましょう。

テキストのフィールドに、Textを入れます。

ゲームプレイして、画面をクリックしてみましょう。

ストーリー風に、1文字ずつテキストが流れて表示されます。

< 前の記事次の記事 >

1文字ずつ流れるようにテキスト表示

1文字ずつ順に文字を出す

SCHOOL教室案内

枚方くずは校

神戸芦屋校

京都南教室