how display text, like a "sms interface"?

vegetalain

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

TwistedTwigleg

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:

cybereality

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.).

vegetalain

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

TwistedTwigleg

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.

vegetalain

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)...

TwistedTwigleg

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

vegetalain

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 :)

vegetalain

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