How to clip an object within a non-square UI element? (Hexagon and other shapes)

I have a viewport frame that I’d like to clip inside of a hexagonal image label.

image

I understand if this is not possible with image labels, but how would I clip a UI Element within a complex shape? (Circles, Hexagons, Pentagons, etc)

By clipping, I mean keeping it within the boundaries of the UI Element.

image

You would need 2 seperate images, the hexagon for the background and the hexagon outline (must be thick enough to work) and then put your object between those 2 images

1 Like

I see what you mean, but the point of this post is that the object contained inside the hexagon is inherently larger than the hexagon itself.

If there is no way to properly clip an object inside a complex shape, then I’m willing to accept that. Just thought I’d throw the question out there in case there happened to be a solution.

1 Like

Another way you could do this is by using editable images but it’s still in beta for the moment

1 Like

I’ve never heard of this before. Seems interesting.

Could you explain how it might possibly be used to clip?

Editable images essentially allow you to edit an image’s pixels with a script. You can get the pixels as an array using editableImage:ReadPixels()

They will appear under this form :

{
[1] = 0.1039, – R (first pixel)
[2] = 1, – G
[3] = 0.1948, – B
[4] = 1, – Opacity
[5] = 1, – R (second pixel)
[6] = 0.1938, – G
[7] = 0.1838, – B
[8] = 1, – Opacity
[9] = 0.283, – R (third pixel)
etc
}

Every pixel is seperated in 4 values :
The R, G, and B colors and the opacity of the pixel

This might seems very weird at the beginning but after a few tries you’ll get used to it

I don’t explain very well so i recommend you read other posts and youtube tutorials about editable images

If you want i’ll try to make a script to remove the pixels that are outside the hexagon

1 Like

One issue; the thing inside the hexagon is a viewport frame. Would this prevent me from using this method?

Yes this won’t work with a viewport frame.

Maybe you could use screen shots (or renders) of the npc or whatever your using it for

You can create a plane mesh with a hexagon shaped hole in the middle of it then erase its alpha.
Then just position the mesh in front of the camera in the ViewportFrame to erase the things that don’t appear within the hexagon hole:

Here’s a place file with a simple script that positions the hexagon mask mesh in front of the camera:
Hexagon_Frame1.rbxl (97.6 KB)

Meshes with erased alpha don’t render anything behind them in ViewportFrames, which is why the plane mesh with a hexagon shaped hole removes everything except the things inside the hole.

3 Likes

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