LUA:Hud Tutorial

__NOTOC____NOTOC__
{{Article|
category = Lua |
name = Hud Tutorial |
author = [[User:KillerLUA|KillerLUA]]|
date = August 17, 2011  |
description = How to create <i>a</i> HUD}}
<br><br>

__TOC__

==Introduction==

Thanks for viewing this tutorial, today we will be creating a DarkRP HUD. Firstly, this is a TUTORIAL and you are meant to learn from it. It's not supposed to be actually used in a practical example no matter how tempting it may be.

This shows you where to start in creating your own hud, and show's a mighty fine example.

==Files==

What hud would be complete without silkicons? Garrysmod uses them everywhere, will we. We're going to need some money icons, and Garrysmod doesn't come with them by default. So head on over to this garrysmod download: http://www.garrysmod.org/downloads/?a=view&id=54408. Maragnus has kindly batch converted all one thousand icons.

Once you have downloaded the file, look for <b>money.vtf</b>, <b>money.vmt</b>, <b>money_add.vtf</b> and <b>money_add.vmt</b>. Copy them over to your garrysmod/garrysmod/materials/gui/silkicons folder. If it does not exist, create it and place your icons in.

==Workspace==

Now you've got the custom icons your ready to go! First let's set up our workspace, we need to get rid of that stupid, old, deprecated hud that some godforsaken person drew up (No offence, but it's terrible).

The file's we need to edit are simply <b>cl_hud.lua</b>, located usually in <b>darkrp/gamemode/cl_hud.lua</b>. If you do not have this file, you need to update to the latest DarkRP SVN as the hud system is totally different. You will end up getting considerably confused.

==Coding==

===Removing the Shitty Hud===

We need to go to <b>cl_hud.lua</b> now and find the area containing the default hud, which should be located near:

<lua>local function DrawHUD()</lua>

Inside this area, cut out all these lines:

<lua>
--Background
draw.RoundedBox(6, 0, Scrh - HUDHeight, HUDWidth, HUDHeight, ConVars.background)

DrawHealth()
DrawInfo()
</lua>

Congratulations, you've freed yourself from the oppression of the default HUD.

===Paving the way===

Now we need to setup our hud and make sure it's called, under the whole:

<lua>local function DrawHUD()</lua>

function, add:

<lua>
local function DoActualHUD()

end
</lua>

We've added our function, but it won't get called on it's own, Near:

<lua>
GunLicense()
</lua>
in the
<lua>
local function DrawHUD()
</lua>
function. Add 
<lua>DoActualHUD()</lua>

====So Far====
<lua>
local function DoActualHUD()

end

local function DrawHUD()
	Scrw, Scrh = ScrW(), ScrH()
	RelativeX, RelativeY = 0, Scrh

	DoActualHUD()
	GunLicense()
	Agenda()
	JobHelp()
	DrawVoiceChat()
	LockDown()

	Arrested()
	AdminTell()
end
</lua>

<br><br><b><i>DoActualHUD()</i> MUST BE ABOVE the <i>DrawHUD()</i> function, or you will get an error along these lines <i>[DarkRP\gamemode\cl_hud.lua:212] attempt to call global 'DoActualHUD' (a nil value)(Hook: HUDPaint)</i></b><br><br>

We need to calculate our money and salary in advance, so let's add that to our <i>DoActualHUD()</i> function.

<lua>
--If the variables table has not be initialized, initialize it
LocalPlayer().DarkRPVars = LocalPlayer().DarkRPVars or {}
	
--If the money is not set, don't do anything
local v1 = LocalPlayer().DarkRPVars.money
if not v1 then v1 = "" end
	
--If the salary is not set, don't do anything
local v2 = LocalPlayer().DarkRPVars.salary
if not v2 then v2 = "" end
</lua>

Now we can move on to drawing

===Drawing on our canvas===

Now it's time to start drawing, garrysmod draw's the HUD every frame. Which is measured by your FPS, (frames per seccond). Since garrysmod redraws every frame. If you don't keep drawing something, it will simply disappear. This moves towards our advantage, as we don't have to mess around and worrying about our HUD's not drawing correctly.

First of all, let's get a background going.

<lua>
draw.RoundedBox(5, 25, ScrH() - 175, 200, 150, Color(25,25,25,200))
</lua>

Why not change the colour?

A sudden buzz of code their, basicly, we're drawing a rounded box with a 5 radius at the bottom left part of the screen. You have to rely on all resolutions, so never make anything bigger than the reasonable 800x600. Another alternative is percentage scaling, so you're hud will scale it's size based on the resolution.

But we're not occupying much space, so we don't need to.

If you play in singleplayer now, you will see a pretty empty HUD glaring at you with nothing on it. Now it's time to draw some icons!

<lua>
surface.SetDrawColor(255,255,255)
</lua>

This makes sure we draw with no specific colour or transparency. Our HUD does not have an alpha (transparency) so we don't specify it.

Now we can draw the icons!

<lua>
surface.SetTexture(surface.GetTextureID("gui/silkicons/user"))
surface.DrawTexturedRect(25 + 10,ScrH() - 160,16,16)
	
surface.SetTexture(surface.GetTextureID("gui/silkicons/money"))
surface.DrawTexturedRect(25 + 10,ScrH() - 140,16,16)

surface.SetTexture(surface.GetTextureID("gui/silkicons/money_add"))
surface.DrawTexturedRect(25 + 10,ScrH() - 120,16,16)
	
surface.SetTexture(surface.GetTextureID("gui/silkicons/group"))
surface.DrawTexturedRect(25 + 10,ScrH() - 100,16,16)
	
surface.SetTexture(surface.GetTextureID("gui/silkicons/heart"))
surface.DrawTexturedRect(25 + 10,ScrH() - 80,16,16)
	
surface.SetTexture(surface.GetTextureID("gui/silkicons/shield"))
surface.DrawTexturedRect(25 + 10,ScrH() - 60,16,16)
</lua>

As the icons get further ahead, I move closer to the bottom of the screen. Hence the <i>ScrH() - 80</i> and so on. If you play, you will find a nice, iconed hud in all it's greatness!

===Information===

Now we need to display some information, this part is just as easy as the others.

<lua>
draw.SimpleText(LocalPlayer():Nick(),"TargetID", 25 + 30,ScrH() - 165, Color(255,255,255), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)
</lua>

Like the background and the images, that's alot to take in. Basicly, we're draw the persons name, with a certain font. At the bottom left corner of the screen and make it white. We also add the correct aligning.

Now we have add the rest!

<lua>
draw.SimpleText("$" .. v1,"TargetID", 25 + 30,ScrH() - 145, Color(255,255,255), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)
draw.SimpleText("$" .. v2,"TargetID", 25 + 30,ScrH() - 125, Color(255,255,255), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)
draw.SimpleText(LocalPlayer().DarkRPVars.job,"TargetID", 25 + 30,ScrH() - 105, Color(255,255,255), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)
draw.SimpleText(LocalPlayer():Health() ,"TargetID", 25 + 30,ScrH() - 85, Color(255,255,255), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)
draw.SimpleText(LocalPlayer():Armor() ,"TargetID", 25 + 30,ScrH() - 65, Color(255,255,255), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)
</lua>

===Result===

[[File:HUD.png]]

==Extension & Links==

How about making the money show like the default DarkRP Hud, with <i>$5,000</i> instead of <i>$5000</i>.

<ul>
<li>[[draw.SimpleText]]</li>
<li>[[surface.SetDrawColor]]</li>
<li>[[surface.SetTexture]]</li>
<li>[[surface.DrawTexturedRect]]</li>
<li>[[surface.GetTextureID]]</li>
<li>[[draw.RoundedBox]]</li>
<li>[[G.LocalPlayer]]</li>
</ul>

==Thanks==

I hope you enjoyed this tutorial, please don't upload the result to garrysmod.org.