Currently am working on an RTS project in UE4, and the current HUD design we have, while functional, fails to scale at larger (specifically, wider) resolutions.
While I’m no stranger to UE4 Widgets, I am not familiar with all the ins-and-outs of anchoring and scaling for making widgets properly scale for different screens.
I’ve tried several different ideas to try to get the different widget sections to scale properly, to no avail.
Closest other thing I tried: centering the anchor on the bottom left of the bottom-middle bar, then pulling the ‘leaves’ (i.e. offsets) out to match its positioning in the window, so it would hopefully scale to retain that same area of the window on different resolutions. Did the same with the minimap (on the left, pictured below) and the buttons (on the right).
The result of this method: Thinner windows cause the bar to be ‘covered up’ by the minimap on the left and the buttons on the right. Larger resolutions cause gaps between it and the minimap (on the left) and the buttons (on the right).
====
I’ve also tried anchoring the middle bar directly to the bottom left corner (with no offsets) and made the buttons a child of the bar so it won’t ‘squish’ over it.
This results of this method: The buttons on the right getting cut off on thinner resolutions, but not the minimap or the bar. On wider resolutions doing this results in one gap showing on the right, past the buttons.
At wider resolutions (which I got from a colleague, don’t have an ultrawide monitor to try it myself), a wide gap shows to the right of the buttons, when using this method.
====
Current method being used: Minimap is anchored as pictured, bottom bar is anchored to the bottom left corner, and buttons on the bottom right are anchored to the bottom right.
Results of this method: The buttons on the right ‘squish over’ the bottom bar on thinner resolutions. On wider resolutions, the buttons on the right have a gap between themselves and the bottom bar.
====
Additionally, the bottom elements (minimap included) only seems to scale with taller windows - playing in editor and shortening/heightening the window is the only thing that seems to scale the size of these elements. Changing the width doesn’t seem to effect their scale at all.
Here’s a pic of our HUD:
It’s created in the Widget Designer set to 4K Digital Cinema (4096 x 2160).
Initially I created it in 16:9 at 1080p, but scaled it up to 4K when these described scaling issues started occurring in hopes that this would reduce ambiguity at lower resolutions.
====
To recap, with the current setup:
When I launch at 1920x1080, there’s minor ‘squishing’ of the buttons (on the right) onto the black bar (in the middle).
With wider setups, there’s a gap between the black bar and the buttons.
What would you guys recommend for updating the blueprint such that the bottom bar will scale to match any size window without leaving gaps?