村人に話しかけると、セリフが少しずつ現れる。読み終えて「次へ」を押すと続きを話し、「はい」「いいえ」を選ぶと返事が変わる。会話画面は、文字を表示するだけでなく、プレイヤーが読む速さや選んだ答えに合わせて進むUIです。
今回は、依頼を持ちかける村人との短い会話を作ります。セリフはData Tableへ置き、表示を担当するWidgetは「指定された行を読み、次に読む行へ進む」という形にします。文章を増やしたときも、同じ表示処理を使い回せます。

この記事でわかること
- 会話を「次に読む行」でつなぐデータの持ち方
- 1文字ずつ表示し、途中でスキップできるようにする方法
- 選択肢の数だけボタンを並べて分岐する手順
- 会話中は操作を止め、終わったら戻す流れ
この記事で作るもの
- 村人の近くで
Eを押すと始まる、4行の会話- 1文字ずつ表示し、途中なら「次へ」で全文を出す文字送り
- 「はい」「いいえ」で返事が変わり、最後は移動操作へ戻る流れ
Third Personテンプレートの、ローカルのプレイヤー1人・NPC1体で試します。UMGの部品配置、構造体、Blueprintの変数とイベントを使ったことがある方を想定しています。NPCを増やす設計は最後に触れます。
会話は「次に読む行」でつなぐ
Data Tableは、同じ項目を持つデータを行ごとに並べるアセットです。今回は1行を1つのセリフにして、話者・本文・次の行を持たせます。
たとえば、Start 行を読み終えたら Ask 行へ。Askで「はい」を選んだら Yes 行へ進みます。行名は、次に読むページを指定する目印のようなものです。

図のセリフは仕組みを見るための短縮例です。実践では、次の4行を入力します。
先に、選択肢1個分の形を決める
コンテンツブラウザでBlueprints → Structureを選び、S_DialogueChoice を作ります。
| 変数 | 型 | 内容 |
|---|---|---|
| ChoiceText | Text | ボタンに表示する「はい」などの文字 |
| TargetRow | Name | 選んだ後に読む行の名前 |
次に、セリフ1行分の S_DialogueLine を作ります。
| 変数 | 型 | 内容 |
|---|---|---|
| Speaker | Text | 話者名 |
| Line | Text | セリフ本文 |
| NextRow | Name | 「次へ」で進む行 |
| Choices | S_DialogueChoiceの配列 | その行で見せる選択肢。なければ要素数0 |
配列は、同じ種類のものを複数並べて持つためのものです。Choicesへ2要素入れれば、後で2つのボタンを作れます。
Textは画面へ見せる文章、Nameは行を指定する名前として使い分けます。Textで原文を持つと、後から翻訳へ対応しやすくなります。文字送りの間だけは、 切り出しに使えるStringへ変換します。
村人の会話を4行入れる
Data Tableを作り、Row StructureへS_DialogueLineを指定して、DT_Dialogue と名付けます。今回はCSVを使わず、Data Tableのエディタで直接入力します。
| Row Name | Speaker | Line | NextRow | Choices |
|---|---|---|---|---|
| Start | 村人 | こんにちは。旅の人だね。 | Ask | 0要素 |
| Ask | 村人 | よかったら、この村を手伝ってくれないか? | None | 2要素 |
| Yes | 村人 | ありがとう!恩に着るよ。 | None | 0要素 |
| No | 村人 | そうか…気が変わったらまた来てくれ。 | None | 0要素 |
AskのChoicesに2要素を追加し、1つ目を ChoiceText=はい / TargetRow=Yes、2つ目を ChoiceText=いいえ / TargetRow=No にします。
None は、Name型で名前が指定されていない状態です。今回は「次の行がなければ会話を閉じる」という目印にします。ただしAskでは、先に選択肢を選んでもらいます。NextRowがNoneという理由だけで、質問を表示した直後に閉じるわけではありません。
セリフとボタンの置き場所を作る
User Widgetを親に WBP_Dialogue を作り、Designerで次の階層にします。最初は、画面に見える「次へ」ボタンから送る形にしましょう。
Canvas Panel
└─ Size Box
└─ Border
└─ Vertical Box
├─ SpeakerText(Text)
├─ Size Box
│ └─ BodyText(Text)
├─ ChoiceBox(Vertical Box)
├─ ContinueIcon(Text「▼」)
└─ AdvanceButton(Button)
└─ Text「次へ」
外側のSize BoxはWidth Overrideを 760 にします。CanvasスロットはAnchorsを下中央、Alignmentを 0.5 / 1、Positionを 0 / -32、Auto Sizeをオン。Borderは白、Paddingは 24 にします。1280×720程度のゲーム画面で確認します。
SpeakerTextとBodyTextは濃紺、Font Sizeは 22。BodyTextのAuto Wrap Textをオンにし、その親のSize BoxはMin Desired Heightを 96 にします。短いセリフでも本文の場所を確保し、文字が増えるたびにパネルの高さが変わるのを抑えます。
Vertical Boxの部品は横Fill、上下Padding 4。AdvanceButtonは青、内側のTextは白、Padding 10 とします。ContinueIconは右寄せ、初期VisibilityはHiddenです。「▼」は、全文が出て次へ進める合図に使います。
SpeakerText・BodyText・ChoiceBox・ContinueIcon・AdvanceButtonのIs Variableをオンにしてください。グラフから表示や状態を変える部品です。ChoiceBoxには、いまは何も入れません。
DesignerのBodyTextへ試しに長めのセリフを入れ、折り返してパネル内に収まることを確かめます。確認後はSpeakerTextとBodyTextの初期文字を空に戻します。実行中の文字は、これから組む処理で設定します。
