[UMG] Inconsistent spacing between children in game viewport

This feels like a relatively simple problem but I’m unable to find a solid answer anywhere.

I’ve created a Horizontal Box that has several boxes/images as children with 2px padding on their sides. The spacing in the UMG designer displays as intended but when it’s viewed within the game viewport there are clear variances in spacing. Different resolutions give different results.

270050-spacing.png

I’m going to guess it’s trying to figure out how to stick to a grid when the resolution steers away from its ideal.

Are there best practices when trying to mitigate this issue or potentially a way to completely fix it?

Are you testing it in a standalone window? Toolbars and such will reduce the viewport resolution when you run it in Selected Viewport. My viewport is 1513x963 (out of a standard 1920x1080) for example, and distorts UMG badly. The issue disappears when run in a New Editor Window (PIE).

If the user decides to scale the resolution to something weird, they’ll need to deal with the consequences. Also, have a look here for more info:

In the screenshot I was actually running in New Editor Window (PIE) at 1280x720 on a display at 2560 x 1440. I tried it again at 1920x1080 and the issue still occurred. However the problem seems to be irrelevant when viewed in fullscreen.

At this point I’m going to assume my answer falls into DPI as you suggested?

You could try turning off the DPI scaling by setting the curve to 1 across all resolutions and see how it behaves. It should make all widgets be the exact same size in pixels regardless of the resolution.

The downside is that the interface will not scale down. Using anchors (which one should anyway) is must at this point.

I would suggest just setting the contents to fill the container - it looks like you are using a fixed size for the images or whitespace (could be a button) inside.

The result if you set it to fill will be that the image inside is slightly distorted at times, but you probably won’t be able to tell without a print screen and pixel ruler.

Also, what type of grid are you using? There are several and they behave quite differently with contents and sizing…

No, what I was asking is if you are triple sure you are using uniform grid and not grid panel

The other section / issue could be the grid it self

See this as an example.

All that said. After actually looking into it, I think you found a UI bug. there’s 2 pixel being lost in my example with set sizes - and that’s set/measured sizes so you can’t possibly be loosing pixels…

So, looking deeper into this, I think we should flag it as a bug. the internal designer math must be off. it’s constantly 1 pixel off even when shrinking mathematically set grids with hard numbers.

From what I can tell the grid offsets items by 1 pixel to the right - and that throws off contents.

I’ve tried sizing to Auto and Fill. I also have the alignments set to fill for the children inside of the Horizontal Box.

The Horizontal Box is set to size to content.

I’m sticking to a grid of 2 if that is what you’re asking.

Setting the DPI scaling to 1 fixes the issue but UI that doesn’t scale is also not too ideal.

I’m feeling like the path of action here is finding the sweet spot for DPI settings at the games predefined resolution selections.

This ended up giving me part of my answer

The other part being a Windows issue. Having “Enable High DPI Support” in the editor settings in combination with Windows app scaling will cause incorrect window sizes for the PIE window view which creates undesired pixel scaling.

I wasn’t using a grid in my example so you may or may not be running into the same issue.