TextBlock textVerticalAlignment Bottom Aligned with resizeToFit

Questions
1

Hello again.

I am working on an overhead textbox system for a project.
I am using a multiline TextBlock that has:
textVerticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_BOTTOM;
This is working good and keeps multiline text above the linked mesh

But it doesn’t seem to play nicely with resizeToFit = true;
Which I am using to “shrink wrap” the text. For now to display a bounding rectangle with isHighlighted. But I would like to place a sort of balloon there underneath the text instead once I get it working in future.

I have made an example please see here: https://playground.babylonjs.com/#XCPP9Y#8439
As the string gets longer it is no longer Bottom Aligned over top of the mesh.
Commenting out line 35 fixes the bottom alignment but breaks the resize functionality.

Is there any way to achieve this behavior while staying bottom aligned linked above the mesh?
Please let me know if you need any more details.
Thanks!

2

adding @msDestiny14

1 Like
3

Playing around with this demo a bit I think your best option is to just create the text block defaulted size to whatever you think the largest text string is going to be.

4

Thank you for your reply msDestiny14.
Yes I considered that but it wasn’t quite dynamic enough for what I had in mind.

Anyway here is my hack to make it work: https://playground.babylonjs.com/#XCPP9Y#8485

Okay one more question. How can I place a sort of white background like a rounded bubble beneath the TextBlock in place of my isHighlighted? This system is for an overhead multiplayer chat above an in-game avatar. A sort of social multiplayer game experiment.

Thanks!

5

You can use a rectangle and set the border radius to be more rounded. From there you can add your text control into the rectangle control.

1 Like