LUA:Hud Tutorial

From GMod Wiki

Lua: Hud Tutorial

Description:	How to create a HUD
Original Author:	KillerLUA
Created:	August 17, 2011

Contents 1 Introduction 2 Files 3 Workspace 4 Coding 4.1 Removing the Shitty Hud 4.2 Paving the way 4.2.1 So Far 4.3 Drawing on our canvas 4.4 Information 4.5 Result 5 Extension & Links 6 Thanks

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 money.vtf, money.vmt, money_add.vtf and money_add.vmt. 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 cl_hud.lua, located usually in darkrp/gamemode/cl_hud.lua. 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 cl_hud.lua now and find the area containing the default hud, which should be located near:

local function DrawHUD()

Inside this area, cut out all these lines:

 
--Background
draw.RoundedBox(6, 0, Scrh - HUDHeight, HUDWidth, HUDHeight, ConVars.background)
 
DrawHealth()
DrawInfo()
 

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:

local function DrawHUD()

function, add:

 
local function DoActualHUD()
 
end
 

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

 
GunLicense()
 

in the

 
local function DrawHUD()
 

function. Add

DoActualHUD()

So Far

 
local function DoActualHUD()
 
end
 
local function DrawHUD()
	Scrw, Scrh = ScrW(), ScrH()
	RelativeX, RelativeY = 0, Scrh
 
	DoActualHUD()
	GunLicense()
	Agenda()
	JobHelp()
	DrawVoiceChat()
	LockDown()
 
	Arrested()
	AdminTell()
end
 

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

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

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

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.

 
draw.RoundedBox(5, 25, ScrH() - 175, 200, 150, Color(25,25,25,200))
 

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!

 
surface.SetDrawColor(255,255,255)
 

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!

 
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)
 

As the icons get further ahead, I move closer to the bottom of the screen. Hence the ScrH() - 80 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.

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

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!

 
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)
 

Result

Extension & Links

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

• draw.SimpleText
• surface.SetDrawColor
• surface.SetTexture
• surface.DrawTexturedRect
• surface.GetTextureID
• draw.RoundedBox
• G.LocalPlayer

Thanks

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