Download

Best Way to Handle Widgets and Screen Resolution

We set our default camera aspect ratio is 1.77.

I set the hud size to 720p which should be a ratio of 1.77. What is the best way to make sure whatever we place in the widget, aligns to the screen and doesn’t drift into the black bar area?

I am using the anchors, but that is not doing the trick.

Thanks for any help!

anchors should do the trick … I use them and works for me in different aspect ratios devices (android)

can you post some screenshot of your offending widget where we can see the anchors ?

We are not actually setting the resolution of the viewport, but rather, we are setting the aspect ratio of the camera. So depending on the client screen resolution, there may be black ‘theatre’ bars on the top and bottom of the screen.

If you anchor something to the top in this situation, it’s distance from the top will remain the same regardless of those black bars. So it is impossible to predict where the anchored element will end up on the screen.

This is probably hacky, but you could try making a border or size box or similar on your canvas, and set it to the proper aspect ratio, anchoring it to the 4 corners of the canvas. You could then anchor the elements you need to the border.

I kind of doubt this will work, but it’s the best I can think of.

This same thing was suggested by UMG developer Nick Darnell. I believe he also recommended wrapping with a scale box as well.

This is actually a neat idea. I will give that a shot. Thanks for the reply.

Standard camera and widget can adjust thyself to fit the “screen”

Resizing the viewport of A standard camera: “watching a palace.”
EX: the field of view of the camera will show you more or less of the palace,
you could be able to see — the top of the palace with the sky— or just the front door and floor.

Resizing the viewport of Widget : with elements , One anchored on top and One anchored on left.
EX: The elements will change scale accordingly and they will keep themself loyalty to the anchored side.
Messing with viewport size you will be able to get some problem of “Layout”

To block both the problem or features. -----------------------

CAMERA:
Select the camera component , go in the details under camera options and set true to Constrain Aspect Ratio.
Now just above there in camera setting you will be able to set the Aspect Ratio yourself.
This will prevent the camera to show more or less of the “palace”.
instead of changing the field of view, unreal will add some black areas.
WIDGET:
But now the widgets anchored to the “screen” will float in the black area.
Messing with the layout and scale of the elements.
So , to fix the widgets “inside” the camera field of view:

Open your widget and Wrap all you have in a canvas (if you already have a canvas as root , leave it so)
So parent all your elements under a canvas “OR” right click and choose “Wrap” canvas…
You should have a canvas that contain all childs of your widget.

Now Wrap that canvas in a ScaleBox.
And than again , wrap the canvas in a SizeBox.

Now you should have this

WIDGET_NAME
-Scalebox
-SizeBox
CanvasPanel

Select the size box and go in the details / Child layout / and active Width override and Height override.
You have to set these two so that have the same aspect ratio of you camera.
16/9 = 1.7777 , so any resolution that give you 1,7777 will fit.

CONCLUSION----------------------------------
i have locked the camera to a precise aspect ratio.
To any device that will not have the perfect fit , unreal will add black bars to fill the screen.
Locking the widget inside a scale box, and a size box with the same aspect ratio, will keep the widgets inside the Camera field of view and out of the black areas.

1 Like

It works great, thank you very mush!