How to properly set Dynamic Ui dialog Panel/RichText

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By MinouPitou

Hey, I’m new to Godot (1-2 months) and I’m trying to do a dynamic dialog system.
To clarify, I want the text to appear one char at a time, with was easily implemented using the visible_character property of the rich text label node (following heartbeast tutorial on dialog). the thing is that I want the dialog box to appear on top of the player talking(done) and I wanted it to slowly grow horizontally as the text appears and vertically when a certain threshold is met horizontally.

I’m struggling on that last part. since my font is not monospace and I use BBCode (some of the text will not appear but still exist in the string) it is hard to get a consistent solution.

So the question is, what the best approach to this. here some photo/video of what’s happening and my tree.

the tree: Imgur: The magic of the Internet
the behaviour: Imgur: The magic of the Internet


onready var text_label = $RichTextLabel
onready var panel = get_parent().get_node("Panel")
onready var timer = $Timer
var text = ["Hey, this is a [wave]dialog box[/wave] . I know, it's pretty [color=blue]cool[/color] right?","i hope it is working [rainbow]fine[/rainbow].","it's nice outside isn't it?"]
var page = 0

func reset():
	text_label.set_bbcode(text[page])
	text_label.set_visible_characters(0)
	margin_left = 2
	margin_right = 2
	margin_top = -20
	margin_bottom = -10
	panel.margin_top = -22
	panel.margin_bottom = -8
	panel.margin_right = 1
	panel.margin_left = -1

func _on_Timer_timeout():
	if text_label.get_visible_characters() < text[page].length():
		text_label.set_visible_characters(text_label.get_visible_characters()+1)
		if text_label.get_visible_characters() <= 30:
			margin_left -=1
			margin_right += 1
			panel.margin_left -= 1
			panel.margin_right += 1
		if text_label.get_visible_characters() % 40 == 0 and text[page].length() - text_label.get_visible_characters() > 40 :
			margin_top -= 10
			panel.margin_top -= 10
	else:
		timer.stop()
		if page == text.size()-1:
			page = 0
			panel.visible = false
			visible = false
		else:
			page += 1

So I didn’t do a lot of UI in Godot so far (obviously) and what I do is that I change the margin of my rich text label and panel each time a new char is added(or each time my timer timeout).

:bust_in_silhouette: Reply From: Themarly

Hi, I’m also new to Godot. I am also interested in this question