I realized today that none of my widgets are actually filling the screen. They all have a gap on the right hand side. Most information I’ve dug up on this topic relates to Centering the widget but as far as I can tell the widgets are indeed centered. To demonstrate this I created a 1920x1080 image placed at coordinates 0,0. It fills the widget screen perfect but on Play in viewport you see it doesn’t actually fill the screen even though my monitor settings are set to 1920x1080. The “Screen Size” option is 1920, Fill size is 1920 and image is 1920. I have fixed the issue by un-centering it and/or stretching the image out past the widgets fill screen which works but it throws me off a bit because I am now making all widgets at roughly 2000x1080 which I am sure will come back to bite me. Is this a bug or am I missing something?
Hi Allenheathx,
I suggest to drag the lower right corner of your anchor widget to the bottom right of the visible space, so that your anchor fills the whole screen. Then reset the position and size x/y to 0. Your picture should now fill the whole screen independantly of the actual screen resolution, thus your UI is useable for customers with a screen resolution different from 1920x1080.
For more information check: UMG Anchors in Unreal Engine UI | Unreal Engine 5.2 Documentation
and UMG UI Designer for Unreal Engine | Unreal Engine 5.2 Documentation
Thanks Rabbit, that worked. Little weird that that isn’t the default.
Actually filing the whole window with the anchor is stretching the images to fill out that gap. Unless my resolution isn’t actually 1920 x 1080 and my graphics card is lying to me. Somewhere the 1920 chain between my graphics card-photoshop-unreal is broke and it seems to be the Widget module doing the breaking (photoshop, aftereffects, premiere all take the 1920 images as 1920). It seems unreal thinks it has to stretch a 1920 image so it “anchors” to a 1920x1080 widget. If I make the whole hud at 2000-1080 it all lines up in the 1920x1080 widget without the need of any stretching. Every other program I have takes it as it’s actual size though.
Not sure but is the Game/Editor in the Lower Image actually running in Fullscreen? Since I can see the Window-Taskbar I would assume that the Editor/Game is not actually running at 1920*1080 but I could be mistaken.
Your windows taskbar is taking 40 pixels, so your actual game display is 1920x1040, which shrinks your image down to 1849x1040 to compensate.
Doh sneaky windows task bar. That must be my point of confusion. The gameplay view isn’t doing any scale compensation for the loss in height from task bar (it must be 1920x1040 in PIE) while the HUD takes width down to 1849 to compensate for the loss in height from task bar to keep it even.
The lesson is: make your HUD adjust to any screen ratio and resolution. In a canvas, use the anchor settings. when using overlays and other containers, properly configure the child component(s) alignments. Use the “Screen Resolution” drop down to preview your widgets in different resolutions.
You guys, i spent over an hour trying to figure this out when finally i was reading official UE4 documentation and a saw something so easy. It is all about your anchor point. You know how you can choose which corner of the screen to be anchored? Well open the anchor menu, scroll down, and there will be stretch option. There is an option to stretch to full screen no matter resolution. Very helpful for fullscreen widgets like loading screens and such. Hope this helps.
Thank’s . Followed your guide and fixed my problem. I would like to stick some pictures for others.
