Disclaimer: This only works when you have a background (i.e. a frame) and when it is completely opaque (being semi transparent can reveal the descendants).
Hello everyone! This is my first community tutorial thread.
ClipsDescendants property of UI objects only works with the rectangular boundaries of the element. Below, even though the green square is outside of the shape, it is still inside the boundary of the image button. That is why it is not being clipped as desired.
Luckily I found an easy fix to this!
Instead of having an image like this for the image button …
… we can use an image like this:
Basically, it’s the inverted version. The transparent areas are now opaque and the opaque areas are now transparent. You can simply create this in GIMP, Photoshop, etc. Make sure that there is an opaque border that goes all the way around the entire shape like in the picture above.
- Now in Roblox Studio, upload the inverted image as an image button (I kept the normal one above for tutorial purposes):
(The red is the inverted image).
- Add a text button inside this inverted Image Button. Format it however you want (make sure to set the size property to
1, 0, 1, 0so that the text button is the same size as the image button. This is crucial.
- Uh oh . The Text Button is covering the Image Button! To fix this, simply head to the image button’s ScreenGui and set the
ZIndexBehaviorto “Global.” (By default it is set to “Sibling” which makes it so that descendants always appear on top of the parent/ancestor. We do not want that). Then simply, go over to the Frame (the white background for me) and set the
ZIndexproperty to 0 (so it is behind everything). Now set the ZIndex of the inverted Image Button and the Text Button to 2 and 1, respectively (Image Button’s ZIndex = 2, and Text Button’s = 1).
^ (ScreenGui ZIndexBehavior)
Now the Text Button is behind the inverted Image Button:
- Set the
ImageColor3of the inverted Image Button to the color of the background (for me it would be white). Also, don’t forget to set the
ClipsDescendantsto true so nothing inside the Image Button appears outside of the rectangular bounds.
And… we’re done! They may look similar, but the bottom one can accurately clip its descendants:
(I added the green frame for demonstration purposes).
This is the end of the tutorial. Thank you for reading through this!
Before, I was really annoyed by
Clip Descendant's limitations, however, since there is a fix now, my UI development has been significantly improved.
I really hope this helps you in your development experience as well.