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

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.

Show us your code


--
--    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
http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

GMod has a bunch of gradient textures that have transparency. Just use one of them, that’s what they’re for:
**- 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)**

[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

surface.DrawTexturedRectUV

[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?


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.



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 :slight_smile:
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?

You left out the v in vgui/

Also, change the underscore to a dash:


Material( "vgui/gradient-r" )

Those small mistakes doe.
Thank you very much :slight_smile: