This is in the wrong category, also there is no way to prevent this however they cant move the UI like that, That only happens in studio but any real developer would be using a set resolution. Because if you do not, your UI will not scale correctly
If the red ui’s position HAS to be in offset, your only option is to use a script that alters the offset value every time the viewport size changes. Or just convert it to scale (could also be done by script)
You could use a UIAspectRatioConstraint in a frame containing the red line and the square and make the ratio fit what you like and then no matter the screen resolution the ui will always be the same proportions
The Yellow UI should have an AnchorPoint opposites of the reference point (the Red UI). For example if the Red UI has an AnchorPoint of 0, 0.5 (attached to the left side of the screen) then the Yellow UI should have 1, 0.5 (attached to the right side of the screen).
Set the Yellow UI size with a scale of 1 while adjusting the offset to the position of the reference point. For example if the Red UI is 600px away from the AnchorPoint, then the Yellow UI size should be {1, -600}, {whatever you need, whatever you need}
Put the Black UI and UIPadding inside the Yellow UI.
Adjust the UIPadding as needed.
No Parent
Will need a bit of math & calculation to follow.
Make sure the Black UI have an AnchorPoint opposites of the reference point (the Red UI). For example if the Red UI has an AnchorPoint of 0, 0.5 (attached to the left side of the screen) then the Black UI should have 1, 0.5 (attached to the right side of the screen).
Position the Black UI as follows = {The Black UI AnchorPoint.X, +/- Distance between the BlackUI's AnchorPoint to the closest side of the screen the AnchorPoint is},{Whatever,Whatever}. (try either using + or - for it, just see which one work)
Size the Black UI as follows = {1,(Offset of the Red UI x -1) - (Distance between the Black UI and the Red UI + Distance between the BlackUI's AnchorPoint to the closest side of the screen the AnchorPoint is)},{Whatever, Whatever}
Make sure the Black UI has a UISizeConstraint within, as so it wont scale it size below 0 to the negatives.
Calculation Example
Lets say that:
Your Red UI offset is 600px in the X axis, away from the left side of the screen
The Frame (Black UI) AnchorPoint is 1,0
You want the space between the Black UI and the Red UI about 30px
You want the space between the Black UI’s AnchroPoint and the left side of the screen about 40px
Then for Position would be:
Position = {1, -600},{0.5,0}
While the Size would be:
Size = {1,(600 x -1) - (30 + 40)},{1, 0}
Size = {1,(-600) - (70)},{1, 0}
Size = {1, -670},{1, 0}
These methods aren’t perfect though, as if the UI is off the screen, it can still be visible at some points. You can mitigate this by enabling ClipDescendant or better make a script that can handle the visibility of the Black UI.
Other than that, I do also want to warn you not to always use Scale for everything as @Aqua_Turneur said, see my reasoning below.
Don't always use Scale in Everything
This is quiet a slippery slope. Though it is true that most of the time Scale is the go to option, it’s not always the case that everything need to be it as there are GUIs which Offset does better. You’d need to test it out and see if using either would be the best for it.
I’ve seen a lot of people misusing the Scale especially when using AutoScale plugin, which cause a lot of issue if used without truly understanding your UI needs.
If scalability is truly an issue with an Offset UIs, you can always use UIScale
Personally, I’ll probably go for the ‘No Parents’ method, as I’m already used to doing small math like this and uses this style.
Though some people may prefer the one with UIPadding as the UI Structure is clearer and easier to understand, especially useful if you have multiple people working on the project.
It’s your project, your choice. Just see what’s fit best for you
~ Also don’t forget to mark it as a solution if you find it helpful ~
.
.
