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 との会話イベントの追加
このダイアログシステムを応用して、ストーリーイベントやアイテム説明など、さまざまな場面で活用できます!
1
100%