UE5で会話システムを実装する方法①

こんにちは！　かにまろです。
今回は、制作中のゲームの会話システムの基盤実装が終わった（と思う）ので、どんな仕組みにしたかをまとめていきます。
※かなり長くなるので、何本かの記事に分けて投稿いたします。

注意事項

❗筆者はプログラミング初心者で、ゲームは開発中のものです
❗バグや不具合を含んでいる可能性があります
❗間違っている、非効率な実装方法である可能性があります

この記事を読んでほしい人

• UnrealEngine初心者

画像つきで、初めてUnrealEngineを触る人にもわかりやすいように書いています。また、私がわかる範囲でではありますが、なぜそうしているのかも併記しています。

完成イメージ

全て完了したときの挙動イメージは動画の通りです！

実装を始める前に

アクションガイドの実装に取り組む前に、UnrealEngine5を導入してください。筆者が使っているバージョンは、UnrealEngine5.1.1です。プロジェクトブラウザから、「ゲーム＞サードパーソン」でプロジェクトを作ってください。

また、動画中に出て来たアクションガイドの表示については、下の記事をご覧くださいませ。

今回実装するもの

会話システムで実装していくものを、図にまとめてみました。
細かいので、拡大してご覧ください。

参考にしたサイト様など

初心者でない方は、下記サイト様をご覧いただければ大丈夫かと思います！

▼会話システムではありませんが、BP_ThirdPersonCharacterがどのNPCにインタラクトできるかを調べる処理やBPIの使い方を応用しました。

▼会話テキストを1字1字表示する処理回りはほとんどこちらの方のやり方を真似しました。神……。

▼要所要所つまみ食いしております。ありがたや...…。

この実装で実現したいこと

こんなにも参考になるサイトがいろいろあるのに、なぜ敢えてちゃんぽんしたのかについては、理由が3つあります。

• NPCや会話テキスト量がかなり多いゲームを作りたいため、
  会話テキストをデータテーブルにまとめて、管理しやすくしたい

• 会話テキストを1字1字表示する演出はぜひ入れたい

• （ちゃんぽんした結果だとは思うが）参考サイトのやり方そのままだと、実は動かないところがある……

まだ会話システムの詳細については模索中なので、この実装方法で完全に実現できているかは怪しいのですが、一旦これで良しとします！

それでは、早速実装に取り掛かっていきましょう！

WBP_Talkをつくる

WBP_Talkを用意する

まずは、会話ウィンドウから作っていきましょう。
「コンテンツブラウザ＞ユーザーインターフェイス＞ウィジェットブループリント」を選んでください。

表示される画面では「User Widget」を選びましょう。

作ったウィジェットにお好き名前をつけてください。
ここでは、「WBP_Talk」と命名しておきました。

Canvas Panelを追加する

ウィジェットの中身を作っていきます。
「WBP_Talk」をダブルクリックして開いたら、左側の「パレット＞パネル」から「Canvas Panel」を右側にドラッグ＆ドロップしてください。

私はゲームの画面サイズを1920x1080で作りたいので、緑枠の右下の矢印を動かして調整します。矢印を動かすと画面サイズの目安が出てくるので、お好きなサイズに合わせてください。視点移動はマウスの右クリックとドラッグ、ズームはマウスホイールで可能です。

会話ウィンドウを追加する

次に、会話ウィンドウを作ります。
「パレット＞一般＞Image」を画面右にドラッグ＆ドロップしてください。

この白枠に表示する会話ウィンドウの画像を設定していきますが、その前に、UE5のプロジェクトに画像を取り込む必要があります。お好きな画像で大丈夫ですが、用意するのが面倒な方は記事の最後にここで使用した画像を貼りましたので、保存して使ってください。
保存した画像を、UE5のコンテンツブラウザの上にドラッグ＆ドロップしてください。コンテンツブラウザに、下図のように画像が追加されていればOKです。

「WBP_Talk」に戻り、追加した「Image」を選択した状態で画面右の詳細から、「アピアランス＞Brush＞Image」の「なし」をクリックしてください。プルダウンから、先ほど追加した会話ウィンドウの画像を選びましょう。

