Unityゲームの作り方メモ

【Unity 2D】メッセージウィンドウの作り方

Unity

こんにちは!今日は、Unityの2Dプロジェクトで、Sprite Editorを使って文字数によってウィンドウのサイズが変わるメッセージウィンドウを作る方法を紹介します。

必要な画像を用意する

メッセージウィンドウに使うスプライト画像を用意します。ウィンドウの背景や枠などの画像を準備してください。この記事では、こちらの画像を使用しました。

インポートした画像を選択し、インスペクタで「meshtype」を「FullRect」に設定し、「Sprite Editor」をクリックします。

Sprite Editorで画像を分割

  1. Sprite Editorが開いたら、画像を複数の部分に分割します。これで、ウィンドウの四隅や上下の部分を個別に扱えるようになります。この記事では、画像を9分割に設定しました。
  2. 分割が終わったら、Apllyボタンを押して保存します。

5. メッセージウィンドウの作成

ヒエラルキーウィンドウで右クリックし、「UI」→「Image」を選びます。これがウィンドウのベースとなります。

インスペクタで、Imageコンポーネントの「Source Image」に先ほど分割したスプライトの一部をドラッグ&ドロップし、ImageTypeをslicedにします。

AddComponentから「ContentSizeFittor」と「VarticalLayoutGroup」検索して追加し、子オブジェクトのサイズが変わったときに、親オブジェクトのサイズを自動で変わるようにします。

ContentsizefitterをPreferredSizeに変更します。

verticalLayoutGroupのControlChildSizeにチェックを入れました。

paddingの数値で枠とメッセージの間隔の調整ができます。

ヒエラルキーウィンドウで右クリックし、「UI」→「Image」を選び、Imageの子オブジェクトにします。

これで、メッセージの文字数に応じてウィンドウのサイズが変わるようになりました!

一文字づつ表示する

imageの子オブジェクトのテキストをTextMeshProに変更します。

  • 【Unity】TextMeshProで日本語入力する方法

プロジェクトウィンドウで右クリックし、「Create」→「C# Script」を選び、「MessageWindowController」と名前を付けます。

コード全体の説明

このスクリプトは、UnityのMonoBehaviourクラスを継承していて、TextMeshProUGUIコンポーネントを使ってテキストを一文字ずつ表示します。プレイヤーがマウスの左ボタンをクリックすると、次のテキストに進みます。

各部分の説明

  • TMProUnityEngineの名前空間を使います。これにより、TextMeshProUGUIやUnityの基本的なクラスを利用できます。
  • TextMeshProUGUI型のtmpmesは、テキストを表示するUI要素です。
  • string型の配列serifuには、表示したいメッセージを5つ格納します。
  • int型のkazuは、現在表示中のメッセージの文字数を表します。
  • int型のiは、現在のメッセージのインデックスを管理します。
  • int型のjは、現在表示している文字の数を表します。
  • float型のwaittimeは、一文字表示するのにかかる時間です。
  • float型のtiは、時間を管理するための変数です。
  • Startメソッドでは、配列serifuにメッセージを格納し、変数を初期化します。
  • waittimeを0.1秒に設定し、tiを0にします。
  • Updateメソッドは毎フレーム呼ばれます。
  • tiに経過時間を追加し、現在のメッセージの長さをkazuに設定し、tmpmes.textに現在のメッセージを設定します。
  • マウスの左ボタンがクリックされると、次のメッセージに進み、jを0にリセットします。
  • tiwaittimeを超えると、jを1増やし、表示する文字数を増やします。
  • jkazuを超えた場合、jkazuに設定します。
  • tmpmes.maxVisibleCharactersjを設定し、表示する文字数を制限します。

全体の動き

  1. ゲーム開始時に、メッセージと初期値を設定します。
  2. 毎フレーム、経過時間をチェックし、時間が経つごとに一文字ずつ表示します。
  3. プレイヤーがマウスの左ボタンをクリックすると、次のメッセージに進みます。
using TMPro;
using UnityEngine;


public class Message : MonoBehaviour
{
    [SerializeField] 
    private TextMeshProUGUI tmpmes;
    [SerializeField]
    private string[] serifu = new string[5];
    [SerializeField]
    private int kazu;
    [SerializeField]
    private int i;
    [SerializeField]
    private int j;

    [SerializeField]
    private float waittime;
    [SerializeField]
    private float ti;

    private void Start()
    {
        //表示したいテキストを入力する

        serifu[0] = "おはようございます";
        serifu[1] = "こんにちは";
        serifu[2] = "おやすみなさい";
        serifu[3] = "おつかれさまです。";
        serifu[4] = "さようなら";

        kazu= 0;
        i = 0;
        j = 0;

        //一文字づつ表示するときの待ち時間
        waittime = 0.1f;
        ti = 0f;
    }

    private void Update()
    {
        ti += Time.deltaTime;
        kazu = serifu[i].Length;
        tmpmes.text = serifu[i];

        if (Input.GetMouseButtonDown(0))
        {
            i = i + 1;
            j = 0;
        }

        if (ti >= waittime)
        {
            j = j + 1;
            if (j > kazu)
            {
                j = kazu;
            }

            ti = 0f;
        }
        tmpmes.maxVisibleCharacters = j;
    }

}

作成したスクリプトをTextMeshProにアタッチしました。

TextMeshProを選択して、inspector画面からtmpmesの項目にテキストをドラッグ&ドロップして設定します。

一文字づつ文字が表示されるようになり、クリックで次のセリフに切り替わるようになりました。

これで、文字数によってウィンドウのサイズが変わるメッセージウィンドウの作成方法を紹介しました。試してみてくださいね!

おすすめのアセット