Roblox currently does not allow you to apply a effective and good looking blur to UIs on your screen, this module fixes that with a clean and simple API!
How Its Done
BlurUI uses @TheNexusAvenger’s heavily modified by me version of Module3D, to create a billboard GUI that is placed in front of the camera. The module allows you to place frames onto this billboard GUI, which can then be blurred through the blur effect.
Place the module wherever you would like, preferably ReplicatedStorage.
Add a blur effect to lighting.
Module.Init(ScreenGui) -- Creates the billboard GUI and sets up events. Required for the module to run.
Module.AddFrame(Frame) -- Clones given frame and parents to billboard GUI, given frame is set invisible.
Module.RemoveFrame(Frame) -- Removes cloned frame, frame given MUST be original frame.
Module.Destroy() -- Destroys billboard gui, removes all current frames and shuts down connections.
Example
wait(5) -- Wait for the module to load.
local Module = require(game.ReplicatedStorage.BlurUI) -- Require the module.
Module.Init(script.Parent.ScreenGui) -- Initalize the module, make sure to send a screenGUI!
Module.AddFrame(script.Parent.ScreenGui.TextButton) -- Add a button!
Module.RemoveFrame(script.Parent.ScreenGui.TextButton) -- uh oh we dont want that button anymore, send the original button!
Module.Destroy() -- shuts down all connections!
Update Log
Its recommended you check back here often to make sure your module is up to date!
Update 1.1 (June 10th, 2021)
Updating function runs when the camera moves, helping improve performance for standing still cameras!
Removed unnecessary parts.
Changed from SetPrimaryPartCFrame to normal .CFrame!
UI now updates as camera viewport size changes.
Fixed jittery issues.
Fixed luau type check error in WaitModule.
Caveats
UI disappearing behind objects can’t be fixed, its recommended that this is used for still cameras.
UI being slightly discolored can’t be fixed.
GUI can not be pressed or interacted with, this is very hard to fix.
Scripts may break when they are cloned.
Extra
If you have any feedback, concerns, questions or advice. Please feel free to message me here on the developer forums or reply down below!
roblox needs to add a “UIBlur” object that has a ZIndex property so it can be done without having to use hacky methods. I’m pretty sure something similar exists and is somewhat functional as iirc core scripts put a blur on top of all UI elements for disconnected/kicked messages (if this is even handled in core scripts).
It works, it just occasionally moves your UI offscreen.
(or im just an idiot and accidentally moved my ui but roblox doesn’t let you drag ui offscreen so idk)
