The buttons on this video increase in size proportionally, and move other buttons appropriately. I need help achieving this effect in my game.
Does someone have an idea how?
2 Likes
You may need to learn UIGridLayouts which are automatically resize other elements based on the configuration you make.
1 Like
How would I use UiGridLayout to resize specific buttons proportionally?
Make a folder or frame that contains the other buttons. Place UIGridLayout in the same path as the buttons, don’t put multiple for each one.
Set CellSize as offset so they can change size based on the configuration.
Make paddings scale as your liking
(Note: I’m not sure about setting cells as scale or offset. Try both for two of them.
Make FillDirection Horizontal
Make both alligments centered
Also make some changes based on your liking.
I would use the tweenservice to smoothly change the size of the button after detecting that the mouse is hovering over said button.
If you need reference on how to use the tweenservice i would check the always helpful roblox documentation
Okay I’ve done everything you told me to. Now how do I change the size of one image button with UiGridLayout, like in the video I sent?
You can use UIScale to adjust the scale of one button in a UIGridLayout.
Okay I see it works, what about the position of the Image Buttons as the video shows?
Use TweenService for change one of the buttons
You just may directly do it as well, but if you want it smooth like in the video, you need to learn TweenService. I use 0.2-0.4 seconds, Sine and Out. If you learn about TweenService you will understand it.
1 Like
Not the tweenservice that’s the problem, but is the game calculating position of other buttons through a math formula or is that a property inside UiGridLayout, UiScale or similar?
You not need a math formula, the point of UiGridLayout is you enter a gap in Y axis, and the algorithm itself always trying to keep the gap as what did you entered. If you change one button’s size, the algorithm have to make other button smaller so the gap will be the same.
The issue is, it’s not changing position when I change the scale of the button with UiScale. And I can’t change the size through the image button’s property.
1 Like
Are cells sized as an offset or scale?
They are set to scale.
asdasdasdasdasdasdsadasd
1 Like
1 Like
I remember that UISizeConstraint is adaptive with other elements. Can you try it? (Use it instead of UIScale)
No it’s still not changing the position like in the video. It can’t even change the size above it’s already set size, it can only make it smaller.
Hard coded it, it works great.