UI Blurred Background

Hi there! I am currently making some UIs for my game. I would like to make it so that when the user opens the UI, their screen goes blurry. I am unsure how to do this and anyone who would be able to point me in the right direction for this would be greatly appreciated.

4 Likes

You could try making the client manipulate a blur object inside lighting, so when they open the Gui, the object enables and tweens to a stronger blur.

You can do this by creating a Blur object in lighting, and disabling it.
Then in the GUI local script

local button = script.Parent

button.MouseButton1Click:Connect(function()
   game.Lighting.Blur.Enabled = true
end)

When ever you want to reverse it do

game.Lighting.Blur.Enabled = false

simple, you could just insert a Blur inside Lighting then insert this script

local button = game.StarterGui.ScreenGui.ExampleButton --// Change to your button
local blur = game.Lighting.Blur
local enabled = false --// Remove this if you want it to stay blurred, or keep it if you want it to be toggled
blur.Size = 0
button.MouseButton1Click:Connect(function()
    if not enabled then
        enabled = not enabled
        local tweenInfo = TweenInfo.new(1) --// Change 1 to the speed of the blur fading in
        game:GetService("TweenService"):Create(blur, tweenInfo, {Size = 24}):Play()
    else
        enabled = not enabled
        local tweenInfo = TweenInfo.new(1) --// Change 1 to the speed of the blur fading away
        game:GetService("TweenService"):Create(blur, tweenInfo, {Size = 0}):Play()
    end
end)

It dosen’t matter where you locate it, but I’d suggest inside the button.

Wouldn’t this enable it for the whole server? I only want it to blur the person’s screen that has opened the UI.

1 Like

I would suggest inserting a blur in the current camera instead of lighting because lighting is server-wide.

No it wouldn’t, local scripts don’t replicate to the server.

2 Likes

Nope! Local scripts don’t replicate to the server, meaning it wouldn’t :smiley:

1 Like

@olorhi @ignrazor Enable/disable the blur locally.

Thanks all for your help. I’ll be sure to try everything you’ve advised.

1 Like

If enabled in a local script, no, because it doesn’t replicate to the server

By the way, the tween feature I suggested makes smooth transitions possible (avoiding loops), take a look at that if you’d like.

1 Like

Yup! If you want to make a blur in, I recommend using @ShutzCh and @TheCookiezO 's methods! Mine is very simple, so if you just want it to turn on and off, you can do mine :slight_smile:

1 Like

I think you should do it in CurrentCamera, not sure because I think Lighting is shown to all clients

So yeah, they don’t replicate to the server meaning there is no need for that kind of stuff