吹き出しとか会話画面とかメッセージ系のものを作ってみたい！【Godot 4.7】

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

extends Node2D

@onready var interaction_area: Area2D = $InteractionArea
@onready var rich_text_label: RichTextLabel = $RichTextLabel

func _ready() -> void:
	interaction_area.body_entered.connect(change_message)
	pass # Replace with function body.

func change_message(body: Node2D) -> void:
	if body.get_groups().has("Player"):
		rich_text_label.set_text("仲間・・・？")

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

func _draw() -> void:
	# 吹き出し尻尾、色を設定していく
	var fukidashi_point :PackedVector2Array
	var fukidashi_left: Vector2 = rich_text_label.position + rich_text_label.size * 0.5 + Vector2.RIGHT * 20
	var fukidashi_right: Vector2 = rich_text_label.position + rich_text_label.size * 0.5 + Vector2.LEFT * 20
	fukidashi_point.append(fukidashi_left)
	fukidashi_point.append(fukidashi_right)
	# TODO:なんか尻尾の位置が思ってたところよりもずれるんだよなぁ・・・何なのだろうか？座標とかなんだろうけど、ローカルグローバル？？？
	fukidashi_point.append(fukidashi_shippo.position)
	
	draw_colored_polygon(fukidashi_point, fukidashi_color)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

extends Node2D

@onready var interaction_area: Area2D = $InteractionArea
@onready var tweet_pop_up: Node2D = $TweetPopUP
@export var fukidashi_color: Color = Color(0.6, 0.6, 0.6, 1)

func _ready() -> void:
	# プレイヤが近づいたことを検知するイベントに紐づける
	interaction_area.body_entered.connect(tweet_pop_up.show_message)
	interaction_area.body_exited.connect(tweet_pop_up.close_message)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

extends Node2D

@onready var rich_text_label: RichTextLabel = $RichTextLabel
@onready var fukidashi_shippo: Marker2D = $FukidashiShippo

@export var fukidashi_color: Color = Color(0.6, 0.6, 0.6, 1)

var tween: Tween

func _ready() -> void:
	# 色の設定
	var new_stylebox_normal :StyleBoxFlat = rich_text_label.get_theme_stylebox("normal").duplicate()
	new_stylebox_normal.set_bg_color(fukidashi_color)
	rich_text_label.add_theme_stylebox_override("normal", new_stylebox_normal)

func _draw() -> void:
	# 吹き出し尻尾、色を設定していく
	var fukidashi_point :PackedVector2Array
	var fukidashi_left: Vector2 = rich_text_label.position + rich_text_label.size * 0.5 + Vector2.RIGHT * 20
	var fukidashi_right: Vector2 = rich_text_label.position + rich_text_label.size * 0.5 + Vector2.LEFT * 20
	fukidashi_point.append(fukidashi_left)
	fukidashi_point.append(fukidashi_right)
	fukidashi_point.append(fukidashi_shippo.position)
	
	draw_colored_polygon(fukidashi_point, fukidashi_color)
	

func show_message(body: Node2D) -> void:
	if body.get_groups().has("Player"):
		rich_text_label.set_text("仲間・・・？")
	# アニメーションをつける
	if tween:
		tween.kill()
	tween = create_tween()
	tween.set_parallel()
	tween.tween_property(self, "scale", Vector2.ONE, 0.3)
	tween.tween_property(self, "modulate", Color(1,1,1,1), 0.3)
	
func close_message(body: Node2D) -> void:
	if body.get_groups().has("Player"):
		rich_text_label.set_text("やはり孤独・・・")
	# アニメーションをつける
	if tween:
		tween.kill()
	tween = create_tween()
	tween.set_parallel()
	tween.tween_property(self, "scale", Vector2.ZERO, 0.3)
	tween.tween_property(self, "modulate", Color(1,1,1,0), 0.3)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

extends Node2D

@onready var interaction_area: Area2D = $InteractionArea
@onready var tweet_pop_up: Node2D = $TweetPopUP
@export var fukidashi_color: Color = Color(0.6, 0.6, 0.6, 1)

signal talked_by_player #プレイヤーに話されたときに発火する
# TODO: こんな風にnpcとかの方にメッセージを持ってあげてイベントと一緒に渡してあげたほうが良いか？どういう構成良いんだろうぇ・・・
var dialog_messages: Array[String] = ["こんにちは","この世界一人孤独かと思っていたけど・・・","自分以外人間やはりいたんだね・・・","私に話しかけたら最後","動けないでしょう？","もう逃がさないよ"]

