Is it possible to make gradient alpha / box fadeout horizontally?

[xPsycho05]

Hey Facepunch.
I am trying to create a hud with a horizontally faded box. Is this possible with lua.
I have tried using a image with these codes SetTexture, DrawTexturedRect. But the transparent part appears as missing texture.

[iJohnny]

Show us your code

[xPsycho05]

[QUOTE=iJohnny;51598560]Show us your code[/QUOTE]

--
--    Hud name: FadeoutHUD
--    Creator: xPsycho05
--


local Settings = {}

--
--  Basic Settings
--

Settings.Width = 300
Settings.Height = 100
Settings.X = "left"
Settings.Y = "bottom"
Settings.PosX = 10
Settings.PosY = 10

--
--  Color Settings
--

Settings.Background = Color( 0, 0, 0, 220 )
Settings.Text = Color( 255, 255, 255, 220 )


--
--  **DO NOT TOUCH BELOW**
--

--
--  Background Styling
--

function HUDBackground()
  draw.RoundedBox( 0, Settings.PosX, Settings.PosY, Settings.Width, Settings.Height, Settings.Background )
end



if Settings.X 		== "left" then
	Settings.PosX 	= 10
elseif Settings.X 	== "center" then
	Settings.PosX 	= ScrW() / 2 - Settings.Width / 2
elseif Settings.X 	== "right" then
	Settings.PosX 	= ScrW() - Settings.Width - 10
end

if Settings.Y 		== "top" then
	Settings.PosY 	= 10
elseif Settings.Y 	== "center" then
	Settings.PosY 	= ScrH() / 2 - Settings.Height / 2
elseif Settings.Y 	== "bottom" then
	Settings.PosY 	= ScrH() - Settings.Height - 10
end

local function HideHud(name)
	for k, v in pairs({"CHudHealth", "CHudBattery", "CHudAmmo", "CHudSecondaryAmmo"}) do
		if name == v then
			return false
		end
	end
end
hook.Add("HUDShouldDraw", "HideDefaultHud", HideHud)


local function FadeoutHUD_Paint()

  --  Custom
  HUDBackground()
  HideHud()

  -- Default DarkRP

end
hook.Add("HUDPaint", "FadeoutHUD_Paint", FadeoutHUD_Paint)

I have nothing special right now. But as i asked is it even possible to make this fadeout effect. I couldn't really find anything about it other than some fadeout animations. Which isn't what i am looking for.

[editline]30th December 2016[/editline]

Here is what i am looking for if anyone wanna see what i am talking about
[URL="http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans"]http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans[/URL]

[MysteryPancake]

GMod has a bunch of gradient textures that have transparency. Just use one of them, that's what they're for:
[B]- vgui/gradient_d (gradient going down)
- vgui/gradient_down (gradient going down)
- vgui/gradient_u (gradient going up)
- vgui/gradient_up (gradient going up)
- vgui/gradient_l (gradient going left)
- vgui/gradient_r (gradient going right)[/B]

[editline]30th December 2016[/editline]

Here's an example of how to use them:

local gradient = Material( 'vgui/gradient_down' ) -- cache before use!

hook.Add( "HUDPaint", "DrawGradient", function()
    surface.SetMaterial( gradient )
    surface.SetDrawColor( 255, 255, 255, 255 ) -- solid white, 0,0,0 is black
    surface.DrawTexturedRect( 0, 0, ScrW(), ScrH() )
end )

If you want the gradient to be on an angle you can use [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/surface/DrawTexturedRectUV]surface.DrawTexturedRectUV[/url]

[editline]30th December 2016[/editline]

By the way, the reason GMod's gradients are transparent are so you can draw a solid shape behind them to make a complete gradient

[editline]30th December 2016[/editline]

Also, in your original code, you are calling HideHud() EVERY SINGLE FRAME in FadeoutHUD_Paint. There's no reason for this. You already make HUDShouldDraw call it, which is the only way to make it actually work in the first place. Please remove it from that hook:

local Settings = {}

Settings.Width = 300
Settings.Height = 100
Settings.PosX = 10
Settings.PosY = 10

Settings.Material = Material( 'vgui/gradient_down' ) -- cache before use!
Settings.Color = Color( 255, 0, 0 ) -- Red gradient for example

function HUDBackground()
    surface.SetMaterial( Settings.Material )
    surface.SetDrawColor( Settings.Color )
    surface.DrawTexturedRect( Settings.PosX, Settings.PosY, Settings.Width, Settings.Height )
