Making A Tremulous Hud

[Volt]

BTW do you have more tutorials? i'm trying to make a hud but i need more info

I've always wanted to, but somehow never get to. Probably cause I don't know how.
I'm on a Mac by the way
So heres my question (to all HUD-Makers)- how DOES one make an HUD?
If you have an answer, please do share it. If you don't- go to another topic please :-)
 

"Kk lets get started the short and simple way to making a Heads up display for tremulous"

Step 1
Getting a kickass Text editor
Windows  Notepad++ FullVersion
Mac Textwrangler Free
Multi Platform JEdit Free/Opensource


Step 2 Creating a Project Folder
"Bassically what you want to do is create a folder named "ui", or "W/e name you want" and place it in the right location (Tremulous Base) so you're able to build a hud."

Windows 2000

Code: [Select]

C:/Program Files/Tremulous/Base/

Windows xp service pack 1&2

Code: [Select]

C:/Documents and Settings/Your Login Name/Application Data/Tremulous/base/
Windows Vista

Code: [Select]

c:/ProgramData/Microsoft/Windows/Start Menu/Programs/Tremulous/base/

Mac

Code: [Select]

~/Library/Application Support/Tremulous/base/
Linux

Code: [Select]

~/.tremulous/base/
Step 3 Gathering Files to base a hud on (Refrence Huds)
Hud's On my Web Folder
Hud Catalog

Recommended huds to look for for reference
Volt Hud 1.8 bias
K-Otic&Exclamation hud Very well put togehter, they've set the standards of tremulous Huds

Additionally you can just start from scratch, and use the tremulous default hud as your base.

Step 3.a Getting tremulous Defualt hud files

In your base folder there is a file named data-1.1.0.pk3 You need to copy that and paste it in a safe location(DO NOT REMOVE OR MODIFY THE ORIGINAL data-1.1.0.pk3), Then rename the filetype of data-1.1.0.pk3 to data-1.1.0.zip then proceed to extract it. This might take some time after it is done extracting you'll have a folder named data-1.1.0 open it up and navigate to the Ui folder, use anything from this directory to build your hud.

I've taken into consideration that some might not be able to do the above steps so i've extracted that folder from the data-1.1.0.pk3 for you Ui.zip

Step 4 Creating a well orginized hud using Oticz amazing hud orginazation format
This format is catagorising-not real word, everything into more specific groups.

Main

-Then subgroups

assets,hud,Menu

In the Hud-Directory you place everything that effects the hud.
in the Menu -Directory you place everything that effects the menus.
In the Assets- Directory you place things you want to use in your project, raw media formats.
Some huds that use this format are VoltHud1.8/ k-otichud2.2 /MoxHud1.3

step 4.a making a well orginized project folder
Inside your allready created project folder create these directories(Folders) hud,menu,assets.
Hud-inside this folder should be 3 folders,default,common,yourhud.
menu-nothing fancy in here just place all your menu files in here
assets-this directory should have 4folders.
1. menu-where you place your menu gfx,2.neutral-neutral images go here,like a logo, 3.sounds-intromusic, or menu button sounds should go here, and last 4.thumbs-this is for thumbnail views of hudstyles or menu, bassically anything you want to thumbnail,those imagines would fall under this directory.

step 4.a.1 i took into consideration that some might not want to go through all that so i've put together a sample project folder, including the industry standard features sampleprojectfolder.zip Great template for anyone instrested in making a well built hud.(skip to step 5 if you have chosen to use template)

step 4.b
If you didnt use the template above you're going to need to create a install.cfg,uninstall.cfg,and a menu.cfg.
Install.cfg-is a cfg file that tells tremulous what to set cvars to make sure to save this in the main part of your project folder (optional as install.cfg),example

Code: [Select]

//cvar switches for your hud or any other settings
seta cg_hudfiles "ui/hud/test/hud.cfg"
seta ui_menufiles "ui/menus.cfg"
vid_restart
Uninstall.cfg- is a cfg file that is used to reset the cvars that were set in the install.cfg, bassically undo the changes done in the install.cfg,make sure to save this in the main part of your project folder(optional as kill.cfg)

Code: [Select]