func _ready() -> void:
	# プレイヤーが近づいたことを検知するイベントに紐づける
	interaction_area.body_entered.connect(tweet_pop_up.show_message)
	interaction_area.body_exited.connect(tweet_pop_up.close_message)

func _process(_delta: float) -> void:
	# 攻撃ボタンが押されたときにプレイヤーと接触していたかを調べる
	if Input.is_action_just_pressed("attack"):
		for body in interaction_area.get_overlapping_bodies():
			if body.get_groups().has("Player"):
				# 会話されたイベントを発火する
				talked_by_player.emit(dialog_messages)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

extends CharacterBody2D

@onready var anim = $AnimatedSprite2D
@onready var attack_sprite = $AttackArea/Sprite2D
@onready var attack_area = $AttackArea
@onready var npc: Node2D = $"../NPC"

var can_attack = true
var can_action = true #メッセージ表示イベントなど、動けない状態にするときに切り替える

const SPEED = 200.0
const JUMP_VELOCITY = -400.0
const PUSH_FORCE := 120.0
const HIT_TRANSFER = 1.0
const HIT_DECAY = 1200.0

var knockback := Vector2.ZERO # 受け取った勢い

@onready var dust_effect: Node2D = $DustEffect # 土煙エフェクト

func _ready() -> void:
	# npcに話しかけたときに動けないようにする
	npc.talked_by_player.connect(
		func(_strings: Array[String]):
			can_action = false
	)
	
func _physics_process(delta: float) -> void:
	
	# TODO: 本当は操作系の処理を読んでいるところをまとめてあげて、そこでこの判定で止めたりするっていうのが正しいんだろうなぁ・・・これだ関係ないエフェクトと何とかが後続でいたとしても止めてしまうことになるから・・・
	if can_action == false:
		return
	
	if Input.is_action_just_pressed("attack") and can_attack:
		attack()
	# Add the gravity.
	if not is_on_floor():
		velocity += get_gravity() * delta

func set_can_action() -> void:
	can_action = true

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

extends Node

# TODO:まあ参照を持たないとイベント取ることもできないか・・・うーん・・・とはいあんまり持ちたくないのだよな・・・実際にはみんなどうしているのだろうか。グループで取ってきて設定しているとか？？
@onready var npc: Node2D = $NPC
@onready var canvas_layer: CanvasLayer = $"../CanvasLayer"
@onready var player: CharacterBody2D = $Player

func _ready() -> void:
	# メッセージシグナルを受け取ったときにUIの方のメソッドを呼びだすようにする
	npc.talked_by_player.connect(canvas_layer.call_set_text)

# メッセージの表示が終了した際に呼び出される
func message_finished() -> void:
	# プレイヤーを移動可能な状態にする
	player.set_can_action()
	

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

extends CanvasLayer

@onready var message_area: Control = $MessageArea
@onready var world: Node = $"../World"

func _ready() -> void:
	# メッセージが呼び出し終わったらプレイヤーの方のノードのメソッドを呼ぶ
	message_area.message_play_finished.connect(world.message_finished)

# ダイアログメッセージ表示のコントールのメソッド呼び出す
func call_set_text(strings: Array[String]) -> void:
	message_area.set_text(strings)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

extends Control

@onready var text_area: RichTextLabel = $TextArea
var is_now_messge_playing: bool = false

signal pressed_buttom_while_message_playing
signal message_play_finished

func _process(_delta: float) -> void:
	# テキスト再生中にボタンを押されたらイベントを発火する(次のメッセージを表示する)
	if is_now_messge_playing and Input.is_action_just_pressed("attack"):
		pressed_buttom_while_message_playing.emit()

# メッセージをUIに表示する
func set_text(strings: Array[String]) -> void:
	# もし既にメッセージの再生中であれば、メソッド呼ばれても後続の処理に進まない
	if is_now_messge_playing:
		return
	
	# メッセージの再生を開始する
	is_now_messge_playing = true
	
	# UIが非表示状態であれば表示に切り替える
	if self.visible == false:
		self.set_visible(true)
	
	# メッセージの表示切替を行う
	for s in strings:
		text_area.text = s
		# ボタン押されたら次のメッセージを表示する
		await pressed_buttom_while_message_playing
	
	# メッセージの非表示、再生を終了する
	self.set_visible(false)
	is_now_messge_playing = false
	message_play_finished.emit()