UIAspectRatioConstraint not working correctly?

Why are you using an aspect ratio constraint to make a blurred map of the original map to fill unused space? The way a constraint functions is it will keep everything equal in size (or proportional). Because your UI is set up to extend based on the resolution, this would not be what you are looking for as no one value would fill the empty space on every device.

I am using it to keep the image square while making it resize with the frame it is in. The only point of it is to keep the image square.

And the one value that would fit in the space is {1,0},{1,0}.
However, I don’t want my scaled image to be stretched - the original image was square, so that means I’ll need to overcompensate to fit a rectangular space.

Would you be against using a script to do this?

No, although I’d much prefer not to. My logic is sound, this should all work with what is in the Roblox engine.

I think if this can’t be solved, I’ll post a bug report.

Will the space always be taller than it is wide, or do you really need this to be “any possible use” fit?

In some rare cases it may wider than it is tall, however the game will only be available on PC and XBOX, meaning that screens will usually be taller than the width of the element.

I’m not really designing it for those; however in the case they do get used, then the frame included in this topic will clip the image.


ui_aspectratio.rbxl (17.5 KB)

This works as long as “back” doesn’t switch to be more horizontal than vertical, and even then you could give it some leniency if you changed the aspect ratio of the inner square to be like 1.2 or 1.4 and uploaded wider images so it has a little bit of a “bleed”

All I did was set the width of the imagelabel to be Scale = 5. This way the height should always be the “max” extent

Why not just use the Size Constraint property?

Much easier imo.

I don’t want to constrain size - I want to constrain ratio. I want the image to be square.

SizeConstraint will make it square. It keeps the aspect ratio.

Yes but I also want it to scale with the thing it is in across multiple resolutions. The entire point of the this was to fill up the unused areas of a frame.

Unfortunately that still doesn’t solve the issue - the size is still being defined by the height, not the width.

I guess I’ll make a bug report.

That’d make it even easier to use the SizeConstraint property - and set it to RelativeXX.

I don’t fully see what you’re trying to do… but seems like SizeConstraint would do the job. (Could you expand on what exactly you’re trying to achieve?)

I’m trying to make a blurred background for a map (ever seen like those vine videos where the background is a blurred copy of the mobile phone resolution video?).

The map may sometimes not scale to fit the rectangular frame properly, as it needs to stay square. My solution to make it not look horrible is to steal the idea from what I said above.

But, like I said, I don’t want to touch size. The only thing that is important is resolution, as size is already defined and working properly.

Ah. If I understand correctly, you’re trying to keep the white imagelabel square, and scaling by width.
image
The UIAspectRatioConstraint is not working as you want it to, because of this frame’s size;
image
image
It only scales with height, because, it’s a descendant of this frame - which only scales with height also. It’s width(X) is in offset, so all of it’s descendants will have an offset width regardless whether it’s using scale or not.

exactly, the width is supposed to be consistent while the height is not

the issue here is that it’s not scaling to that constant width, it’s scaling to height instead, even when it’s supposed to be scaling by width

Are you looking for something like this (except with ClipsDescendants and no Transparency)?

Yes! :slight_smile:

1 Like

For some reason, UIAspectRatioConstraint doesn’t have this built in by default. I call this mode CoverMinSize, and it doesn’t exist. :frowning: It’s the opposite of ScaleWithParentSize.

Comparison between ScaleWithParentSize and CoverMinSize

The white in the following images is the constrained GUI element. I’ve disabled ClipsDescendants and made it transparent in order to illustrate my point.


ScaleWithParentSize:

The frame stays within its boundaries at all times. The DominantAxis doesn’t matter.

CoverMinSize:

The frame covers its boundaries at all times. The DominantAxis doesn’t matter.

It looks like FitWithinMaxSize is supposed to be a single-axis CoverMinSize, except the axis chooser is broken! Even if you could choose the axis, I don’t think it would give you what you want since you’d need to change the dominant axis depending on whether height or width is the bigger axis.


Here is a feature request post for it.


Until this is an actual feature, you can use a super-simple script and the SizeConstraint property to do this. The “CoverMinSize” examples were achieved that way.

local gui = script.Parent
local parent = gui.Parent

local function update()
	gui.SizeConstraint =
		parent.AbsoluteSize.x < parent.AbsoluteSize.y
		and Enum.SizeConstraint.RelativeYY
		 or Enum.SizeConstraint.RelativeXX
end

update()
parent:GetPropertyChangedSignal("AbsoluteSize"):Connect(update)

(Ideally placed where the rest of your GUI programming is done)

Example file: UIAspectRatioConstraintCoverMinSize.rbxl (18.0 KB)

3 Likes

Alright, thanks.

Didn’t really think about SizeConstraint :wink: