こんにちは!今日は、Unityの2Dプロジェクトで、Sprite Editorを使って文字数によってウィンドウのサイズが変わるメッセージウィンドウを作る方法を紹介します。
必要な画像を用意する
メッセージウィンドウに使うスプライト画像を用意します。ウィンドウの背景や枠などの画像を準備してください。この記事では、こちらの画像を使用しました。

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

Sprite Editorで画像を分割
- Sprite Editorが開いたら、画像を複数の部分に分割します。これで、ウィンドウの四隅や上下の部分を個別に扱えるようになります。この記事では、画像を9分割に設定しました。
- 分割が終わったら、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
コンポーネントを使ってテキストを一文字ずつ表示します。プレイヤーがマウスの左ボタンをクリックすると、次のテキストに進みます。
各部分の説明
TMPro
とUnityEngine
の名前空間を使います。これにより、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にリセットします。 ti
がwaittime
を超えると、j
を1増やし、表示する文字数を増やします。j
がkazu
を超えた場合、j
をkazu
に設定します。tmpmes.maxVisibleCharacters
にj
を設定し、表示する文字数を制限します。
全体の動き
- ゲーム開始時に、メッセージと初期値を設定します。
- 毎フレーム、経過時間をチェックし、時間が経つごとに一文字ずつ表示します。
- プレイヤーがマウスの左ボタンをクリックすると、次のメッセージに進みます。
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の項目にテキストをドラッグ&ドロップして設定します。

一文字づつ文字が表示されるようになり、クリックで次のセリフに切り替わるようになりました。
これで、文字数によってウィンドウのサイズが変わるメッセージウィンドウの作成方法を紹介しました。試してみてくださいね!