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.
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.
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.
It is such a mess… UMG editor displays one thing, then in game and in PiE it’s completely different, oblivious to some types of paddings, and just plain incorrect with some other types of paddings. And this is only a top of the iceberg. Then you want to see how it looks in different resolutions, in windowed, fullscreen, and paddings are just random there! And then you want to scale dpi and just stop your efforts of fixing paddings. How could you implement it in a way that scaling everything 2X increases the top padding by 3 pixels and bottom padding by 1 pixel?
UMG is so convenient to use, but it needs some serious refactoring.
