[Tutorial] Creating a HUD Element/Text (Basics)

[iAegle]

Hi

Dont know what to put here

Note: that this tutorial is based on what I know, not everything might be shown!
Note 2: I'm assuming that you know the basics of modding, like where to put the code!
Note 3: I'm sorry, you have to read the whole tutorial to understand most of it :p

General Text Information

Fonts:

bigfixed
smallfixed
objective
default

Tell me if you know more

Color Codes:

^0 = Black
^1 = Red/Orange
^2 = Lime Green
^3 = Yellow
^4 = Dark Blue
^5 = Light Blue
^6 = Purple
^7 = White/Default
^8 = Black

Text Method 1

CreateFontString
We start off with: CreateFontString
This is (In my case) the most used way to create some text on screen

In this example our text name will be: self.someText
the reason why its called "self.name" is because this is needed for deleting the text on death or whenever you want it do be deleted

It all starts with this:

PHP Code:

self.someText = createFontString( <font> , <fontScale> ); 


this will tell the script that "self.someText" is the name of a FontString which is used to create the text. There are 2 things you can fill in in this which are:

<font> Put whatever font you want here, make sure you put it in like this: "FONT"
<fontScale> This will define the fontsize, 1.0 is normal

setPoint
After we've done that we want to choose the position of the text this is done with the following:

PHP Code:

self.someText setPoint(<POINT1>, <POINT2>, <POINT3>, <POINT4>); 


make sure you put your text name in front if it with a space bar between it.
As you see there are 4 options to fill in:

<POINT1> This is the Horizontal "Point"
<POINT2> This is the Vertical "Point"
<POINT3> This can either be a Number (X) or a "Point". (Horizontal)
<POINT4> This can either be a Number (Y) or a "Point". (Vertical)

"Point" means you have to put in a Word WITH the " " .

The following words are possible to use with "Point", no explanation needed:

Horizontal:
LEFT
RIGHT
CENTER

Vertical:
BOTTOM
TOP
CENTER

Note: there are more, but I dont suggest you use these.

setText
Obviously we want it to show some text, the following code will add that text:

PHP Code:

self.someText setText( <Text> ); 


There is only one thing to fill in which is <Text>, its pretty self explaining but make sure you use " " these again. Note that you can use Color Codes in here, just put ^1 or whatever color you want in front of your text like:

"^1Hi, this text is Red!"

on screen it looks like this:

Hi, this text is Red!

These we're the basics of the CreateFontString method.

After you've done this your code looks something like this:

PHP Code:

self.someText = self createFontString( "Objective", 1.5 );
self.someText setPoint( "CENTER", "CENTER", "CENTER", "CENTER" );
self.someText setText( "^2Welcome, this text is green!" ); 


This'll put some text in the middle of your crosshairs/screen

Text Method 2

Now we continue with the other methods which are hint messages, notifications and other text showing codes(dont really know how to call it :p)

Hint Message
A hint message is a great way to display some information for a short time, like if someone killed an important player or captured an objective.
its a very simple and easy to use code(had to use a quote to show the slash -.-):

self maps\mp\gametypes\_hud_messages::Hintmessage(<Text> , <Duration>);

You need to fill in 2 things which I'm not going to explain because its obvious :p

Killfeed text
Another very simple and handy code to show some text, it displays some text in the killfeed

PHP Code:

iPrintLn ( <Text> );
AllClientsPrint ( <Text> ); 


The first one shows some text on a certain player or team, the other one shows some text to everyone. put your text at <Text> again make sure you use " "
(I dont suggest to put the second one on onPlayerSpawned as it will showup everytime someone spawns :p)

Notifications
This is kinda like a hintmessage but different (lol)

PHP Code:

self iPrintlnBold( <Text> ); 


Creating HUD Items and Shaders(Pics)

createIcon
In this chapter we start off with creating Shaders on screen, this will put an image on a by you assigned position.

