Solution to AspectRatio-controlled GuiObject with sibling that fills parent

I have this particular problem with UIs that I run into every month, it seems. The following UI (where the green frame is free to resize) cannot be done easily:

ProblemStatement

So in this case, we have one aspect-ratio controlled frame and – parented to the same object – a frame which is supposed to have a size dependent on the parent’s size minus this aspect-ratio controlled piece. Again, the green frame is meant to resize based on the screen size.

You can currently work around this by:

  1. Adding a script to watch GetPropertyChangedSignal("AbsoluteSize") on the green frame (or something materially similar).
    a. I just watched @zeuxcg’s presentation at RDC saying if you have to write a script to size some UI correctly, asking for a native feature often gives you better performance, so I’m invoking that!
  2. Locking the green frame’s width or height to some absolute pixel value. Sometimes you don’t want this, though.
A solution I can think of...

I trust roblox can come up with a solution they are happy with, so don’t let this solution proposal be the crux of the post.

Neglecting SizeConstraint, Scale for Size and Position are both defined in terms of the parent size along the same axis (that is, Position.X.Scale is based on the parent’s x size).

My solution is to add new properties CrossSize and CrossPosition which are scale terms defined based on the opposing axis, e.g., CrossSize.X = 1 means the x size should be equal to the parent’s height (not width, like with Size.X.Scale).

This would obviate the need for SizeConstraint, but… SizeConstraint was never really fun to work with.

7 Likes