UI Scripting Help

Hi,

Before I start, I have no experience to UI at all. I have seen groups with some cool animations to their UIs. I was looking forward to learning some and I would like some help with this process. I’m having trouble with the button to open I actually wanted a way to make the button go down when every time press or move my cursor and it can go to where the grey button. If so, please show me and help how to do and also mind giving me feed back.

Remember that, I am new to UI and I’m getting to a process to learn more and do more. lol. Don’t mind about those 25 Robux etc they are temporary lol. thanks…

contact me on discord about this thank you. @naim.,#0001

Correct me if I’m wrong, but this should be under #development-support:design-support.

My apologies, I typed that before you changed it.

If you have the asset for the button to be in a pressed or being hovered over state, there’s no scripting involved! Here’s what you’re looking for in an ImageButton:
43

  • Image is what the button looks like normally without any interaction.
  • HoverImage is what the button looks like if the cursor is, well, hovering over it.
  • PressedImage is what it looks like when the player clicks and/or holds on it.

Observe!
ImageButton%20Demo
Aside from the fourth static state of the button which was scripted by me, the appearances beforehand were simply filled-out fields in the Properties!

1 Like

Well, I mean something like this. This is an example of what I mean.

1 Like

Since that’s not just a new image that it transitions to, you’d have to use a basic script to handle that. You can use the MouseButton1Click event to tell when a button’s clicked, and you can use TweenService to make it move smoothly like that. It looks like it’s not actually a new image, they’re just moving one round-edged rectangle (not sure what the term is) down over the other.

A local script with tweening and the MouseButton1Click/MouseButton1Up Event.

image

button = script.Parent --variable to locate the button, it's the parent of the script
white = button.white --variable to locate the white thing

button.MouseButton1Down:Connect(function() --an anonymous function with the event which fires when your left mouse button is pressed down and released
    white:TweenPosition(UDim2.new(0, -1, 0, 21), Out, Quad, 1) = --moves the white thing into that new position with tweening
end)

button.MouseLeave:Connect(function()
    white:TweenPosition(UDim2.new(0, -1,0, 0), Out, Quad, 1)
end)
3 Likes

Thank you for the help. This has been my struggle for some while, now I understood some basics and I think I can do better. Thanks! :+1:

1 Like