Our iconname in this example is: newIcon

Here is the basic way to place a picture on screen:

PHP Code:

self.newIcon = self createIcon( <Shader/icon Name> , <Shader height> , <Shader width> ); 


You can fill in the fields as you want, here is an explanation:

<Shader/icon Name> Put your shader/icon filename in here, example: "hud_suitcase_bomb"
<Shader Height> This is the height of the shader, not the position! put in the size in pixels (not sure though)
<Shader Width> This is the length of the shader, not the position! put in the size in pixels

To define the position of the shader you can use setPoint the same way as you did with you text.

Creating a bar or square on your HUD
This one is a bit more complicated as it requires more lines (to me it doesn't make any difference but well). First off we need to have a name for our bar I'll call it: self.newBar

as always we start of with this:

PHP Code:

self.newBar = createBar( <RGB Color> , <width> , <height> ); 


How to use:

<RGB Color> I assume everyone knows what RGB is use it like this: ( 0, 0, 0,) to be sure first 0 is the Red # second one is Green # and last one is Blue #

Rest is self explaining

The rest of the bar code is shown under with explanation:

PHP Code:

self.newBar setShader("white", <width> , <height>);
self.newBar.alignX = <POINT1>;    
self.newBar.alignY = <POINT2>;
self.newBar.x = <X Number>;
self.newBar.y = <y Number>; 


<width> Width of the bar
<height> Height of the bar
<POINT1> Horizontal "Point" same use as the text
<POINT2> Vertical "Point"
<X Number> Horizontal offset (Number)
<Y Number> Vertical offset (Number)

Here is an example of what the code should look like in the end:

PHP Code:

self.bar = self createBar((0, 0, 0), 135, 20);
self.bar setShader("white", 135, 20);    
self.bar.alignX = "LEFT";                
self.bar.x = 55;                        
self.bar.y = 414;                        
self.bar.alpha = 0.50;                    
self.bar.HideWhenInMenu = true;            
self.bar.foreground = false; 


As you see I didn't use the alignY line because I didn't find it necessary. If you are paying attention you also noticed the 3 extra lines, I'll explain these later .

Creating a health or ammo bar
This is another great HUD element, I could explain it all but there is a great tutorial posted about this already. credits go to Alistair3149

CLICK FOR HEALTH/AMMO BAR

[Lemon]

Nice tutorial but; It would have been better, if you've added ingame screenshots for each type of text.

[iAegle]

Nice tutorial but; It would have been better, if you've added ingame screenshots for each type of text.

I can do that, but not now coz I'm going to eat
I was planning on updating it with some more information also so next time I'll add some pics

[d0h!]

much appreciated! thanks IAegle

[Pozzuh]

Nice tutorial.

[themortifyd]

Very well described excellent job.

[Tomsen1410]

Nice

[GoldenWrapper]

When I do the killfeed text, it prints the same text about 10 times in combat training.

Code:

printRules()
{
     self endon("disconnect");
     self endon("death");
     iPrintLn ( "^1Killstreaks:" );
     wait 1.00;
     iPrintLn ( "^17 Kills: Dragon's Breath" );
     wait 1.00;
     iPrintLn ( "^116 Kills: Ray Gun" );
     wait 1.00;
     iPrintLn ( "^125 Kills: Mustang & Sally; Overpowered!" );
     wait 10.00;
     self thread printRules();
}

Help?

[JariZ]

Code:

printRules()
{
     self endon("disconnect");
     self endon("death");
     while(1)
     {
     iPrintLn ( "^1Killstreaks:" );
     wait 1.00;
     iPrintLn ( "^17 Kills: Dragon's Breath" );
     wait 1.00;
     iPrintLn ( "^116 Kills: Ray Gun" );
     wait 1.00;
     iPrintLn ( "^125 Kills: Mustang & Sally; Overpowered!" );
     wait 10.00;
     }
}

Wrote this on a mobile device :p