• 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] Creating a HUD Element/Text (Basics)
#1
Hi Smile

Dont know what to put here Big Grin

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:
Quote:bigfixed
smallfixed
objective
default


Tell me if you know more Smile

Color Codes:
Quote:^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:
Quote:<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:
Quote:<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:
Quote: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:
Quote:"^1Hi, this text is Red!"
on screen it looks like this:
Quote: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 -.-):
Quote: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:
Quote:<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:
Quote:<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 Number>;
self.newBar.= <y Number>; 

Quote:<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((000), 13520);
self.bar setShader("white"13520);    
self.bar.alignX "LEFT";                
self.bar.55;                        
self.bar.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 Smile.

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

(08-10-2011, 12:58)Pozzuh Wrote:
Se7en Wrote:Stealed, from cod4 mod ...
look who's talking

[Release] Old School Mod v2.2
[Release] Scroll menu

  Reply
#2
Nice tutorial but; It would have been better, if you've added ingame screenshots for each type of text.
  Reply
#3
(03-07-2011, 18:42)Lemon Wrote: 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 Big Grin
I was planning on updating it with some more information also so next time I'll add some pics
(08-10-2011, 12:58)Pozzuh Wrote:
Se7en Wrote:Stealed, from cod4 mod ...
look who's talking

[Release] Old School Mod v2.2
[Release] Scroll menu

  Reply
#4
much appreciated! thanks IAegle
  Reply
#5
Nice tutorial.
[Image: MaEIQ.png]
  Reply
#6
Very well described excellent job.
  Reply
#7
Nice Smile
  Reply
#8
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?
[Image: mca.png]
Add me on steam! otterm
  Reply
#9

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
  Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Getting text from a website JustDoingThisShit 2 2,574 10-21-2013, 08:00
Last Post: JustDoingThisShit
Information How to change text messages in MP (.ff edit) giofrida 5 4,346 05-02-2013, 20:05
Last Post: Pozzuh
  Upload Clipboard Text data to a server DidUknowiPwn 14 7,345 04-13-2013, 14:48
Last Post: SuperNovaAO
  text book [HARD] Tony. 2 2,444 03-13-2013, 19:39
Last Post: Nekochan
  [Tutorial] Creating call of duty fonts from stock tomglazer 2 4,654 02-25-2013, 19:32
Last Post: JariZ
  Help Creating Wait Binds for a consecutive button presses? clxyeah 3 2,838 02-10-2013, 14:01
Last Post: koil
Sad Help - HUD element Crash Server ((( xtreme2010 4 3,599 01-20-2013, 09:22
Last Post: archit
  [Tutorial] Creating mods for zombies with modtools Lost4468 24 21,975 12-11-2012, 01:52
Last Post: DidUknowiPwn
Question Help Print text on screen koro35 4 4,290 11-18-2012, 00:24
Last Post: koro35
  Help writing text to file (VB2008) dylankrajewski 2 2,900 11-05-2012, 14:32
Last Post: dylankrajewski

Forum Jump:


Users browsing this thread: 2 Guest(s)