Help please

[lampman13]

ok so I want to make a menu with a background that makes things behind it blurry like this.



can anyone tell me how I would do this?

[JamminR]

make a panel, use DrawBackgroundBlur on it.

[lampman13]

Thanks for such a fast reply i tried that once but i think i was using it wrong but i thought it meant behind the panel what do I use for the start time thing? just a little confused sorry

[lampman13]

ok so i got that but how do i restrict the blur to just an area like a box? also sorry for looking like a kid someone spilt something on my keyboard and I have sticky keys

[JamminR]

ok so i got that but how do i restrict the blur to just an area like a box? also sorry for looking like a kid someone spilt something on my keyboard and I have sticky keys

Blur will limit itself to the size of your panel.
As for time, there is a perfect example in that link. Systemtime in panel init.
Set a var when you make the panel, use that time in the blur. Or even a second before for fun effect I'd guess.

[Professor_Smiley]

Blur will limit itself to the size of your panel.
As for time, there is a perfect example in that link. Systemtime in panel init.
Set a var when you make the panel, use that time in the blur. Or even a second before for fun effect I'd guess.

It is possible to make a panel that blurs and fades into transparent then fades into blur again and so on? Then I will color it red. For my gamemode.

[roastchicken]

Blur will limit itself to the size of your panel.
As for time, there is a perfect example in that link. Systemtime in panel init.
Set a var when you make the panel, use that time in the blur. Or even a second before for fun effect I'd guess.

Lampman never replied, so I'd just like to ask if this actually works for anyone?

I've tried it, and it blurs my entire screen. Here is my code:

Code: Lua

1. local panel = vgui.Create( "DPanel" )
2.  
3. panel:SetPos( 100, ScrH() - 100 )
4. panel:SetSize( 100, 50 )
5.  
6. function panel:Init()
7.         self.startTime = SysTime()
8. end
9.  
10. function panel:Paint()
11.         Derma_DrawBackgroundBlur( self, self.startTime )
12. end

[Timmy]

Yes, I don't think DrawBackgroundBlur limits itself to the size of a panel. DisableClipping(true) prevents it from doing so.

Derma_DrawBackgroundBlur function: https://github.com/garrynewman/garrysmod/blob/ead2b4d7f05681e577935fef657d4a4d962091e6/garrysmod/lua/derma/derma_utils.lua#L10-L42

Simply removing the clipping prevention seems to give the effect OP desires though.


Visual preview: https://i.imgur.com/Y5JteOL.jpg

Code: Lua

1. -- Based off Derma_DrawBackgroundBlur
2. local matBlurScreen = Material( "pp/blurscreen" )
3.  
4. function Derma_DrawBackgroundBlurInside( panel )
5.         local x, y = panel:LocalToScreen( 0, 0 )
6.  
7.         surface.SetMaterial( matBlurScreen )
8.         surface.SetDrawColor( 255, 255, 255, 255 )
9.  
10.         for i=0.33, 1, 0.33 do
11.                 matBlurScreen:SetFloat( "$blur", 5 * i ) -- Increase number 5 for more blur
12.                 matBlurScreen:Recompute()
13.                 if ( render ) then render.UpdateScreenEffectTexture() end
14.                 surface.DrawTexturedRect( x * -1, y * -1, ScrW(), ScrH() )
15.         end
16.  
17.         -- The line below gives the background a dark tint
18.         surface.SetDrawColor( 10, 10, 10, 150 )
19.         surface.DrawRect( x * -1, y * -1, ScrW(), ScrH() )
20. end
21.  
22. -- Create custom VGUI Panel
23. local PANEL = {}
24.  
25. function PANEL:Init()
26.         self:SetSize( 450, 350 )
27.         self:Center()
28. end
29.  
30. local mat = Material( "pp/blurscreen" )
31. function PANEL:Paint( w, h )
32.         Derma_DrawBackgroundBlurInside( self )
33.         draw.DrawText( "Blurred background", "Trebuchet24", w / 2, 12, Color( 255, 255, 255, 255 ), TEXT_ALIGN_CENTER )
34. end
35.  
36. vgui.Register( "DBlurredBackground", PANEL )
37.  
38. -- Create and show custom panel
39. vgui.Create( "DBlurredBackground" )

Edit: Fix grammar

[roastchicken]

Thank you Timmy! I was messing around with the function and even tried to make my own, but I quickly discovered that the blurscreen material was just a copy of the screen and thus couldn't just be resized.