[Open Source] Image Clipping Module

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!

Module:

UncopylockedPlace:

Worth noting: They all use the same Camera object, and never change after creation, so performance really shouldn’t be an issue. Feel free to reply below if you find otherwise.

40 Likes

This topic was automatically closed after 1 minute. New replies are no longer allowed.

Holy hecc yes this is good. Thank you so much! I’ll be using this for sure in the future :smile:

2 Likes

Seems cool. I’ll try this when i want to add PFPs to my game(s).

1 Like

Very nice job, never thought this was possible!

1 Like

Looks great! I will be using this for sure soon!

1 Like