// unstaller yourhud (place in reset commands to reset cvars in your huds uninstallation)
reset cg_hudfiles
reset ui_menuFiles
vid_restart

menus.cfg-this is where you list all the locations of all the .menu files you wish to use in your project(excluding anything that is ingame like human hud,alien hud). save this in the main part of your project folder.

Code: [Select]

// menu defs
//
{
  loadMenu { "ui/menu/main.menu" }
  loadMenu { "ui/menu/joinserver.menu" }
  loadMenu { "ui/menu/punkbuster.menu" }
  loadMenu { "ui/menu/createserver.menu" }
  loadMenu { "ui/menu/mod.menu" }
  loadMenu { "ui/menu/credit.menu" }
  loadMenu { "ui/menu/connect.menu" }
  loadMenu { "ui/menu/password.menu" }
  loadMenu { "ui/menu/quit.menu" }
  loadMenu { "ui/menu/addfilter.menu" }
  loadMenu { "ui/menu/error.menu" }
  loadMenu { "ui/menu/serverinfo.menu" }
  loadMenu { "ui/menu/findplayer.menu" }
  loadMenu { "ui/menu/quitcredit.menu" }
  loadMenu { "ui/menu/createfavorite.menu" }
}
If you make some new menu, example a hud options menu you'll need to include its location in that file.

4.c Making a folder for a hud
(Optional But recommened The folder has to be in this directory ui>hud>HERE!)
so in the hud directory create a folder for a hudstyle, example create a folder named "center".
example: ui>hud>center

4.c.1
You should now be in ui>hud>Yourhud
in this directory you'll need to create 5 files.

alien_builder_hud.menu-this is where you edit the alien builder hud a.k.a fatty granger hud,make sure to save this file under ui>hud>yourhud,(Optional but recommened as alien_builder_hud.menu) example

Code: [Select]

#include "ui/menudef.h"

// Volt
//this file links to the stuff in alien_common_hud.cfg

{
  menuDef
  {
    name "alien_builder_hud"
    fullScreen MENU_FALSE
    visible MENU_TRUE
    rect 0 0 640 480

    #include "ui/hud/center/alien_common_hud.cfg"
  }
}
alien_general_hud.menu-this hud is for any class excluding the builder(granger fatty!)make sure to save this file under ui>hud>yourhud,(Optional but recommened as alien_general_hud.menu)  example

Code: [Select]

#include "ui/menudef.h"

// Volt
{
  menuDef
  {
    name "alien_general_hud"
    fullScreen MENU_FALSE
    visible MENU_TRUE
    rect 0 0 640 480


    #include "ui/hud/center/alien_common_hud.cfg"
//edit from here down this includes everything in alien_common_hud.cfg, and adds goon barbs


    //BLOB
    itemDef
    {
      name "blob"
      rect 311 250 18 60
      visible 1
      forecolor 1 .677638 .345144 .8
      background "ui/assets/alien/tremublob.tga"
      ownerdraw CG_PLAYER_POISON_BARBS
  //Volt
    }
  }
}
alien_common_hud.cfg-this is using a common file so you can just link to it, example in alien_builder,and alien_general we link to this common cfg,bassically place anything thats common between the alien_builder.menu,and alien_general.menu in here. somethings that would be included here would be backdrops and stage indicators.(You dont need a menudef for this file just list itemdef's. make sure to save this file under ui>hud>yourhud,(Optional but recommened as alien_common_hud.cfg)

Code: [Select]

// Volt
//edit this to change alien hud

#include "ui/hud/common/alien.cfg"
#include "ui/hud/common/chatmenu_alien.cfg"
//edit from here down
 
//Stage Display
    itemDef
    {
      name "stageDisplay"
      align ITEM_ALIGN_CENTER
      textscale .3
      textstyle ITEM_TEXTSTYLE_SHADOWED
      rect 280 470 100 23
      forecolor 1 .677638 .345144 .7
      decoration
      visible 1
      ownerdraw CG_STAGE_REPORT_TEXT
  //Volt
    }
 
human_hud.menu-unlike the alien hud, the human hud requires only a single file for all its itemdefs,so place all itemdefs for the human hud in here. Make sure to save this file under ui>hud>yourhud (Optional but recommened as human_hud.menu.) example

Code: [Select]

#include "ui/menudef.h"

{
  menuDef
  {
    name "human_hud"
    fullScreen MENU_FALSE
    visible MENU_TRUE
    rect 0 0 640 480

#include "ui/hud/common/human.cfg"
#include "ui/hud/common/chatmenu_human.cfg"
//edit from here down


 

    }
  }
}



