Basically, I want to make a certain UI aspect review like a mask but use scale to make sure it scales the same on all devices.
The current explorer tab, using the frame “Name” as a “mask” with clipsdescendants on where the TextLabel “Name”. The frame is being resized instead of the textlabel to mask it.
As you can see below here, when the TextLabel has textscaled on with scale, it overtops on and doesnt mask it which is not what I want it to do but it does scale on multiple resolutions. (Used scale)
You can see here that it does infact mask and doesnt overlap ontop of eachother but doesn’t scale on multiple resolutions. (Used offset)
Any way I could mask this to make it to where it fits multiple screen resolutions yet still mask and reveal?
(Ik how to tween the frame but don’t know how to mask it if you’re confused)
Ah, this issue. It actually has a very simple solution, which works on all occasions where the background is a solid color. If not, refer to Elttob’s reply below.
Solution
The solution is very simple, yet it works. The trick is to simply put a Frame on top of your TextLabel and use it to mask the text. This can be done very easily with the use of AnchorPoint property.
This is done using Scale, with the TextScaled Property Turned on. If you don’t understand my words, here’s a place file with the solution.
If the background isn’t a solid colour, this won’t work. A solution which works in all cases is similar to this answer which I gave for rounded progress bars. Instead of an image label for the progress, it would in this case be a text label with your text in it. The image for the progress bar base is also optional in this case - it can just be an invisible frame that sets the size of the reveal. This will work over any background!
