UI tweening issue

Hello, I want my UI for a dialogue system to tween from downwards to its original place when the interaction starts, and to go from its original place to downwards when it ends, invisible to the screen.

The UI seems to tween from its normal location to the top right, instead of the intended path. Here’s a video showing the problem, compared to the direction I’d like it to be moving in. (with the Y value variating between its original one and 1)

Here are the snippets of the code including the problem the problem.

-- Position of MainFrame of dialogue 

local GuiPosition = UDim2.new(main.Position.X, main.Position.Y)

-- Start of the dialog
    
main.Position = UDim2.new(GuiPosition.X.Scale, 0, 1, 0)    
main.Visible = true    
main:TweenPosition(UDim2.new(GuiPosition))

-- End of dialog

main:TweenPosition(UDim2.new(GuiPosition.X.Scale, 0, 1, 0))    

I have tried so many things, including putting a print statement before and after every single line to see if there’s any weird change (which you can see in the video), but I still couldn’t find a solution.

Thanks a ton in advance for your help.

I’m trying to understand the error. Try to be more descriptive on where the UI should start
Like,
‘‘I want the UI to start hidden at the top left of the screen, then tween in to be shown, and tween away back to hidden top left.’’

The code you provided has no errors that i can see, you might just be tweening it to a wrong place

1 Like

Hey, I want it to move from below the screen to its original place when you start the dialogue, and after it is over, I want it to go from its original place back to below the screen.
Here is an image for for reference.

I understand.

Your issue must be with the position variables.

local GUI_SHOWING_POSITION = UDim2.new(0.5, 0, .9, 0)
local GUI_HIDDEN_POSITION = UDim2.new(0.5, 0, 1, 0)

-- Start of the dialog

main.Position = GUI_HIDDEN_POSITION 
main.Visible = true    
main:TweenPosition(GUI_SHOWING_POSITION)

-- End of dialog
main:TweenPosition(GUI_HIDDEN_POSITION)    

I’ve wrote some code with some basic GUI positions that should fix your error, just adjust the variables accordingly to what you need.
I think the error would occur because you declare local GuiPosition = UDim2.new(main.Position.X, main.Position.Y), which might not be in the correct hidden position, so it would tween to the incorrect position you labeled as GuiPosition.

Try my code, and let me know if works for you.

1 Like
local GuiPosition = UDim2.new(main.Position.X, main.Position.Y)

...

-- Op wrapped a UDim2 around a UDim2 which would give no position
-- UDim2.new(UDim2.new(main.Position.X, main.Position.Y))

main:TweenPosition(UDim2.new(GuiPosition))  --> {0, 0}, {0, 0} (top left corner)

i’m not surprised an ai like response didn’t catch that

the dialog should just have an AnchorPoint of {0.5, 1} so it’s in the bottom middle of the screen
Position = {0.5, 0}, {1, -20} (20 pixels away from the bottom middle)

1 Like

i did not see the double wrap udim2. :frowning_with_open_mouth:

2 Likes

Hey,

Thanks a ton for your reply.
After some experimenting, the problem seemed to actually be not within me double wrapping when declaring the GuiPosition variable (still gave the intended value), but with me tweening it using

main:TweenPosition(UDim2.new(GuiPosition))

The double wrapping here was the problem.

By the way, what is the convenience of using anchor point (0.5, 0.5) instead of (0, 0)?

that’s what i was referring to

AnchorPoint helps with positioning from a pivot

if a frame’s AnchorPoint was 0, 0, then it would position the frame from the top left corner (default)

Position = UDim2.fromScale(0.5, 0.5)
AnchorPoint = UDim.new(0, 0)

image

but if the frame’s AnchorPoint was 0.5, 0.5, then it would position the frame from it’s center
image

Position = UDim2.fromScale(0.5, 0.5)
AnchorPoint = UDim.new(0.5, 0.5)

that’s why i suggested moving the AnchorPoint to the bottom middle {0.5, 1}
image

Position = UDim2.fromScale(0.5, 0.5) 
-- Position = UDim2.new(0.5, 0, 1, -20) would be 20 pixels away from the bottom middle (what i suggested)
AnchorPoint = UDim.new(0.5, 1)

so all you would need to do is change the Y

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