files that do not directly pertain to the hud directory but are required.

spectator_hud.menu-this is a very common file especially if you have more than one hudstyle,this just list the itemdefs for the spectator hud,bassically what you can place in here is watermarks,your name or anything else. Make sure to save this file under ui>hud>common (Optional but recommened as spectator_hud.menu) example

Code: [Select]

#include "ui/menudef.h"

// volt

{
  menuDef
  {
    name "default_hud"
    fullScreen MENU_FALSE
    visible MENU_TRUE
    rect 0 0 640 480

    #include "ui/hud/common/chatmenu_spec.cfg"
//edit from here down, just paste itemdefs or use the standardhuds spectatorhud as a template.


    }
  }
}

Teamscore.menu-this is that menu that appears when you press tab, or any key binded to +scores. Make sure to save this file under ui>hud>common (Optional but recommened as teamscore.menu) example

Code: [Select]

#include "ui/menudef.h"

{
  \\ score_menu \\

  menuDef
  {
    name "teamscore_menu"
    visible 0
    fullscreen 0
    rect 0 0 640 480
    focusColor 1 .75 0 1
    style 0
    border 1
//edit from here down,use someone else hud's
//teamscore as teamplate or use the standard and edit it.


   
    }
  }
}


loading.menu-this is that menu that appears when you join a server and see the bars, Make sure to save this file under ui>hud>common (Optional but recommened as loading.menu) example

Code: [Select]

#include "ui/menudef.h"

{
  assetGlobalDef
  {
    cursor "ui/assets/3_cursor3"      // cursor
    gradientBar "ui/assets/gradientbar2.tga"  // gradient bar
    fadeClamp 1.0         // sets the fadeup alpha
    fadeCycle 1         // how often fade happens in milliseconds
    fadeAmount 0.1          // amount to adjust alpha per cycle

    shadowX  5          // x amount for shadow offset
    shadowY  5          // y amount for shadow offset
    shadowColor 0.1 0.1 0.1 0.25      // shadow color

    font "fonts/font" 26        // font
    smallFont "fonts/smallfont" 20      // font
    bigFont "fonts/bigfont" 34      // font
  }

  menuDef
  {
    name "Loading"
    rect 0 0 640 480
    fullScreen MENU_TRUE
//edit from here down,use someone else hud's loading as template
//or edit original tremulous loading.

   
    }
  }
}

hud.cfg-this is where you list the locations of all the files that will be used in your hudstyle,list the locations of the human_hud.menu,alien_builder_hud.menu,alien_general_hud.menu,spectator_hud.menu,teamscore.menu,and loading.menu.Make sure to save this file under ui>hud>yourhud (Optional but recommened as hud.cfg)

Code: [Select]

// hud menu defs
//
{
  loadMenu { "ui/hud/center/human_hud.menu" }
  loadMenu { "ui/hud/center/alien_builder_hud.menu" }
  loadMenu { "ui/hud/center/alien_general_hud.menu" }
  loadMenu { "ui/hud/common/spectator_hud.menu"}
  loadMenu { "ui/hud/common/teamscore.menu" }
  loadMenu { "ui/hud/common/loading.menu" }
}


Step 5 Actually coding the hud and testing it!
Working Enviroment
The working environment-you want to have as much free ram as possible, so close them applications.
After you've done that open your text editor (Hopefully tab supported) and then minimize it, open tremulous get it into halfscreen.

Half screen

windows-press alt+enter to enter halfscreen mode.
mac- press apple+enter to enter halfscreen mode.
linux-volt needs help


step 5.a installing your test hud
bring up up tremulous and install your test hud,this is bassically calling on your install.cfg in the main part of the project folder, additionally you can just manually set the commands in console

Code: [Select]

/seta cg_hudfiles "ui/hud/"the location of your hud.cfg in your hudstyle folder.
seta

