Jump to content

[GUIDE] HUD Elements


xanx

Recommended Posts

[GUIDE] HUD Elements

Introduction

 

Hey, XanX here! This is just a quick guide on how to edit and position on-screen heads up display (HUD) elements in-game yourself!

 

 

Default HUD Elements

 

Currently, by default and prior to any edits, this is what the in-game HUD looks like on a typical 16:9 ratio 1920x1080p monitor.

The HUD seems to be very cluttered and not spaced out, we have certain unnecessary HUD elements too.

eSkMXpO.png

XanX's HUD Elements

 

Here is what my edited HUD looks like, a pastebin link with the code can be accessed here: https://pastebin.com/4LM0az6L

xcSxtr9.png

Explanation

 

The in-game HUD elements use a .JS (JavaScript) file in order to determine its properties such as X position, Y position, Opacity, Font Size, Font Colour and many other various editable properties.

 

This specific file (The one described above) is located in your RageMP install folder, typically found in "C:\RAGEMP\client_resources\164.132.206.209_22005\gtalife". (The IP in the folder path is GTA:W server's IP.)

 

The file you're looking for specifically is named "client_hud.js". Which is the file responsible for the HUD element properties for the GTA:W server.

 

Folder View:

  Hide contents

zVpTL3I.png

 

Code

 

By accessing the file using some sort of word processor such as Notepad++; which I highly recommend, you are greeted with a bunch of styling code for the chat. Don't be discouraged however because this guide will walk you through what to change, not to mention that JavaScript can be a very newby friendly piece of code nonetheless...

 

client_hud.js File:

  Hide contents

D2amCsk.png

 

HUD Elements & Properties

 

The values you see for each element code are the same values I use, if you wish to skip the coding part, you may do so by just copying and pasting my code into your own file from the pastebin link above to save you time.

 

Money Elements

 

4KZH3uW.png

 

GTA:World Version Watermark Element

 

5HFL6f3.png

 

The main suggestion from the survey was the ability to hide the these HUD elements. This can be simply done by changing the "color:[#,#,#,#]," property, the colour property uses Red Green Blue Alpha (RGBA) to determine the color of the text, this accepts any values from 0 to 255. Therefore if we change the forth, or in this case, the last number to 0 for example, the text HUD will be rendered invisible because the alpha of the value was set to 0.

 

There are several other changes you can make to this obviously, such as making it use a different font, change the scale if you want them to match in size for example, have the text render a black outline. I won't be walking through the entire process as this should be self explanatory.

 

Code - HUD Wallet Text Lines:

286 - 292

  Hide contents

91VX7jS.png

 

Code - HUD Bank Text Lines:

293 - 299

  Hide contents

XD7B3td.png

 

Code - HUD Watermark Lines:

301 - 307

  Hide contents

8kvbrkh.png

 

 

Fuel Element

 

HEhfxqz.png

 

Speedometer Element

 

S4X4UoP.png

 

Compass | GPS Element

 

lUV96r1.png

 

The main suggestion from the survey was the ability to change the position of these HUD elements. This can be done by changing the purple X and Y values as seen below on the screenshot in the code section. For the fuel specifically, each three elements (When the fuel is green, orange and red (when the values go under a specific threshold)) need to be changed considering the code for the fuel script isn't written in an efficient way. You may also play around with the other values for fuel if you wish to do so, considering they're self explanatory and were explained above, I won't repeat myself.

 

You may use the reference image below in the spoiler as a rough guide to see where your elements will end up dependant on the x and y values you enter.

 

X and Y coordinates on a 1920x1080 16:9 display

  Hide contents

a0RtUX8.png

 

Code - HUD Fuel Lines:

206 - 232

  Hide contents

of5Xrwg.png

 

Code - HUD Speedometer Lines:

250 - 257

  Hide contents

frCpO0e.png

 

Code - HUD Compass | GPS Lines:

259 - 284

  Hide contents

37sIye0.png

 

Final Important Steps

 

After making changes to the file and saving it, it is VERY important to make sure you enter the files properties you've just edited by right clicking on the file in the folder explorer and going into "Properties" at the very bottom. Once inside the properties window, at the very bottom of the "General" tab, you will find a subsection called "Attributes", from there you want to make sure to tick the "Read-only" attribute AFTER making changes to the file and then obviously hit apply to save those changes too.

 

File Properties:

  Hide contents

aJXZenu.png

If this hasn't been done, upon joining the server once again you will re-download the default file from the server basically overwriting your changes. Also, make sure to untick this attribute the next time you want to make changes.

 

If you're worried if this is against the rules... it isn't.

 

Statement from @Nervous:

  Hide contents

0gwvNDN.png

 

Closing Statement

 

Thanks for taking the time of your day to read this guide, if this has helped you make sure to SMASH THAT LIKE BUTTON!

If you have any questions, queries, make sure to ask away below!

 

Take care and happy roleplaying! :)

- XanX.

Edited by XanX
  • Upvote 1
Link to comment
  • 4 months later...
Guest
This topic is now closed to further replies.
×
×
  • Create New...