I want to achieve an effect where the screen is dimmed but a small circle is at regular brightness, basically guiding players to a specific button in a tutorial or something. This is an example of what I mean
I am aware that I could create a png image and layer it over top of the screen, but I would ideally not want to use this and I’m wondering if something is possible with ui gradients or anything else.
Any help would be appreciated, thanks!
The best that I could think of where UIGradiant could replicated that effect is by splitting a frame overlapping the screen into 4 quadrants, then rotating and adjusting the transparency number sequence of the UIGradiant and size of the quadrants based on the mouse’s position, however that would create a square, not a circle.
Another method would be EditableImages, as they include the “DrawCircle” Method but I’m not sure how computationally effective it is but possible. (Also warning that the max size of editable images is 1024x1024 so you could either have the whole screen be an image but have the circle be slightly pixelated, or calculate 4 parts around the image then have the image be one whole circle (which additionally can be replaced by a PNG, ultimately defeating the purpose of not using pngs).
Another method, which I think I’ve seen being used in DOORS “THE BACKDOOR” Haste’s jumpscare where you have multiple frames encompass a circle then adjust using UIGradients and ClipDescendant.
Overall I’m unsure if there’s a loophole, honestly wish roblox had a invert option for frame’s descendants. 
use frame with uicorner (1, 0), add uistroke with huge size and change its transparency to something like 0.8
oh I did not think about using UIStroke, very nice
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
