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 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) 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).
Right now I’ve just anchored 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 in 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.
The bottom bar itself 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.
I’ve attached an image of the blueprint of the HUD to this post. I would attach more, but I hit the attachment size limit.
The image is of the blueprint of the HUD (to show you the initial design), which is 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 when these issues started occuring 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 onto the black bar.
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.
What would you guys recommend for updating the blueprint such that the bottom bar will scale to match any size window without leaving gaps?