This is a relatively small project, but it is still worth to share. I made it possible to clip to an arbitrary quadrilateral any GUI element using CanvasGroups. Here’s the place link (it’s uncopylocked): Quadrilateral Test - Roblox
I see potential use cases of this. For example, it can be used to create high-quality ScreenGuis (this can probably solve ViewportFrame pixelation problem). I also want to look at EditableImages and MeshPart clipping method I found here. This is a part of a bigger project I am trying to develop: teleportation portals that look as realistic as Portal’s ones. Let’s see where it goes!
12 Likes
I don’t really get what this is supposed to do, seems like a normal CanvasGroup to me
bro how have i never heard of canvasgroups
and this is very nice project
can someone explain to me what canvasgroups are
Accidently read the title as
quesadillas gui clipping lol
This is actually four stacked CanvasGroups and some trigonometry. If you use just one CanvasGroup, you can only clip descendants to a rectangular shape. What this script does is that it takes four edges of a quadrilateral shape and clips each edge using a separate CanvasGroups. That allows the image to be shaped like a part’s face as you can see on the screenshot I posted for example.
1 Like
Basically, CanvasGroups are frames that render to a separate texture. In my particular use case, I use them to clip descendants to a rotated rectangle (regular GUI objects ignore Rotation property with ClipDescendants).
1 Like
Oh Goodness. i love this effect. so many ideas and implementations.
a semi-custom slicing of ClipDescendants for UI is on its way. it’s something i’ve always wanted, i just didn’t have the brains to come to my senses on my own. thank you so much, and good luck with your portals’ project !!!
1 Like
Ohh, this would actually be awesome for hanging photos or mirrors where you need the UI to be of a certain geometry, great stuff!
Just wondering though, is there a limit to how many vertices you can add?
Theoretically, it is possible to create a frame for every edge, but this would be extremely laggy