Godotでのダイアログシステムの作成チュートリアル


Godot Engine バージョン4.3

このチュートリアルでは、Godot 4.3 を使用して、ゲーム内で会話やナレーションを表示するダイアログシステムを作成する方法を学びます。プレイヤーが特定のイベントをトリガーすると、テキストが1文字ずつ表示される仕組みを実装します。





1. ダイアログシステムの基本構築

1.1 シーンの準備




ノード構成

1. Dialog (Panel)
役割: ダイアログ全体を管理するUIコンポーネント。
タイプ: Panel
機能: ダイアログの背景を表示し、子ノードを配置するコンテナ。
2. Character (TextureRect)
役割: キャラクターのアイコン(顔グラフィックなど)を表示する画像。
タイプ: TextureRect
機能: キャラクターの立ち絵やアイコンをダイアログに表示。
3. VBoxContainer (Container)
役割: ダイアログのテキストやキャラクター名を整理するコンテナ。
タイプ: VBoxContainer
機能: 縦方向に子ノードを整理し、テキストを整列。
3-1. Name (Label)
役割: キャラクターの名前を表示。
タイプ: Label
機能: ダイアログで話しているキャラクターの名前を表示。
3-2. Content (Label)
役割: ダイアログの本文を表示。
タイプ: Label
機能: セリフやメッセージを表示し、テキストのアニメーションも担当。
4. TextDelay (Timer)
役割: テキスト表示のタイミングを制御。
タイプ: Timer
機能: 一文字ずつ表示する演出を行うためのタイマー。
5. Next (AnimatedSprite2D)
役割: テキスト表示が終わり、次に文章の合図をする
タイプ: AnimatedSprite2D
機能: テキスト表示が終わると表示される。

動作の流れ

  • Dialog が表示され、Character にキャラクターの顔が表示される。
  • Name にキャラクター名をセットし、Content にテキストをセット。
  • TextDelay が動作し、Content のテキストが一文字ずつ表示される。
  • Next テキスト表示が終わると表示される。

1.2 ダイアログスクリプトの作成

次に、Dialog にスクリプトを追加し、テキストを1文字ずつ表示する処理を実装します。

スクリプト (dialog.gd)

extends Panel

# ダイアログウィンドウのUI要素を取得
@onready var character_name = $VBoxContainer/Name # キャラクター名表示用
@onready var content = $VBoxContainer/Content # ダイアログ本文表示用
@onready var next = $Next # テキスト表示が終了合図
@onready var text_delay = $TextDelay # テキストの表示遅延タイマー

# ダイアログ管理用変数
var is_dialog_mode = false # ダイアログモードが有効かどうか
var text_to_display = [] # 表示するテキストのリスト
var current_index = 0 # 現在のテキストインデックス
var current_text_index = 0 # 現在の文字インデックス
var first_time = true # 初回表示フラグ

# テキストの表示遅延処理
func _on_text_delay_timeout() -> void:
if current_index < text_to_display.size(): # まだ表示するテキストがある場合
if current_text_index < text_to_display[current_index].length(): # テキストを一文字ずつ表示
content.text = text_to_display[current_index].substr(0, current_text_index + 1)
current_text_index += 1
else:
text_delay.stop() # テキスト表示完了後、タイマーを停止
next.visible = true # テキスト終了合図を表示
else:
text_delay.stop() # すべてのテキストが表示されたら、ダイアログを閉じる
hide()
is_dialog_mode = false

# ユーザー入力処理
func _input(event: InputEvent) -> void:
if event.is_action_pressed("talk"): # 「talk」アクションが押されたとき
if current_index < text_to_display.size(): # まだ表示するテキストがある場合
if current_text_index == text_to_display[current_index].length() || current_text_index == 0:
# 次のテキストを表示するための準備
text_delay.start()
current_text_index = 0
current_index += 1
next.visible = false # テキスト終了合図を隠す
else:
# 現在のテキストを即座に全表示
content.text = text_to_display[current_index]
current_text_index = 0
text_delay.stop()
next.visible = true

# ダイアログを開始する関数
func start_dialog():
content.text = "" # テキストをクリア
current_text_index = 0
current_index = 0
show() # ダイアログウィンドウを表示
text_delay.start() # テキスト表示タイマーを開始
is_dialog_mode = true



2. ダイアログの使用方法

例えば、プレイヤーがNPCに話しかけたときにダイアログを表示するには、以下のように実装します。
func _on_npc_interacted():
var dialog_panel = get_node("/root/Main/Dialog") # ダイアログパネルの取得
dialog_panel.text_to_display = [
"こんにちは!",
"この村へようこそ。",
"何かお困りですか?"
]
dialog_panel.start_dialog()
このスクリプトを NPC にアタッチし、プレイヤーが NPC と対話できるようにします。



3. まとめ

このチュートリアルでは、以下の内容を学びました。
  • ダイアログパネルの作成
  • テキストを1文字ずつ表示する処理の実装
  • NPC との会話イベントの追加

このダイアログシステムを応用して、ストーリーイベントやアイテム説明など、さまざまな場面で活用できます!
最終更新日: 2025/02/06 01:50

コメント