UMG - Auto Text Change Position

Development Programming & Scripting UI
, , ,
1

Hey Guys,
So what i wanted to ask was how i can make my strings in my widget adjust their position automatically.

What i mean by that is my hud may display different strings at the same time and when second string will appear i want it to change its position automatically and go down but when the first text disappears the second one will take its position. just like in the Game “ARK”.

2

Here Is An Example :

239623-ark.png

3

You want to add a new line of text into a container. This will push next line.

However, since you cannot insert at the beginning of a widget container but only add to the end, your new text would appear below rather than above the previous string.

You’ve got 2 solutions here.

A:

  • Operate on an array of strings instead, inserting a new string at index 0
  • Populate the list based on the array - bare in mind, here you will need to clear and repopulate the whole list

B:

  • flip the container 180 degrees
  • flip any widget you add by 180 degrees as well

Both will work.

4

can i get a example of how the “B” part is done. you can give it when you get time

5

(A) is a better choice if want to keep the log and let players look at it if they choose to.

(B) is hacky but here it goes:
You will need 2 widgets for this:

Widget 1 - a line of text:

  • create a widget with a Text Block and a string variable Exposed on Spawn
  • bind the text block to that variable
  • set Render Transform angle to 180
  • ensure it looks crazy enough :wink:

239636-upsidedowntext.png

Widget 2 - the container:

  • a canvas with a Vertical Box rotated 180 degrees
  • mark the VB above as variable so we can get a reference

And then:

  • spawn the container
  • whenever you want a new line of text, get reference to the container’s Vertical Box and add a Widget 1 as a child
  • feed text to the exposed variable
  • check how many elements are in the list
  • if you’re showing too many elements, delete the first one

239639-addchild.png
239639-addchild.png1467×502 138 KB

End result:

https://gyazo.com/d60bac661e8d6fabc2296f781d3eabb7

This can be vastly improved. Put together in a hurry. I don’t like this method, feels so dirty.

6

Long Story short u are basically adding childrens to the vertical box right? i got the concept. ill mark this as resolved