Change UI Position Without Changing .Position

Help and Feedback Scripting Support
#1

Hey there. The title may sound a little weird, however let me explain…

With a script, I want to move the white line next to the button that the arrow is pointing to in this image:

image

Specifically changing the .Position isn’t an option because I’ve allowed users to be able to disable certain buttons, meaning that if a certain button was disabled, the indicator would be in the incorrect place.

Another reason why I can’t use a specific .Position is because I’d like to tackle the weird scaling that this line is doing. Here’s what I mean:

In-Game

image

Studio

image

Additionally, It may be worth noting that all my buttons have a UIListLayout.Thank you for taking time out of your day to help me, no matter how. :heart:

1 Like
#2

I’m not exactly sure as to why you’re saying that it isn’t lining up as it should always line up if within the same frame.

I believe that the problem is either that it is in a completely different frame and that frame is of different size or position, or you are using offset, which will be different for everyone and different between in-game and studio.

To fix this, if the latter, switch to scale for size and position, else, use them in the same frame or have that frame same Y size and Y position.

To move that UI to the same Y position to line up, I would do

UI.Position = UDim2.new(xScale, 0, button.Position.Y.Scale, 0)
1 Like
#3

You should listen for the change of AbsolutePosition/AbsoluteSize properties of currently selected button, then you should implement something like this:

(I am assuming you have a similar UI elements structure)

Screenshot_14
Screenshot_141633×639 268 KB 

local coreFrame = game.StarterGui.ScreenGui.coreFrame
local line = coreFrame.line

local buttonsFrame = coreFrame.buttonsFrame
local button = buttonsFrame.button1

local xOffset = (buttonsFrame.AbsolutePosition.X - coreFrame.AbsolutePosition.X) + (button.AbsolutePosition.X - buttonsFrame.AbsolutePosition.X) - 1.25 * line.AbsoluteSize.X

local yOffset =  (buttonsFrame.AbsolutePosition.Y - coreFrame.AbsolutePosition.Y) + (button.AbsolutePosition.Y - buttonsFrame.AbsolutePosition.Y) + (button.AbsoluteSize.Y - line.AbsoluteSize.Y) / 2

line.Position = UDim2.fromOffset(xOffset, yOffset)

Here is the file to test out the offsets from console:
button line offset.rbxl (64.3 KB)

This is the offsets you should repeatedly set by properties change handlers.

2 Likes
#4

I changed the indicator (the white bar) to scale for size and position and added this code:

TweenService:Create(Indicator, TweenInformation, { Position = UDim2.new(Indicator.Position.X.Scale, 0, Home.Position.Y.Scale, 0) }):Play()

and no matter which button I click, the indicator will always go to the top:
image

I believe this may be because of the position of the button being 0, 0, 0, 0 as it has a UIListLayout.

#5

How would this work with TweenService?

#6

It could be done by tweening not the line, but a NumberValue which is a delta for offsetting the line vertically. So everytime player clicks a button the NumberValue.Value being tweened and the line will be offseted by this value, otherwise the line will look weird when resizing the game while the tween is happening.

1 Like
#7

Thanks so much, your solution worked. You’re a life saver.

#8