Tutorial: My first HUD.

[zackiller25]

[b]What is this?[/b]
This is a basic tutorial, what will teach the basics of creating HUDs, with the draw module.

[b]What will I learn[/b]
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

[b]Lets get start![/b]
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. [url]http://wiki.garrysmod.com/wiki/?title=Surface.CreateFont[/url]

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! [url]http://wiki.garrysmod.com/wiki/?title=Lua[/url] (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. :D And sorry about the format of the comments, I made most of it in Notepad++. :P

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:

[SnakeFace]

Pop it in the wiki, in addition to it's sort of, half baked tutorial. And PM me that damn picture of the hud you made me!

[zackiller25]

Lol, that was the HUD. It's was too damn buggy to use, I'll PM a picture of it.

EDIT: You said basic. lol :P

[Nev]

You have quote marks missing in the last two examples and you need to do some code cleaning but overall looks nice. Add it to the Wiki.

[zackiller25]

Thanks, didn't see that! And I checked over it. :p Going make a wiki version later. :D

[jak]

To make your code neater, tab it properly. It's easier to understand then. And try not to make your comments run over two lines because that makes it even harder to understand.

Something like this.
[lua]
// Because the code below is pretty long (okay in some
// browsers it might be) we shall put the comments
// above. And because the comment itself is long, we
// can split it up into FOUR lines.
if ply:GetActiveWeapon():Clip1() == -1 then
[/lua]

And why the hell is this so long?

[lua]
if (((ply:GetActiveWeapon():Clip1()) == -1 or ply:GetActiveWeapon():Clip1() == 0) and ply:GetAmmoCount(ply:GetActiveWeapon():GetPrimaryAmmoType()) == 0) then return end
[/lua]

[lua]
local weap = ply:GetActiveWeapon()
local ammo_count = ply:GetAmmoCount( weap:GetPrimaryAmmoType() )

if( weap:Clip1() <= 0 and ammo_count == 0 ) then
return
end
[/lua]

Well, this is how I would do it anyway.

[b]Edit:[/b]

[quote]Note: There no local, because it would make it local to the if statement[/quote]

It's still going to be a global variable.

[lua]
local Colour
if blah blah then

Colour = Color( 0, 255, 0, 255 )

elseif blah blah then

Colour = Color( 0, 250, 113, 255 )

end
[/lua]

[B]Edit:[/B]

[lua]
math.Round(HealthBoxWidth)//This rounds up player's health.

// No it doesn't, this does:
HealthBoxWidth = math.Round( HealthBoxWidth )
[/lua]

I'm just going to stop now.

[zackiller25]

I know there alot of un-needed things, but I only had 15 minutes to code, and test that! I'm on a computer without GMOD at the minute.

And I didn't even see that round thing, lol, My bad....

[jak]

[QUOTE=zackiller25]I'm on a computer without GMOD at the minute.[/QUOTE]

But you could be teaching people the wrong things. Nobody is going to learn anything if it's wrong and doesn't work.

[JSharpe]

[QUOTE=Vampired]But you could be teaching people the wrong things. Nobody is going to learn anything if it's wrong and doesn't work.[/QUOTE]

You don't learn unless you make mistakes.

[zackiller25]

[QUOTE=Vampired]But you could be teaching people the wrong things. Nobody is going to learn anything if it's wrong and doesn't work.[/QUOTE]
The point is the verson I posted, is working. If I tried to clean the code up on computer without GMOD... Well I wouldn't of been able to debug the code.

[nofearkid]

[QUOTE=Vampired]But you could be teaching people the wrong things. Nobody is going to learn anything if it's wrong and doesn't work.[/QUOTE]
I'm grateful he wrote this. I want to learn more about draws. So you need to be thankful he will take the time to do this for nothing. You wouldn't have done it.

Thanks for the great tutorial.

[FAU78]

So grateful! However, may someone tells me where should these lua files be put?

[MGinshe]

2 year bump? Really :sigh:

Oh and put it in lua/autorun/client

[Ningaglio]

lets daw ah vote tee banz bumper

[Jackthemaster]

BTW now that this topic got revived (sorta), are there any other shapes than draw.RoundedBox?