(Stolen from SCP Architect game)
How do you achive this click button effect, i understand that i need to create frame but how do i make the frame “not leave the box”
Thanks!
(Stolen from SCP Architect game)
This is called Rippling, which is an element in Material Design.
In order to achieve similar effect, you need to have a container frame which has ClipDescendants turned on, as well as a circle image (we’ll avoid using UICorner for this one, since performance stuff)
Assume you’ve uploaded the image, created the frame. What’s next is to set the AnchorPoint to Vector2.new(0.5, 0.5) and get started with coding.
I won’t be giving any code since this is art-design, so I’d rather give a simple pseudocode to let you know how it works.
So first, we need to connect to the button event, if you are using InputEvents like InputBegan/InputEnded, connect to the InputBegan event. If you are using MouseButton events, connect to the corresponding event (eg MouseButton1Down)
Once you do, code something that will clone the circle, place it in the clipped container. And then set the position in the user’s position. After that, just tween the size to the somewhere like 1.2,0,1.2,0 (Remember to use UIAspectRatioConstraint)
After that, connect to the ended event or MouseButtonUp event, and make the ripple disappear by fading.
For the shadow though, you can just increase the size of the shadow by 1.2x and tween to original after the user lifted the button.
Alternatively, you can use a third party framework called RoStrap, but I wouldn’t really recommending it if this is just for a UI commission
1 Like