Home / Forum / Fr ๐Ÿ‡ซ๐Ÿ‡ท | En ๐Ÿ‡ฌ๐Ÿ‡ง / Discussion and Help for Gmod-Glua-Lua / HUD Tutorial for Nordahl Job Agenda Editor

โš—๏ธ HUD Tutorial for Nordahl Job Agenda Editor

img
๐ŸŽ Buyer
๐Ÿ“– Posts: 2
โ†ฉ๏ธ Replies: 0
โค๏ธ Reactions: 0
Girah Posted 1587770394 (Edited) (5450 views)
Script link : Job Agenda Editor

  1. 1. Basics: Understanding and modifying the basic HUD
  2. 2. Advanced: Having a fully customized agenda HUD

First of all: This Tutorial is very simple and basic for a minimal modification of the HUD according to your needs. Some notions will not be covered, so if you are missing something it will be up to you to work on it. But you should know what you need to do what you want.

1. Basics: Understanding and modifying the basic HUD

First of all, it is important to know that everything concerning the agenda HUD is only processed in the file :
nordahl_job_agenda_editor/lua/autorun/nordahl_cl/nordahl_school/rp_planning_cl.lua

Once in this file, go to lines 911 to 916.



Here you can see everything that makes up the HUD in the upper right hand corner that players can see.
Now, let's study and understand this code.

The first part, this one::



Is what draws HUD. "rradient" are functions created above to define the texture of the block.



They are defined at the beginning of the code.

As you will have understood, this is a call of the rradient function three times.
rradient(r,g,b,a,x,y,w,t) will be the only part called each time and that will allow us to draw the desired block. It will break itself down into several points:
- r,g,b are the variables that define the color of the block.
- a defines the transparency of the block. The larger the value, the less transparent the block is. (0= invisible, 255 = maximum opacity)
- x defines where the block starts to be drawn from.
- y defines the height at which the block is drawn from the top of the screen. 0 = at the very top of the screen, and the higher you go, the lower your block goes.
- w defines the length of the block. The more you increase the value, the more the block will lengthen to the right and only to the right (ps: give it the same value as X in positive if you want the block to touch the edge of the screen on the right).

- t defines the size of the block from top to bottom. The principle is the same as for w, the bigger your value is, the longer the block will be, but this time it will be downwards. Negative values are avoided again.

Ps: rradient and zradient have a difference that will be explained below.

rradient(255,255,255,255,ScrW()-180,19,180,47) will therefore give this block:



rradient(255,120,0,100,ScrW()-300,50,250,80) will give this block away:



I'll leave you to play with the values to find the location you need. But be aware that you can make several blocks of different colors.

rradient(255,255,255,200,ScrW()-300,30,250,20)
rradient(255,120,0,100,ScrW()-300,50,250,80)

So let's give these two blocks



Be careful, the blocks can overlap, so make sure you define the Y and T values correctly.

Congratulations! You now know how to change the colors and size of your HUD..

We can therefore attack the second part which is the positioning of the HUD text.
We will therefore focus on these three lines :



You should know that dText is a simple draw.SimpleText function.
For this part: Explanations will be much simpler because we only need to know which values are modified and which ones can stay as they are.

dText("NordaHL Job Agenda "..NCS_VER["nordahl_job_agenda_editor"],"DermaDefault",ScrW()-10,11,Color(255,255,255),2,1,1,Color(0,0,0,255))

Consists of 5 modifiable parts:
-"NordaHL Job Agenda "..NCS_VER["nordahl_job_agenda_editor"] Corresponds to the text displayed on the HUD, This is the Basic Title displayed "NordaHL Job Agenda 3.7".
as NCS_VER[โ€œnordahl_job_agenda_editorโ€] corresponds to a value, there are others and here are those that will surely interest you for sure :
HUDJour(CONFIG.Jour) corresponds to the day you are in play (Monday, Tuesday...)
HUDHeure(CONFIG.Heure) matches the time in play.
CONFIG.Acti corresponds to what's happening at the current time of day. So if on Tuesday at 5pm you have swimming pool, CONFIG.Acti will display "Swimming pool".
These are the three values you will probably need the most.
ATTENTION these values must always be separated from the texts by two dots = โ€œTexteโ€..CONFIG.Acti ou alors CONFIG.Acti..โ€Texteโ€

So,



Will give this result :



- DermaDefault Corresponds to the font displayed. You can change it with one of the basic fonts of Gmod ( see this https://maurits.tv/data/garrysmod/wiki/wiki.garrysmod.com/index5b6d.html)

- ScrW()-10,11 corresponds to the positioning of the text in x,y. -10 corresponding to x (so the more the value goes down to the negative, the more the text will be on the left) and 11 to y (the more the value goes up to the positive, the more the text will go down)

- Color(255,255,255) simply corresponds to the color of the displayed text.

- 2,1,1 are very interesting: it is the positioning of text :
- 1 : CENTER
- 2 : ALIGN_LEFT
- 3 : ALIGN_RIGHT
Namely that the first number acts on the horizontal alignment, and the second vertical. The third one always leaves it at 1.
So, if you want to have a text perfectly centered and that can matter its content by always staying in the same place, I recommend the values 1,1,1.

Now you know everything you need to know about editing and placing text in your HUD. So you have all the cards in hand to switch from the basic HUD:



To a completely different style:



Congratulations! You now know how to completely change the basic HUD of the Job Agenda Editor!

2. Advanced: Having a fully customized agenda HUD

This second part will be shorter but requires a good understanding of the basics explained above. You will now learn how to add a custom texture and how to add a new font.

For a custom texture or even an image, you must first create the material and the function that will create the block containing that image. To do this, nothing could be simpler! First, go back to these lines



First you need to define the new material you will be using, like this:



Then recall it in a function that will create the block of the image, simply copy one of the two lines already present and modify it to make it a new function, which will result in :



Then go back to the lines that draw the blocks and declare your new texture in the same way as rradient, which will result in :



and will display :



You can of course change the location and size of the image, the principle remains the same as seen above.

You just have to play with the texts to position according to your desires. Try to have a clean result like this:



Well, the image is installed but the text should follow the style a little better. To do this, you must first get the .ttf file of the font you want to add to your calendar.
Found here for example: https://www.1001freefonts.com/ but you'll only get .otf, so get them converted to .tff here: https://convertio.co/fr/otf-ttf/.
Then you add this file in a fonts folder, itself stored in a resource folder. You will put this resource folder in the collection downloaded by the players.

You will now declare this famous new fact that you have just imported in your gmod. ( voir https://wiki.facepunch.com/gmod/surface.CreateFont)

So you'll have this:



WARNING : Friendly Schoolmates is the name of the fonts itself, don't put the fonts.ttf file name as it won't work.

Then go to the lines displaying the hud texts and replace the "Dermadefault" section with the name of your new font, here "newfonthud". This will result in :



For a result:



There you go! Now you know how to modify the HUD of the Job Agenda Editor addon and tune it to your wishes!

This Tutorial was created by Girah
โ›”๏ธ Sorry, you are not connected, join to leave a reaction

Replies