Code: [Select]

/ui_menufiles "ui/menus.cfg" the location of the menus.cfg in the main part of your project folder. then for the changes to take effect you need to type in

Code: [Select]

/vid_restart
Step 5.a Working on menus
In your text editor open up a menu you wish to change, for learning purposes were going to tag up the mainmenu. So open up main.menu in your text editor the files location should be ui>menu>main.menu
ok after you've opened it up we're going to edit some code,frist line is going to be line 128

Code: [Select]

text "Tremulous (C) 2005-2006 darklegion development" change that to

Code: [Select]

text "YOUR NAME i am HUD CODDER WOOT!" then scroll down to line 130

Code: [Select]

textstyle ITEM_TEXTSTYLE_NORMAL and change that to

Code: [Select]

textstyle ITEM_TEXTSTYLE_NEON after you've done this make sure to save, usually shortcut key for save is ctrl+s, after you have saved minimize your texteditor and open up tremulous, in tremulous open console by pressing

Code: [Select]

~ aka tilde and type

Code: [Select]

/vid_restart when tremulous reloads look to the very bottom you should see a shinny piece of text that says what you inputed. If you have done this right congratulations you're ready to begin coding a hud, if you have failed at this no worries try try agian, took me forever to learn this so dont feel disencouraged.

This tutorial is very basic it only aims to get the subject ready to code a hud,it does not aim to make one proliferate at making a hud, but to help one get to know the process. I will make a second tutorial in the very near future with more advance proccesses, that include making cvars limited to itemdefs,and explations of very common ownerdraws,flags,purecheck limitations,building pk3's,common.cfg files,documintations+publishing ,and ancor tequines.

Some very very useful sites to look at for reference
Q3 TA Menu Def Description of the Quake III: Team Arena menu scripting language in its role as general menuing and as HUD.
The Reaction Factory Site filled with tutuorials on how to build huds for the engine that tremulous runs on.

hopefully this qualifies as a sticky,if not i am curently in the process of adding more detailed explations,and more steps.

Void of deity we aim to help the tremulous player
Page source incase someone wants to repost this on another forum.

[ACKMAN]

Thank you im reading it

[Syntac]

Please change the text editor for Mac users to TextWrangler. It's free and very, very good.

[ACKMAN]

:/ i read it... well it helped me but it doesnt explain anything about hud codding

[Syntac]

If you'd read all of it, you would have seen the links at the bottom.

[Volt]

:/ i read it... well it helped me but it doesnt explain anything about hud codding

