*VIDEO* Widget scaling w/ zoom

Development Programming & Scripting UI
, , , , ,
1

I searched for this question before asking for help myself but couldn’t find an answer. I’ll try to be as precise as possible so I don’t get anyone answering my question with a question. I’ve attached a video at the end that will hopefully fill in any gaps I may have left.

I’m at the very beginning of creating a top-down RPG game. I currently have just one enemy running around in the example map, a “Lv. 1 Goblin”. I put a widget over its head indicating its name and health, however when I zoom in my camera the widget scales down and overlaps the enemy’s mesh. This simply doesn’t make any sense to me since, for one, it doesn’t do it when the “Space” is set to “World”, and two, the enemy isn’t scaling down when I zoom in?? So why would the widget attached to the same character scale???

Another question while I’m here. Does anyone know how to edit the length of the “health bar” (Progress Bar) on the widget? It’s underneath the “Text Box” in the “Vertical Box” and the size cannot be edited. I could edit the “Draw Size” on the Widget Component of the enemy Character Blueprint but I can’t make the Progress Bar smaller than the enemy name because the enemy name will start to get cut off.

Any help is appreciated, thank you in advance.

1 Like
2

When Space is set to Screen, the widget is always the same size regardless of its position in the world. There is no depth. Position in the world only dictates where to draw the widget on the 2D viewport, but then the widget is drawn as a 2D widget like it’s part of the UI.

When space is set to World, the widget is drawn in the world kinda like a decal. Then the world is rendered onto your screen. If the widget is very far it will be unreadable, if it is very close it may take up the entire screen, just like a texture on a wall. Additionally, if widget is occluded by something, then it will be properly drawn occluded. There is no occlusion in screen space.

Regarding progress bar length, you can wrap it in a Size Box to specify a desired min/max width.

1 Like