Problem with positioning aspect-rationed uiButtons

Basically I need to fit up to 10 buttons to the bottom of the screen, each with size 0.1 scale. But I need those buttons to be squares no matter the users resolution, so I came with aspectRatioConstraints, with width as dominant axis. This succesfully makes squares with good width, but I don’t know how to position those button on Y scale. If I just put scale position to 0.9, the button is partially out of the game window. I also tried getting player’s game window height and substracting absolute size of the button from it, but that instead gives me a lot of space between the button and the bottom of the screen at Y axis. Any ideas on how to keep those buttons always at the bottom of the screen?

You are placing all those buttons inside a frame? or those are just floating without a “enclosure”?

When building GUIs I try to keep the “line” of buttons inside a frame that I can freely move wherever I need to, no matter if I resize the frame, the buttons will keep aspectRatio, and will never go outside of screen

First thing I forgot to say is that I am creating those buttons in script, and second is that I was having them in frame, but that frame was scaled 1,1 which when I think about now is pretty useless. So I instead made the frame only at the bottom of the screen where I want those buttons.
But it doesn’t really help me. Can you explain more on how does your method work?

Hi, i’d first try inserting a frame with the size of 1,0,1,0 then add other things inside of it and scale them to 1,0,1,0 use the AutoScale Lite plugin and set the AnchorPoint to 0.5,0.5
But i do not think that is what you want.

I can’t use plugin like that because those buttons are created using script when the game runs. Also anchor point runs on offset so I don’t know how I would implement it to scaled ui instance

Yup, I do that too lot of times, populating GUIs from a script, using a server table or database. Its the same approach, for me the important thing is using the enclosure where those buttons will be parented.
Its just having some blank frames, all of them inside a main frame, all of them with using scale position, its very similar to using

in HTML language. If you build the foundations of the GUI and then populate it thru script everything will be arranged properly.

You could show an example what you are getting currently.

Well, I am not getting really anything worth showing rightnow, but I think we misunderstood somewhere. Because I actually want the buttons to scale as need on the Y axis, only thing I care about is that they have width of 0.1, they’re next to each other and they are completely on screen. Or are you suggesting I should instead give the ratioConstraint to the frame and then just give the button Y size of 1?

As of right now, I have size and position of the frame like this:
image
And function I use to create a button:

local function createButton()
	local button = Instance.new("ImageButton")
	button.Size = UDim2.fromScale(0.1,1)
	button.Parent = operatorButtons
	button.BackgroundColor3 = Color3.new(0.196078, 0.196078, 0.196078)
	button.BackgroundTransparency = 0.4
	button.ImageTransparency = 0.3
	local aspectRatio = Instance.new("UIAspectRatioConstraint")
	aspectRatio.DominantAxis = Enum.DominantAxis.Width
	aspectRatio.AspectRatio = 1
	aspectRatio.AspectType = Enum.AspectType.ScaleWithParentSize
	aspectRatio.Parent = button
	button.Position = UDim2.fromScale(1 - buttonAmount/10,0)
	return button
end

This is how it looks like:


I am creating only four buttons so thats why there are only four squares in the right. And basically this is exact opposite from what I want, the buttons are height locked in the frame, which results in buttons being this small. But I want width to lock the size of the button. basically it should look like this instead:

(made in photoshop so its not perfectly aligned but you get the point)

The aspectRatio should be based on the Y axis, so the X axis obbeys Y and create a perfect square, the Y axis should be 1 or a little less fitting the holder Y frame.

I never position the buttons using the Position property, I use a UIListLayout instance or something similar inside the holder frame, you are setting the position by script, and UIListLayout could arrange all the buttons at the center of the frame

using UIListLayout works, but now the squares are tiny, and I can fit more than 10 in the frame, which is not what I wanted. It looks like this:
image

Try to divide 1 by the number of total buttons, and set that as the dominant scale size aspectRatio of each button to fit them all inside the frame.
Honestly its hard for me to know what exactly is happening when not working with the frame and buttons directly

That doesn’t work either, because the buttons wont scale out of the small frame.

Actually anchor point does not run on offest, my bad. Anchor point was all I need

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.