One of my smaller projects, but useful enough to share.
This module is used to quickly create an image with a clipping mask.
It works using ViewportFrames, MeshParts, and Decals.
The module gives you those top images.
With a tiny tweak, I made it show what it’s doing on the bottom row. It places your image as a Decal onto a MeshPart, and puts that into a ViewportFrame. Once it’s done, nothing ever moves, so it’s roughly the same performance as ImageLabels.
API:
local ImageMask = require(script.ImageMask)
local ClippedImage = ImageMask.new(ImageID, Type) --Returns the ViewportFrame
Example:
local ImageMask = require(script.ImageMask)
local ImageID = "https://www.roblox.com/headshot-thumbnail/image?userId=".. game.Players.LocalPlayer.UserId .."&width=420&height=420&format=png"
local ClippedImage = ImageMask.new(ImageID, "Circle")
ClippedImage.Size = UDim2.new(0.3,0,0.3,0)
ClippedImage.SizeConstraint = Enum.SizeConstraint.RelativeYY
ClippedImage.Parent = script.Parent
Out of the box, it comes with 5 masks types:
Circle, Rhombus, RoundedSquare, Star, Triangle
To add your own mask, simply create your MeshPart (Top surface is what gets displayed, so model accordingly) and place it inside the Module. Give it a unique name, and then input that name as the Type parameter.
Super simple to use, I hope you enjoy!
