My goal is to have a background image for a main menu that is compatible with wider aspect ratios. My idea was to create an image that is 32:9 (3840x1080) and have it fill the whole screen vertically while keeping its aspect ratio. So if you’re playing on 1920x1080 you only see the middle part, while when playing on 3840x1080 you see the other parts aswell. I’ve created an image to test this:
I simply anchored it in the middle of the screen and put its size to 3840x1080. Now if the canvas is 1920x1080, the orange part (1920x1080, 16:9) should cover the entire canvas like it does in the preview from the editor.
But when I launch the game and press F11 to get into fullscreen, I see this:
Do you have the taskbar visible during your testing?
If so, try going full screen with SHIFT + F11 instead.
I don’t know of any bugs related to something like that, it should work.
You can also set the image to stretch so it covers all the space no matter the aspect ratio.
My taskbar is not visible, I’ve tried Shift+F11 just in case but it makes no difference. The second image is my full screen.
I’ve though about stretching too but the problem is that if I stretch it to fill the whole space it will compress the 3840x1080 image to 1920x1080. My goal is for 16:9 players to just see the 1920x1080 middle part and if you have wider aspect ratios than that you see the additional space… Otherwise there would be black bars which doesn’t look too good in my opinion.
I really don’t get why the preview in the UMG editor is showing it correctly but my game doesn’t.
So you want to limit the aspect ratio to 16:9 and cover the exceeding space.
In that case, I recommend a different approach.
You can set a container with a 16:9 aspect ratio, and cover the sides with borders set with “Fill” size.
I’ve done that before for a project and that was the best solution I could find.
Widget General Structure
Scale Box Structure
→ Scale Box Settings
→ Size Box Settings
This way you make sure, no matter what, everything inside will be contained in a 16:9 aspect ratio.
Borders should be set to Fill
I suggest you try this if this could work for you.
If this doesn’t work either, then most likely there’s something else wrong with your setup.
I just found the reason for the incorrect rendering in fullscreen.
My viewport resolution (in the advanced settings) was set to 1920x1016, so when I went into fullscreen mode it wasn’t actually 1920x1080 as I thought but rather 1920x1016. It still filled my whole screen so I didn’t notice and only realized when I printed the viewport size to debug.
I now set it to 1920x1080 and the image is rendered perfectly. On fullscreen 1920x1080 the orange box exactly fits the screen like it did in the UMG editor preview.
Still, thank you for taking your time and looking into my problem!
