hello, hm... maybe a ask this before but I don't find it. So i post this : i make a tchatbot actually, and... it's look works but i would like to give a good "ui" to my program, like a real "sms interface".

I used this to begining my program, to be sure that the last text is always on the screen :

here is a screenshot of my program on my phone (there's only 'text', on one side (on the left)): (i use so, a richtextlabel to display the dialog)

and this is what i want to make (bot answer is on the left, user answer is on the right):

or that (all answer are on the left):

i have no idea how to do that. Any idea? I continue to looking for a template/solution/script...

thanks for your advice :) Alain

For the bot answer on the left, user answer on the right, you probably will need to use a VBoxContainer node and then instance "text-bubble" nodes for each of the messages. These text-bubble messages would then have a Panel node or something similar for showing the border, and then a RichTextLabel or Label to show the text. To make it go left or right, in code you'd probably need to pass a boolean or similar to tell it which side to style itself on, and then adjust the left/right margins accordingly.

For all answers on the left, I think it would be similar but without needing to pass a boolean or anything, you could just always have the text-bubble messages on the left.

I didn't find any examples online, but I can try to make a quick example if you want. Just let me know if it would help :smile:

You would use Control nodes (or Nodes that inherit from Control) to design an interface. Read this if you haven't seen it yet: https://docs.godotengine.org/en/stable/getting_started/step_by_step/ui_introduction_to_the_ui_system.html

Basically you can create a VBox (vertical box) with HBoxes inside (horizontal box) and then inside that you have your class you create for a text bubble. The bubble can have variables you set (like if the image is on the left or right, the avatar to display, the text itself, etc.).

5 days later

Hello TwistedTwigleg and cybereality and happy new year xD. So thanks for your help. In fact, cybereality, i don't understand how it works and... argh, and TwistedTwigleg, if it's possible to have an example i would be very cool xD. With the tutorial "chatbox ui" i use already a hbox and a vertical box. But after... it's strange for me . i was in front a wall xD

Happy new year! :smile:

I made a quick example. It's a little rough, but hopefully it is helpful in showing one way to get something similar to what you are looking for.

Hello, so i tried to put your script in my project and... It WoRkS :D Yeaaaah, Thanks !

I keep the "old" display on the background to verify that it's the same things at the same moment, and i add a script to be sure that the scrollcontenaire show always the "last text" entered, and stay "at the bottom" x) and it works to.

Only things to fix, when a text put in the label has more than 1 line, the bubble don't resize with it.

So, i think about a solution but i don't know, maybe if i count the number of the lines of the label, i can update the size of the bubble?

maybe a script like that? :

if label.number_of_the_line == 1:
	panel.height = 32
if label.number_of_the_line == 2:
	panel.height = 64
if label.number_of_the_line == 3:
	panel.height = 96

or something like that... (i choose "Autowrap" in the label's property, to be sure that the text displayed on a lot of line, and not one only)

I will see it this weekend, quietly x)...

Sorry about the delay.

I'm glad it works! For the text line issue, what I would recommend doing is storing a reference to the font you are using and then use the get_wordwrap_string_size function to tell what size you'll need on the Y axis. Then you can change the height of the panel accordingly.

I do not think this will work directly, but the code for resizing should be something similar to this:

extends Label
export (Font) var label_font

func _ready():
	min_size.y = label_font.get_wordwrap_string_size(text, rect_size.x).y

Hello, no problem ;) and thanks for your advice TwistedTwigleg x). since i posted my message, i find a little solution and it seems to be ok :

i put this :

if ui_label.get_line_count() == 1:
	ui_panel.rect_size.y = 46

etc, etc...

And it works... hm... 9 times / 10 xD because the scroll of the VBox go down of 1 "for example" each time. When there is one line, it's ok, but when there is 2 lines, it go down of 1 too... so the new bubble, if it contain 2 or 3 lines, is not totally visible. i must find how to scroll down of 1, or 2, or 3... sorry for my english xD

i will see if "Vector2 get_wordwrap_string_size ( String string, float width ) const" is better and if i can use it :)

no it's ok finally : i just put up, the elements on the scene.... and... that's all x)

a year later