I’ve decided to remake this resource because I found it very jumbled and not that optimized. For example, my code (one single module, type-safe as-well) is about 170 lines. As for optimizations, the original resource used to clone and parent a local script which created a multitude of Parts with SpecialMeshes set to Wedge (mind you, not even a WedgePart) and whip up the shape of a rectangle that way. My module simply creates a part which should cover the entire frame. It would also hide that part if either the ScreenGui or the Frame itself is visible.
Usage:
Code-wise
If you only want to handle blurring manually, then the module presents 3 simple functions (which you’d need only 2) for usage:
-
.new(GuiObject: GuiObject, Corner: number?, DisableBelowNeededGraphics: boolean?) : UIBlur
This function simply creates the blur effect on a (usually Frame)GuiObject
instance.Corner
(defaulted to0
) adds between 1 and 3 levels of rounding to the blur.DisableBelowNeededGraphics
(defaulted totrue
) disables the effect below graphics level 8, because then it would look ugly (since DepthOfField doesn’t render below graphics level of 8). Worth noting if the graphics level is Automatic, the effect will still render, but it’s unclear if the user actually has the internal graphics lower than “8”. That’s simply a Roblox limitation, and you can remove the part that handles Automatic if wanted. -
Update(self: UIBlur)
simply updates the blur effect. This is a function which you don’t need to call since the module already updates the effect Pre-Render. -
Destroy(self: UIBlur)
simply destroys the blur effect (not the BlurEffect instance, see Object-wise for info) and clears the little resources it used.
For an example on how to use, you simply:
local UIBlur = require(game.ReplicatedStorage.UIBlur)
UIBlur.new(script.Parent.Frame)
Object-wise
If the module’s AutoAddEnabled
attribute is enabled, the module will automatically* scan the Player’s PlayerGui for BlurEffect instances, and apply a blur effect accordingly. Setting the BlurEffect.Enabled
to false also disables the blur, like the real thing! Beware however with rounded frames, as the module will try its best to add the best corner to the blur, however it isn’t perfect. I recommend code-generated blur for frames with UICorners!
*Note: for the auto-adder to work, the module should be required, but only that! No need to actually use the .new
function.
Corners?
Yes, the module uses a pre-modelled MeshPart instead of a regular part for rounding. This method isn’t that good either, because on 1:1 ratios the corner will look stretched, but this is best for buttons.
- Level 1 is a barely rounded square
- Level 2 is a square rounded 50% of the way
- Level 3 is a circle
Get it here! If you have optimization ideas or, any other kind of idea, let me know!
UI Blurs Sample Place File.rbxl (70.6 KB)