It seems strange to me that you can’t specify a percentage value for the X or Y of a vertical box or size box. If you want your UI to be compatible with all screen resolutions, shouldn’t you be able to specify a percentage and then use scale boxes as containers to have everything scale to fill the defined area?
Maybe you can, but I don’t know how? I tried searching Google for an answer a good dozen times and came up empty.
The reason I ask is that ideally, I’d like to be able to divide the screen into two columns and make one of the columns take up 15% of the screen and the other the remaining 85%. All of the offset or size values are exact values in pixels, however, making this seemingly impossible to achieve.
I think you missed the point where we are asking how to size a widget element to a percentage of the screen. Meaning we want it to always take up 25% or 50% or what have you. Not that it always takes up 100% of the screen.
I think what @DaveSF means is that you set the anchors to what he suggested (Both stretch) and then set your widget to take 20% of the screen in the designer. Then if the screen scales up, your widget will still take only 20% of the screen. (By setting it to 20% I mean pixel wise. If your screen is set to 100x100 pixels then your widget is 20x20 pixels)
The problem with this is that the screen needs to scale proportionally both in width and height. If the screen only changes in height. Then the proportions will be messed up.
What we want is something that will allow us to set a widget dimension based on screen size. For instance, if I want a button to always be 10% of the screen’s height and 20% of the screen’s width. It isn’t obvious to me how to achieve this with anchors.
Anchors are not only setting the widget’s dimensions, they also affect the position.
Hey guys, I just did some testing and I think the desired behavior does work… just by default.
What I have here is a tooltip widget that is set to a certain size using a size box. I just adjusted it to work with my fullscreen size which is 1920x1080. Then if I resize the PIE window, it updates to keep the same ratio as seen here:
Image below shows the setup for this tooltip widget. I scaled the screen horizontally only and it looks to keep the same ratio, up to a certain point. When the ratio gets really crazy it does seem to have a minimum size that it holds at.
In the search field I typed aspect - I haven’t messed with those settings but maybe they could be useful?
About pivots, I haven’t changed anything from default. In this case its a tooltip widget so it pops up from the mouse cursor location and the default pivot is lower left corner.
All my HUD UI that is always on screen seems to have same behavior. Usually I just pivot to the closest corner. Seems to all just work without me doing anything special.
Thank you, Why do you have the SizeBox there? You said you sized the widget with it but isn’t sizing done with ScaleBox? I apologize if this is a silly question.
This is exactly what anchors do! Like, literally! To be 10% of the height, set Y minimum to some value, and Y maximum to that value plus 0.1. To be 20% of the width, set X minimum to some value, and X maximum to that value plus 0.2. Also generally, clear out the “pixel offsets” to all 0 when doing this – the editor defaults to keeping the widget exactly where it was, rather than snap to the new settings you enter.
If you want the aspect ratio of the button to always be, say, 5 to 1, then you’ll need to size the button within the outer container, and accept that, if your screen is more-wider or more-taller than the layout assumed, your button will fill less percentage of the screen.
i am a noob with this stuff too. Honestly I couldnt tell you, I’ve never used scale box.
In this case, the widget was by default appearing at a weird size, so I wrapped with size box so i could punch in some values. I just added some max values and that keeps it at a consistent size. It’s not a case of me knowing exactly what to do - i was just winging it, got some things to work , and just roll with that.
Thanks, BigTimeMaster.
This does look like it’s working the way I was hoping it to, but to be honest, it’s been so long since I originally posted the question that I can’t for the life of me remember what I needed it for lol!
You must take the size of your screen space in pixels and then create your objects size based on a percentage you want with respect to the quantities obtained.
Thanks! Your method did the trick for me. For those who can’t find the minimum and maximum, click the triangle beside “Anchors”, then a menu will appear to set maximum and minimum. Took me a while to find them lol
Not only that UMG is utter crap, but also Epic didn’t even have the common sense to make layout flow in a natural way or at least a way we are used to, flexbox, grid or whatever.
lol!