What is this?
This is a basic tutorial, what will teach the basics of creating HUDs, with the draw module.
What will I learn
You will learn how to use:
draw.RoundedBox()
draw.SimpleText()
hook.Add
How to hide HL2’s HUD.
How to displace Health, or Weapon information
Lets get start!
Ok first off, I’m going show a load of text, what you may or may not understand.
[lua]
function HUD()
local ply = LocalPlayer()
if ply:Health() < 0.1 then return end
if !ply:Alive() or !ply:IsValid() then return end
//Health HUD
draw.RoundedBox(4, 20, 20, 200, 20, Color(0,0,0,255))
local HealthBoxWidth = ply:Health()
local HealthBoxWidth = ((HealthBoxWidth*2)-4)
local HealthBoxWidth = math.Round(HealthBoxWidth)
if HealthBoxWidth > 156.5 then
Colour = Color(0,255,0,255)
elseif HealthBoxWidth > 130 then
Colour = Color(0,250,113,255)
elseif HealthBoxWidth > 98 then
Colour = Color(255,150,0,255)
elseif HealthBoxWidth > 98 then
Colour = Color(255,0,0,255)
end
draw.RoundedBox(4, 22, 22, HealthBoxWidth, 16,Colour)
//Weapon code....
if ply:GetActiveWeapon() == NULL or ply:GetActiveWeapon() == nil then return end
if (((ply:GetActiveWeapon():Clip1()) == -1 or ply:GetActiveWeapon():Clip1() == 0) and ply:GetAmmoCount(ply:GetActiveWeapon():GetPrimaryAmmoType()) == 0) then return end
//first part....
draw.RoundedBox(4, 20, 45, 45, 45, Color(0,0,0,255))
draw.RoundedBox(2, 22, 47, 41, 41,Color(255,255,0,255))
if ply:GetActiveWeapon():Clip1() == -1 then
text = ply:GetAmmoCount(ply:GetActiveWeapon():GetPrimaryAmmoType())..""
else
text = ply:GetActiveWeapon():Clip1()..""
end
draw.SimpleText(text.."", "ScoreboardText", 35, 60, Color(0,0,0,255))
//Second part.
if (((ply:GetActiveWeapon():Clip2()) == -1 or ply:GetActiveWeapon():Clip2() == 0) and ply:GetAmmoCount(ply:GetActiveWeapon():GetSecondaryAmmoType()) == 0) then return end
draw.RoundedBox(4, 80, 45, 45, 45, Color(0,0,0,255))
draw.RoundedBox(2, 82, 47, 41, 41,Color(255,255,0,255))
draw.SimpleText(ply:GetAmmoCount(ply:GetActiveWeapon():GetSecondaryAmmoType()).."", "ScoreboardText", 98, 60, Color(0,0,0,255))
end
hook.Add(“HUDPaint”, “HUD”, HUD)
[/lua]
First off, I’m going show the first bit of code.
[lua]
function HUD() //This starts a function with the name, HUD, this can be ended with an “end”.
local ply = LocalPlayer() //This makes ply the same as LocalPlayer().
if ply:Health() < 0.1 then return end //In english. If MyHeath is lower then 0.1 then return back to start, and end.
if !ply:Alive() or !ply:IsValid() then return end //In english. If I am not Alive, or I am a server, then return to start and end [/lua]
Now that wasn’t so bad? Keep in mind every function needs to be ended, and so does every if statement!
Now for the big bit!
[lua]
//Health HUD
draw.RoundedBox(4, 20, 20, 200, 20, Color(0,0,0,255)) //This creates a box what’s rounded, and set to black.
local HealthBoxWidth = ply:Health() //This is the same as LocalPlayer():Health(), but I made it eaiser on myself by using ply.
local HealthBoxWidth = ((HealthBoxWidth*2)-4)//This times your health by 2, then takes 4 away.
local HealthBoxWidth = math.Round(HealthBoxWidth)//This rounds up player’s health.
if HealthBoxWidth > 156.5 then // In english. If HealthBoxWidth is greater then 156.5 then return true, and allow for next bit of code.
Colour = Color(0,255,0,255) //This makes Colour the same as the Color table Color(0,255,0,255) Note: There no local, because it would make it local to the if statement
elseif HealthBoxWidth > 130 then //This starts a new If statement within the one I made before.
Colour = Color(0,250,113,255)
elseif HealthBoxWidth > 98 then
Colour = Color(255,150,0,255)
elseif HealthBoxWidth > 98 then
Colour = Color(255,0,0,255)
end //This ends the if statement
draw.RoundedBox(4, 22, 22, HealthBoxWidth, 16,Colour) //this creates a rounded box inside the black one I made before. Note: I used HealthBoxWidth for the width. Note: I’m using the Colour string.
[/lua]
Ok, I’m going walk through the draw module, I just used.
[lua]
//RoundedBox
//This is the basic format of the RoundedBox.
draw.RoundedBox( Number Bordersize, Number X, Number Y, Number Width, Number Height, Table Colour ) //The Colour table is made up of 4 numbers, used to set colours within Lua.
//SimpleText
//Simple text can be very useful, because Lua allows you to create your own fonts.
draw.SimpleText( String Text, String Font, Number X, Number Y, Table Colour) //String text means the text you want, String font is the font you want, or the one you made before.
[/lua]
For more information on making fonts, look here. http://wiki.garrysmod.com/wiki/?title=Surface.CreateFont
This next part will show how to displace ammo, and other things.
[lua]
//Weapon code…
if ply:GetActiveWeapon() == NULL or ply:GetActiveWeapon() == nil then return end // In english. Get my weapon, and if it’s nothing then return to start, and end
if (((ply:GetActiveWeapon():Clip1()) == -1 or ply:GetActiveWeapon():Clip1() == 0) and ply:GetAmmoCount(ply:GetActiveWeapon():GetPrimaryAmmoType()) == 0) then return end //In english. (Get Clip1’s ammo if it -1, or Get Clip1’s ammo if it 0) and if Primary attack ammo, what not in clip, if it’s 0, then return to start, and end //This stops the weapon stop drawing when you have a weapon waht doesn’t use ammo.
//first part....
draw.RoundedBox(4, 20, 45, 45, 45, Color(0,0,0,255)) //Create a black rounded box, for the background
draw.RoundedBox(2, 22, 47, 41, 41,Color(255,255,0,255)) //Creates another one on top, but it's yellow
if ply:GetActiveWeapon():Clip1() == -1 then //In engish. Get Clip1's ammo if it -1 then do next code. This is used for weapon_frag, and weapon_rpg, as they use a different ammo format.
text = ply:GetAmmoCount(ply:GetActiveWeapon():GetPrimaryAmmoType()).."" //Create a String with the ammo not loaded
else
text = ply:GetActiveWeapon():Clip1().."" //Creates a String with ammo in gun.
end
draw.SimpleText(text.."", "ScoreboardText", 35, 60, Color(0,0,0,255)) //This displace Text, what has the String number of ammo in gun.
//Second part.
if (((ply:GetActiveWeapon():Clip2()) == -1 or ply:GetActiveWeapon():Clip2() == 0) and ply:GetAmmoCount(ply:GetActiveWeapon():GetSecondaryAmmoType()) == 0) then return end //This is same as before, but keeps Clip2
draw.RoundedBox(4, 80, 45, 45, 45, Color(0,0,0,255)) //Creates a box liek before, but downer the X aixes.
draw.RoundedBox(2, 82, 47, 41, 41,Color(255,255,0,255))
draw.SimpleText(ply:GetAmmoCount(ply:GetActiveWeapon():GetSecondaryAmmoType()).."", "ScoreboardText", 98, 60, Color(0,0,0,255)) // This displaces Clip2 ammo.
[/lua]
That was alot to take in.
Notes: … Connects a integer with a String.
Last of all, well for this function!
[lua]
end //This ends function, and the code won’t be loaded up until, it’s be called, or hooked.
[/lua]
Now we’re going hook the function to HUDPaint, what will paint all are information.
[lua]
hook.Add("HUDPaint, “MyHUD”, HUD) //This hooks are HUD function to HUDPaint, this allows us to draw every RoundedBox, and SimpleText.
[/lua]
For more information on using hooks within Garrysmod, look here! http://wiki.garrysmod.com/wiki/?title=Lua (Just under Hook Reference.)
Last of all. We need to stop HL2’s HUD painting.
[lua]
function hidehud(name)
for k, v in pairs {HudHealth", “CHudBattery”, “CHudAmmo”, “CHudSecondaryAmmo”} do
if name == v then return false end return true end
end
hook.Add(“HUDShouldDraw”, “hidehud”, hidehud)
[/lua]
This should stop HL2’s HUD drawing, but I think CHudAmmo part isn’t working.
If you have a suggest to make this better, say. 
And sorry about the format of the comments, I made most of it in Notepad++. 
If you need help, post on the topic! Also, add something to it, and post a image of it, I would love to see what you’ll made out of it. :love: