Hey all!
I’ve been studying UI design a lot recently and have been getting the hang of making things look really nice and satisfying on the eyes. However, there is one problem I just cannot get the hang of ever! No matter how many people I ask, how many different techniques I try, nothing seems to do the job, so I’m hoping some of you wonderful people will be able to help me out on this one!
The issue is my UI either compresses in odd shapes to fit the screen size, or if I use the relative YY axis, it will just go off the screen on certain devices- but if I design it with YY axis in the emulator to fit all screen sizes, it will look odd on bigger screen and even worse the size will not even shrink that much if even at all! I am totally lost on this one. I have an example of what I’d like the compression to be, versus what it is now down below.
I have tried adjusting their scales, offsets, relative axis…nothing is working for me!
I really hope you guys can offer me some solutions! I want to be able to figure out how to scale down my UIs at the same scale those lifting sim UIs do… Thank you!
As long as any main asset is using Scale, it means the size will goes according to Height (Y) and Width (X) individually, hence making a exotic results to the Frame’s contents due that one side extend or is being reduced more than the other one.
The 2 most common way to get your asset scalled in sync (locked on a specific ratio size)
You can just set the asset’s source size according to a single side, for example, for the following menu, i’ve taken YY (so the UI change according to the height)
And just like that, you can get something easily all-platform compatible.
If you encounter additional issues, for example, you want something more specific, such as limiting the maxsize depend of the 2 sides(XX+YY), should do the job
Otherwise, if you want to force a size limit (for example, if a game is Mobile based, it could be troublesome for PC compatibility) you can use , MinimalSize is also possible.
The whole selection here (all Frames), in my way, should be all into one invisible frame that hold all your contents, a bit the same organization as doing a Folder for them actually.
The 2 below seems to be moving individually, they are not together nor have the same parents to me?
if it’s the case, then that’s mean they are actually in RelativeXY
Yea, actually, because all your assets’s parents are directly the GUI, that’s mean they are ALL moving based on (1,0,1,0), which shouldn’t, You can just go ahead and make one frame as main position, then everything you put in as scale, will be scaled according to the Frame (which is the Parent, so he’s absolute to the children behaviors)
Right Side : YY + AnchorPoint(1,0)
Left Side : YY
TopBar : XX
BottomBar : XX + AnchorPoint(0,1)
Center : UIAspectRatioConstraint + AnchorPoint(0.5,0.5)
Here is one of the benefits to use one Frame as a source for everything, you can animate the whole pack with simple tweens combined :
It is overlapping because you are probably using offset for sizing on those buttons.
Edit, I don’t use constraints but rather pure scale when designing UI, but I am assuming there is a minimum value…? or something like an aspect ratio and that is not able to be small enough when the UI is resized to sizes that small.
Yea, but otherwise, the reduction is too low to ever have a proper Text size, there are simple suggestions to fix this, either hide the others buttons overlapping it upon OPEN Shop, or making the Shop a priority in Visibility via ZIndex. (The instance with the biggest ZIndex number is top priority aside Core UIs)
should do the job
, MinimalSize is also possible.
