Why can't I center my UMG widgets?

I’m trying to place a smiley face in the center of my screen as determined by dividing the viewport size by half:

As far as I can tell, this is right, but it behaves both incorrectly and inconsistently: if I play it as-is, the widget will never appear within the viewport. If I don’t child the widget to a panel, and simply add it to the viewport, it will spawn in screen center when played in the editor, but in the top-left corner when compiled and run as a separate exe.

So am I doing something obviously wrong here? I can’t possibly believe that orienting UI in the viewport is this difficult and bug-prone if you’re doing it correctly.

1 Like

Hello,

I have set up a simple test in which I created a widget containing an image and set its position to the center of the screen inside of the level blueprint.

This is what my widget looks like. I have an image that I’ve set to 120x120. I’ve set its position to 0,0 and anchored it to the center. Then, I set the size of the Canvas Panel by changing Fill Screen to custom, and set it to the same size as my image to keep things neat.

After this, on my Level Blueprint’s Event Begin Play I create my widget, add it to the viewport and then set its position to be the viewport size divided by 2. This centered my widget to the center of the screen.

Feel free to ask any questions regarding the setup.

1 Like

Thank you for the kind and very thorough response! :slight_smile:

There’s one difference between your version and mine, which I suspect is the root of the problems I’m having: I need to be able to delete and respawn the widgets I’m creating without touching the rest of the UI, so I’m spawning them inside a specifically-designated canvas, so that I can always “reset” that part of the UI by running the ClearChildren node on that canvas.

As illustration, here is the widget I’m currently using to draw the smiley face, it’s just a text block in the top-left corner of the default canvas:

Next, here is the sub-canvas I want to child each smiley to, in my main UI:

Finally, after deriving Center X/Center Y as discussed, I child the widget to the canvas:

Doing it this way never results in the smiley appearing on screen, and my assumption is that somehow when I try to center the widget, it’s actually moving the entire canvas, and always keeping the text block off-screen… perhaps there’s a different object I should be childing the text widget to, instead of a canvas panel?

I have noticed that you haven’t hooked up your Return Value to your Content pin in the Add Child to Canvas node. Currently, you are not adding anything to the canvas. This could potentially be your issue. Go ahead and hook those pins up and let me know if that changes anything.

So I can’t believe I missed that, good catch! :slight_smile:

Actually wiring the node correctly solves 90% of the problem, now it does spawn, but it’s positioning itself in a weird way: to verify this has nothing to do with my second canvas, I added it as a child to the main canvas (the default background in every new widget), and set the coordinates thusly:

It appears, but it does so at a strange offset, instead of in dead center of the canvas:

Weirdest still is that this only happens when I run it with Play In Editor- if I run it as a standalone game, the widget never appears at all, regardless of whether I’m in fullscreen mode, default window mode, or manually drag the window around to change the viewport size.

What you’ve done here is that you’ve centered your Smiley Face Widget’s Canvas Panel, not the Smiley Face Text itself. So what you need to do is go into your Smiley Face widget and center the Text. Anchor it to the center of the screen and set the position of the text to 0,0. Give that a shot and let me know how it works.

Thank you so much for the kind replies- this is close enough that with a few days, I’m sure I can get it working :slight_smile:

One last thing if you don’t mind: is there any way to get the size of a widget (specifically a canvas panel) in the same way you would get the viewport size? I’m trying to place my widgets dynamically inside the mid canvas, and viewport coords won’t translate 1:1.

Have you tried to use the ConvertWorldLocationtoScreenLocation node to convert the viewport coordinates to the screen coordinates you need to place your widgets?

Set up the widget as follows:

Parent it to your main widget

Anchor it to 0.5 0.5

Set Alignment to 0.5 0.5

Set position to 0 0

Anchor 0.5 0.5 will make the center of the coordinate system the center of the screen.
Alignment to 0.5 0.5 will make the center of the widget the center of itself, therefore positioning the widget center of the widget in the center of the screen.

Position 0 0 will then translate it by nothing, leaving your widget in the center of the screen.

1 Like

Nice, thank you! It was the anchors that I had to set after creating the widget and adding the viewport.