Inverse UI Mask possible?

[Deltact_Dev (Deltact)]

TL;DR

UI Instances beneath a mask (in this occasion, an image of a rectangle) are visible only inside the image, if you didn’t follow me look at just the images attached to this thread. You’ll understand what I mean.

---

Is this a thing yet?

Alright so, I’m pretty sure this isn’t a roblox feature yet but knowing the developers out there, some must have cracked this issue out through a smart method of sorts.

If you don’t know what an inverse/reverse UI mask is (and I could be wrong here since I don’t know the official name for this issue) and can’t be bothered to search it up, I’ll provide you with some easy to follow images and a tiny novel for you to enjoy. (I am not writer though)

---

Prerequisites: Don’t be on light mode.
You passed the prerequisites with flying colors? Good.

Chapter 1, obtain your mask.

Say you have this hollow rectangle, with perfect edges, so pristine!

Perfect for what you need, maybe a logo outline, who knows? The sky’s the limit.
You want to add some color to it but keep the hollow-ness of the square, how about a red stripe? That sounds nice.

Chapter 2, so you actually decided to embark on this journey after all…

Let’s create a Frame with a BackgroundColor value equal to (255, 0, 0), it’s anchor point being (0.5, 0) with a position of (0.5, 0, 0, 0) and a size of (0.1, 0, 1, 0)

Gosh darn! That doesn’t look right.
The frame is trespassing the image! You want to keep the inside hollow… but how?

Chapter 3??? honestly I wish I knew how to do this…

An unknown developer is produced from thin air, you forgot TeamCreate on!

With a silent shift of UI properties and some black magic the stranger gets to work…
He assists you with your dilemma, and restricts the frame to be visible only within the ImageLabel’s Image.

Your wishes have been granted, the rectangle, more perfect than ever is ready to be used for your development needs.
The stranger bids farewell before you can ask him of his ways.

You remain in awe as that you cannot understand what in tarnation this person just did. Studying the UI yields no results as that you cannot comprehend his craftsmanship.

---

Did you enjoy this? I hope so.

I’m no writer but I wanted to break the monotony of the forum’s technicality with a tiny fictional story. If you didn’t follow, chapter 3’s result is what I can’t do and need help with.

So is there a way to apply this?

Apologies in advance for my bad formatting, I haven’t posted in the forums in a while and this post is seriously begging to be struck down by the moderators as to how it’s laid out in a novel style.

If anyone knows how to do this please comment on this thread of your method as explicitly as possible with clear instructions.

[Czlopek]

My approach would be creating a Frame as a “Base”, make it Transparent and ClipDescendants.
Then i would put four other frames into it rigging them so their anchor point stays on the edges of the Base Frame and also ClipDescendants.
After that, i would put red squares into the top and bottom Frame.
Here is the final result,

and a link to the project.
Transparency.rbxl (39.4 KB)

[Deltact_Dev (Deltact)]

Well that would be my approach as well and I understand that a square is probably the worst way to start explaining this issue as that it should have been something more abstract.

This works for just squares, what if say now I had to do that to a hexagonal shape or even something more abstract? Without a lot of rotated frames this wouldn’t be viable.

The real answer to this would be that with any mask you can use it to display anything only inside of it.

This is the kind of result we want to have, you can find such images online by searching up “Inverse UI Mask”

I really appreciate your approach to this issue but it’s a very case-specific solution requiring it be a square rather than something else, but yes this is the solution to the square dilemma.

[Czlopek]

Since I never actually saw this kind of effect in Studio i would say those were made on another engine, edited, or used ViewportFrame | Roblox Creator Documentation in some way.
The ViewportFrame is the closes thing to such effect in roblox as it lets you render 3D objects inside UI, i can’t really help out on the topic since i used it successfully only once, but for sure that’s the way.
If you need an example, let me know and il try to cook something up.

[Deltact_Dev (Deltact)]

Apologies for the late reply due to festive events.

An example, preferably a .rbxl file would be much appreciated for me and any future readers on this rather than it ending as a stub of a thread.

[Czlopek]

So ViewportFrames work similarly to other GUI elements with one exception you can put 3D models inside of it to be rendered as a separate world, you can copy and paste most of your workspace and it should work without any trouble, some materials don’t render properly as ViewportFrames don’t have sky boxes or proper lighting and everything in there will look a little bit off compared to the in-game view, i remember a thread about trying to mitigate it but i couldn’t find it.

Viewport.rbxl (541.8 KB)

Here is the world, a really simple example. You have 2 ViewportFrames that are connected to a new instance of the camera which then copies the player’s camera CFrame and is updated every frame. One ViewportFrame is small, the other one is inside another frame, that frames clips the ViewportFrame inside which is the size of the screen so it doesn’t cover all of it but maintains the original field of view.

A noteworthy thing would be connecting the camera manually in a script as they get deleted if you try to connect them in studio.