私は画面の中央下に会話ウィンドウを表示したいので、「詳細＞アンカー」から、中央下に□があるボタンを選びました。画面中央の左上にあった花のようなマークが、Canvas Panelの中央下に移動しました。

ここまで設定が終わったら、Canvas Panelを画面に見立てて、Imageを好きな大きさに拡縮＆移動させてください。「詳細＞スロット＞アンカー」の各パラメーターから数値を変えることでも拡縮や移動ができます。私はいい感じに調整したら、この数字になりました。

この上にテキストを出すことになるので、会話ウィンドウを最背面に移動させましょう。「詳細＞スロット＞アンカー＞ZOrder」を「-1」にしてください。

最後に、詳細の1番上のImage_0を、わかりやすく「Image_TalkWindow」等に変えておきましょう。

テキストを入れられるようにする

次に、会話ウィンドウの上に会話のテキストを表示する場所を用意します。「パレット＞一般＞Text」を画面右のドラッグ＆ドロップしてください。「詳細」から、名前をわかりやすく「TalkText」等に変えておきましょう。

アンカーを会話ウィンドウと同じように中央下に設定して、表示したい位置にテキストボックスを動かしましょう。私の場合は、この位置にしました。

「詳細＞コンテンツ＞Text」にテキストブロックと書かれていますが、ここに後から会話テキストを入れていくので、今は空にしておきます。

「詳細＞アピアランス＞Font」から、お好きなフォントや文字サイズに設定してみましょう。フォントの追加は、

話者名表示を追加する

次に、話者名表示を追加しましょう。
TalkTextと同じようにテキストボックスを追加して、名前を「NameText」にしてください。
終わったら、会話ウィンドウと同じように次の値を設定してみましょう。

• アンカーを中央下に設定する

• 位置や大きさを調整する

• テキストを空にする

• フォントや文字サイズを設定する

私の設定はこんな感じです。

会話送りのアイコンを追加する

最後に、会話を全文表示したら出てくるアイコンを追加しましょう。
会話ウィンドウと同じようにImageを追加したら、次の値を設定してみましょう。

• 「Image_NextText」と命名する

• アンカーを中央下に設定する

• 位置や大きさを調整する

• 好きな画像を設定する

私の設定はこんな感じです。

次に、このImage_NextTalkがぴょこぴょこ動くようにします。
画面下のアニメーションタブを開き、「＋アニメーション」からアニメーションを追加して、「Anime_NextTalk」と命名しましょう。

「Anime_NextTalk」を選択した状態で右側の「＋トラック」を選択、「Image_NextTalk（Canvas Panel Slot）」を選んでください。

追加された「CanvasPanelSlot」の右側の「＋トラック」を選択、「Layout Data. Offsets」を選んでください。

次に、ピョコピョコ動くアニメーションの1ループ分の長さを設定します。私の場合、▽のアイコンが上下に動くアニメーションが始まって元に戻る時間を指定します。
右側のオレンジ色のところをつかんで、お好きな秒数のところまで動かしてください。私は1.00ミリ秒にしました。

そのまま、Offsets（Layout Data）の右側の小さいプラスボタンを押して、キーを追加しましょう。これで、1ミリ秒後のアイコンの位置を指定できるようになりました。

次に、0.50ミリ秒のところにオレンジ色の表示を動かし、アイコンの動きを指定しましょう。私の場合は、上面を-100にしました。これにより、アイコンが-109の位置から-100に0.5秒で移動し、0.5秒かけて-109に戻るようになります。お好きな数値を入れて、理想の動きを探してみてください。

ここまで終わったら、下の再生ボタンから動きを確認してみましょう。

いったんここまで！

長くなりましたので、今回はここまでです！
全6回になる想定ですので、どうぞ最後までお付き合いいただければと思います。次は、ブループリントを作っていく前準備になります。

もしご不明点がありましたら、コメントにてご連絡ください！
書いてあることについては、わかる範囲でご説明いたします。
間違いについても、コメントでご指摘いただけますと幸いです🙇🏻‍♀️

❗プロジェクトを保存するのをお忘れなく

作ったリソース