end

hook.Add("HUDPaint", "FadeoutHUD_Paint", HUDBackground)

local function HideHud(name)
	for k, v in pairs({"CHudHealth", "CHudBattery", "CHudAmmo", "CHudSecondaryAmmo"}) do
		if name == v then
			return false
		end
	end
end

hook.Add("HUDShouldDraw", "HideDefaultHud", HideHud)

-- See how much simpler this is now?

[xPsycho05]

[QUOTE=MPan1;51600033]GMod has a bunch of gradient textures that have transparency. Just use one of them, that's what they're for:
[B]- vgui/gradient_d (gradient going down)
- vgui/gradient_down (gradient going down)
- vgui/gradient_u (gradient going up)
- vgui/gradient_up (gradient going up)
- vgui/gradient_l (gradient going left)
- vgui/gradient_r (gradient going right)[/B]

[editline]30th December 2016[/editline]

Here's an example of how to use them:

local gradient = Material( 'vgui/gradient_down' ) -- cache before use!

hook.Add( "HUDPaint", "DrawGradient", function()
    surface.SetMaterial( gradient )
    surface.SetDrawColor( 255, 255, 255, 255 ) -- solid white, 0,0,0 is black
    surface.DrawTexturedRect( 0, 0, ScrW(), ScrH() )
end )

If you want the gradient to be on an angle you can use [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/surface/DrawTexturedRectUV]surface.DrawTexturedRectUV[/url]

[editline]30th December 2016[/editline]

By the way, the reason GMod's gradients are transparent are so you can draw a solid shape behind them to make a complete gradient

[editline]30th December 2016[/editline]

Also, in your original code, you are calling HideHud() EVERY SINGLE FRAME in FadeoutHUD_Paint. There's no reason for this. You already make HUDShouldDraw call it, which is the only way to make it actually work in the first place. Please remove it from that hook:

local Settings = {}

Settings.Width = 300
Settings.Height = 100
Settings.PosX = 10
Settings.PosY = 10

Settings.Material = Material( 'vgui/gradient_down' ) -- cache before use!
Settings.Color = Color( 255, 0, 0 ) -- Red gradient for example

function HUDBackground()
    surface.SetMaterial( Settings.Material )
    surface.SetDrawColor( Settings.Color )
    surface.DrawTexturedRect( Settings.PosX, Settings.PosY, Settings.Width, Settings.Height )
end

hook.Add("HUDPaint", "FadeoutHUD_Paint", HUDBackground)

local function HideHud(name)
	for k, v in pairs({"CHudHealth", "CHudBattery", "CHudAmmo", "CHudSecondaryAmmo"}) do
		if name == v then
			return false
		end
	end
end

hook.Add("HUDShouldDraw", "HideDefaultHud", HideHud)

-- See how much simpler this is now?

[/QUOTE]
I tried using the example you used about the Material gradient thing. For some reason it just gives me the missing image material. I do noticed that you said i should cache before use. But how do i do this.

[img]http://i.imgur.com/LpJVAbh.png[/img]

local Settings = {}

--
--  Basic Settings
--

Settings.Width = 100
Settings.Height = 100
Settings.X = "left"
Settings.Y = "bottom"
Settings.PosX = 10
Settings.PosY = 10

--
--  Color Settings
--

Settings.Background = Color( 0, 0, 0, 220 )
Settings.Text = Color( 255, 255, 255, 220 )
Settings.Material = Material( 'gui/gradient_r' ) -- cache before use!
Settings.Color = Color( 255, 0, 0 ) -- Red gradient for example

function HUDBackground()
    surface.SetMaterial( Settings.Material )
    surface.SetDrawColor( Settings.Color )
    surface.DrawTexturedRect( Settings.PosX, Settings.PosY, Settings.Width, Settings.Height )
end

hook.Add("HUDPaint", "FadeoutHUD_Paint", HUDBackground)

Bare with me i am still kinda new to all this lua coding :)
Also the last thing you mention about the FadeoutHUD_Paint. Do you suggest that i hook every single function i make or that i do it like my code above where i add the function to the FadeoutHUD_Paint?

[posix_t9]

You left out the v in vgui/

Also, change the underscore to a dash:

Material( "vgui/gradient-r" )

[xPsycho05]

[QUOTE=IceGT_;51601848]You left out the v in vgui/

Also, change the underscore to a dash:

Material( "vgui/gradient-r" )

[/QUOTE]

Those small mistakes doe.
Thank you very much :)