“1文字ずつ文章を表示する方法”

執筆: “FK”

はじめに

初めまして。プログラマーのF.Kです。

今回はUnrealEngine5を使用してウィジェットブループリントで1文字ずつ文章を表示する方法を記載したいと思います。

画面で動作するまでの実装

1. データアセットを使用して表示文章の準備

2. 表示させるためのウィジェットの処理内容

今回必要なファイルは2種類です。

文字を表示するためのデータアセットを用意します。

コンテンツドロワーから右クリックをしてその他からデータテーブルを選択して作成していきます。

データテーブルでは行番、Talker(話している人)、TalkMessage(話している内容)で作成します。

文字を表示するためのウィジェットを用意します。

コンテンツドロワーから右クリックをしてユーザーインターフェースからウィジェットブループリントを選択して作成していきます。

今回は表示させるウィジェットをWBP_TalkWindowという名前で用意します。

WBP_TalkWindowは文章以外のデザインやレイアウトの設定をしているウィジェットになります。

データテーブルから文章読み込む処理、文章を1文字ずつに分ける処理、ページ制御処理を行っています。データテーブルから文章を読み込む処理内容はLoadTalkで行っています。

文章を1文字ずつに分ける処理はSplitMultilineTextで行っています。

データテーブルにSetされた行の終わりまでの行を取得する処理になります。

ページの制御処理は下記関数で行っています。

最初のページを読み込む関数SetFirstPage。

最後のページを取得する関数SetLastPage。

ページの変更関数ChabgeNextPage。

ページをクリアする関数ClearPage。

次に、1文字表示用のウィジェットを用意します。今回はWBP_TalkMessageとします。イベントConstructでSetTextで1文字にsplitした文字を引数にしてinTextに入ります。

ウィジェットの準備ができたら話が始まるイベントと次のページにいくイベントを準備します。

今回はレベルブループリントにTalkStartイベントを作成して、WBP_TalkWindowを表示させてデータテーブルの次の行のセットまでを処理します。ShowSingleCharTextイベントをSetTimerbyEventで1文字ずつ表示させるウィジェットを作成しています。

流す文字列のスピードはMessageSpeed変数で変更できるようにします。

全文が一気に表示されるよりかっこよくなるのでぜひ使って見てください。また、文字や行を分けて表示したい時の参考に使ってみてください。