UMG adaption

Hi! I wonder if there is a way for UMG to adapt, so it looks on every screen resolution the same. I read something about DPI, but i don´t know how to work with it. Screenshots here: https://answers.unrealengine.com/questions/168419/adaptable-menu-with-umg.html

Yes, it’s the DPI curve in Project Settings>Engine>User Interface>DPI Scaling

If you’re in 4.6, there’s a gear icon on the lower right of the designer view in UMG that will open it too.

I find it to be a little unintuitive, but it updates in real time, so if you choose a resolution from the drop-down menu at the top right, you can adjust the curve and see how it’s looking with the designer open.

I still don´t get how to work with it. Isn´t there video?

Not sure, but there’s this: DPI Scaling | Unreal Engine Documentation

Basically the X axis is the resolution of the screen, and the Y axis is the scale.

So you can set the scale for different resolutions - if you wanted it to be twice as small at 1280x720, you’d add a new point on the curve, set “time” to 720, and the value to 0.5

i assume you are using the CanvasWidget for your layout?

Yes i am, i have been playing around with that DPI, and even if i set up keyframe for every resolution in UMG, it is always messed up…

Messes up how?

https://answers.unrealengine.com/questions/168419/adaptable-menu-with-umg.html there are screenshots.

It would appear that you’re using stretched anchors for each button with some additional offset data, and so the way the math works you can actually cause the buttons to get a negative layout size if you’ve embedded position offsets as well as stretching anchor data into your buttons. eg. If you button is always between .75 and 1 of the screen, and has an offset of 100px from those anchor points, then if the size of the screen is small enough, those offsets can cause the buttons to invert themselves - thus the weird borders.

The cure is to just use anchor points, make sure you don’t embed offsets from those anchor points if you don’t want constant pixel offsets.

The best cure is to use a mix of relative and fixed layout. Instead of trying to anchor each button, drop down 1 Horizontal Box, anchor it to the corner, you don’t even need to stretch anchor it. Then just place your buttons in the horizontal box.

So if UGM adapts to screen sizes using the DPI scaling which is easy and works perfect what about when the camera uses aspect ration constrains? Right now it draws over the black bars while the basic HUD canvas respects them pretty well. Is there something we can do about that?

(Sorry to hijack the thread :D)