[This tutorial is very basic it only aims to get the subject ready to code a hud,it does not aim to make one proliferate at making a hud, but to help one get to know the process. I will make a second tutorial in the very near future with more advance proccesses, that include making cvars limited to itemdefs,and explations of very common ownerdraws,flags,purecheck limitations,building pk3's,common.cfg files,documintations+publishing ,and ancor tequines.

Some very very useful sites to look at for reference
Q3 TA Menu Def Description of the Quake III: Team Arena menu scripting language in its role as general menuing and as HUD.
The Reaction Factory Site filled with tutuorials on how to build huds for the engine that tremulous runs on.

This tut along with those links should be more than enough, the tut is main goal is to get you started. Bassically creating a project folder and creating required file(s) to make a hud, i'll create a part 2 sometime in the near future with more indepth stuff.

[Amanieu]

Anyone got a tutorial for porting menu files to the new system in svn?

[Nate]

this was not only helpful, but simple and easy to follow.

thank you.

[khalsa]

Stickied. This should go somewhere on the wiki ask well.

Khalsa

[Demolution]

I swear this was stickied a while ago. Or maybe I just have it bookmarked... Good sticky anyways.

[GeneralScott]

In trem 1.2 there is nothing in the base folder but maps. At least for me

[commander scrooge]

try your other base folder
~user/library/application support/tremulous/base
it may be in a different location for you, but you have 2 base folders the one that holds maps is called the base folder and the one that holds your qkey and qvm is called the base2 often.

[UniqPhoeniX]

base2?? One is in fs_homepath, the other in fs_basepath. qkey AND downloaded maps should be in <homepath>/base (except only default client doesn't use homepath); default maps and data pk3 and vms pk3 are in <basepath>/base. HUD files also go to <homepath>/base

[GeneralScott]

[/img][/img][/img]

try your other base folder
~user/library/application support/tremulous/base
it may be in a different location for you, but you have 2 base folders the one that holds maps is called the base folder and the one that holds your qkey and qvm is called the base2 often.

- Yes, thats the one I'm talking about.(base2/homepath) All thats in it is maps.
My qkey thing is actually in users/student/library/application support/Tremulous
So one folder away from base2

base2?? One is in fs_homepath, the other in fs_basepath. qkey AND downloaded maps should be in <homepath>/base (except only default client doesn't use homepath); default maps and data pk3 and vms pk3 are in <basepath>/base. HUD files also go to <homepath>/base

  I've got nothing but maps in the homepath base. whats the defualt HUD file called? The whole point of me saying this is because im trying to install the oticz HUD but cant figure out what to delete and what to add.

[UniqPhoeniX]

You don't need to delete the default HUD... Other then that, I'm pretty sure the HUD comes with instructions. The important thing to get right is uninstall: you have to run the cmd before removing the files, or your trem will get screwed up.

[Loki]

I wanna a modified hud like hellrider 2.0 but black-blue.
Who can make it? 

[jez]

I wanna a modified hud like hellrider 2.0 but black-blue.
Who can make it? 

Err, you? I didn't even have to look that far for the link to the guide...

[Loki]

I wanna a modified hud like hellrider 2.0 but black-blue.
Who can make it? 

Err, you? I didn't even have to look that far for the link to the guide...

I'm too lazy for this yet... 

[GeneralScott]

Looking at my other posts, I swear I am embarassed at how much of a noob I am. Okay, so how do you code itemdef cvars so you can do a command (say cg_cHairColor <1-7>) to change the color of your crosshair or whatever. A detailed thing on this process of coding cvars would be cool.

[Meisseli]

    itemDef
    {
      name "chompers"
      rect 312 232 16 16
      visible 1
        cvartest cg_cHairColor
        showCvar { 1 }
      decoration
      forecolor 1.0 0.0 0.0 0.6
      style WINDOW_STYLE_SHADER
      background "gfx/2d/crosshair-alien.tga"
    }

Use cvartest and showCvar. In the example this item is shown only if cg_cHairColor is 1.

There's also hideCvar to hide items when a cvar has a certain value.

[GeneralScott]

//CROSSHAIR
itemDef
{
  name "crosshair"
  visible MENU_TRUE
  cvartest cg_crosscolor
  showCvar {1}
  decoration
  rect 320 240 0 0
  forecolor COMMON_HUD_R COMMON_HUD_G COMMON_HUD_B .35
  ownerdraw CG_PLAYER_CROSSHAIR

}
itemDef
{
  name "crosshairOrange"
  visible MENU_TRUE
  cvartest cg_crosscolor
  showCvar {2}
  decoration
  rect 320 240 0 0
  forecolor 1 0 0 .5
  ownerdraw CG_PLAYER_CROSSHAIR

}

So that's what I have. I get no crosshair at all, and when I do the cg_crosscolor command, nothing happens and it says "unknown command cg_crosscolor"
Anything obvious wrong?

[OhaiReapd]

//CROSSHAIR
itemDef
{
  name "crosshair"
  visible MENU_TRUE
  cvartest cg_crosscolor
  showCvar { 1 }
  decoration
  rect 320 240 0 0
  forecolor COMMON_HUD_R COMMON_HUD_G COMMON_HUD_B .35
  ownerdraw CG_PLAYER_CROSSHAIR

}
itemDef
{
  name "crosshairOrange"
  visible MENU_TRUE
  cvartest cg_crosscolor
  showCvar { 2 }
  decoration
  rect 320 240 0 0
  forecolor 1 0 0 .5
  ownerdraw CG_PLAYER_CROSSHAIR

}

So that's what I have. I get no crosshair at all, and when I do the cg_crosscolor command, nothing happens and it says "unknown command cg_crosscolor"
Anything obvious wrong?

There, also 1 0 0 .5 is a 50% opaque Red crosshair. >.> Not orange.

Take the code from oticz crosshairs. >.>

Code: [Select]

     //Dot Crosshairs (oticz)     
         
itemDef
{
  name "crosshairred"
  rect 319 239 2 2
  visible MENU_TRUE
  cvartest cg_drawdot
  showCvar {1}
  decoration
  forecolor .8 0 0 1
  style WINDOW_STYLE_SHADER
  background "ui/assets/neutral/circle.tga"
  ownerdraw CG_PLAYER_CLIPS_RING
}
itemDef
{
  name "crosshairblue"
  rect 319 239 2 2
  visible MENU_TRUE
  cvartest cg_drawdot
  showCvar {2}
  decoration
  forecolor 0 0.015686275 1 1
  style WINDOW_STYLE_SHADER
  background "ui/assets/neutral/circle.tga"
  ownerdraw CG_PLAYER_CLIPS_RING
}
itemDef
{
  name "crosshairpurple"
  rect 319 239 2 2
  visible MENU_TRUE
  cvartest cg_drawdot
  showCvar {3}
  decoration
  forecolor 1 0 0.97254902 1
  style WINDOW_STYLE_SHADER
  background "ui/assets/neutral/circle.tga"
  ownerdraw CG_PLAYER_CLIPS_RING
}
itemDef
{
  name "crosshairblack"
  rect 319 239 2 2
  visible MENU_TRUE
  cvartest cg_drawdot
  showCvar {4}
  decoration
  forecolor 0 0 0 1
  style WINDOW_STYLE_SHADER
  background "ui/assets/neutral/circle.tga"
  ownerdraw CG_PLAYER_CLIPS_RING
    }
itemDef
{
  name "crosshairgreen"
  rect 319 239 2 2
  visible MENU_TRUE
  cvartest cg_drawdot
  showCvar {5}
  decoration
  forecolor 0 1 0 1
  style WINDOW_STYLE_SHADER
  background "ui/assets/neutral/circle.tga"
  ownerdraw CG_PLAYER_CLIPS_RING
    }
itemDef
{
  name "crosshairyellow"
  rect 319 239 2 2
  visible MENU_TRUE
  cvartest cg_drawdot
  showCvar {6}
  decoration
  forecolor 1 .7 0 1
  style WINDOW_STYLE_SHADER
  background "ui/assets/neutral/circle.tga"
  ownerdraw CG_PLAYER_CLIPS_RING
    }
itemDef
{
  name "crosshairWhite"
  rect 319 239 2 2
  visible MENU_TRUE
  cvartest cg_drawdot
  showCvar {7}
  decoration
  forecolor 1 1 1 1
  style WINDOW_STYLE_SHADER
  background "ui/assets/neutral/circle.tga"
  ownerdraw CG_PLAYER_CLIPS_RING
  }

[GeneralScott]

After I posted this I already did what you suggust, and it still didn't work. And I copied it from the dot in the first place!
I'm getting a little better at this, made a stamina bar that depletes as you lose stamina and a blinking red light that comes on when it gets dangerous.
BTW, I copied the bar from the NN HUD, just changed colors, size, location, and the warning lights. Hai Terra btw.

[GeneralScott]

Umm... Screwing around a bit more I find that if I make the command cg_drawdot (8-9) it works... But then the dot doesn't of course. So I switch the command back to cg_cHairColor and it doesn't work.??

[OhaiReapd]

Don't worry, shit like this will work when 1.2 comes out. So we just have to wait. They haven't inputted all the shit that they had in 1.1. Stupid dev's......  <3

Also, my HUD is still better <3

[GeneralScott]

Didn't say it wasn't. It's just not my style. I have the 2nd best HUD in 1.2!!

[OhaiReapd]

No 3rd. Look at my Devil HUD.

[Meisseli]

So that's what I have. I get no crosshair at all, and when I do the cg_crosscolor command, nothing happens and it says "unknown command cg_crosscolor"
Anything obvious wrong?

You have to create a new cvar, naturally.

Code: [Select]

seta myownpersonalcvar "1"for example.

[OhaiReapd]

Oh yea! Thanks Meis. Like look at your 'install.cfg' and create the cvar there along with the other '.cfg' files and '.menu' files.

[GeneralScott]

Thanks mess. Got it! TY