Upvote Upvoted 87 Downvote Downvoted
TF2 HUD From Scratch - Tutorials
posted in Customization
1
#1
34 Frags +

Hey guys, with the recent influx of questions regarding hud customization, I figured I'd launch a new series on my YouTube channel on how to make a hud from scratch. I've done six videos so far and put out at least two a week. (Usually Tues/Thurs)

Even if you're not making a hud on your own and would instead just like to customize yours a bit more/change around a few things, I feel like these videos might still be of use to you. I tried to make the video titles as relevant as possible as to what content is covered within them so that if you just wanted to change a particular section of your hud or already have some basic knowledge, you can skip around easily without too much effort.

Thanks ahead of time for checking them out, here's the playlist link:

http://www.youtube.com/playlist?list=PL5eNrB8RrXXuV3P1nv6NnwF-tCL_KnJIs

Hey guys, with the recent influx of questions regarding hud customization, I figured I'd launch a new series on my YouTube channel on how to make a hud from scratch. I've done six videos so far and put out at least two a week. (Usually Tues/Thurs)

Even if you're not making a hud on your own and would instead just like to customize yours a bit more/change around a few things, I feel like these videos might still be of use to you. I tried to make the video titles as relevant as possible as to what content is covered within them so that if you just wanted to change a particular section of your hud or already have some basic knowledge, you can skip around easily without too much effort.

Thanks ahead of time for checking them out, here's the playlist link:

http://www.youtube.com/playlist?list=PL5eNrB8RrXXuV3P1nv6NnwF-tCL_KnJIs
2
#2
20 Frags +

I'm genuinely surprised that you're probably the first person I've seen to actually make a full series on how to make a custom HUD. 10x better than relying on a webpage with somewhat vague information.

Thank you.

I'm genuinely surprised that you're probably the first person I've seen to actually make a full series on how to make a custom HUD. 10x better than relying on a webpage with somewhat vague information.

Thank you.
3
#3
2 Frags +

Thank you so much rays.

Thank you so much rays.
4
#4
2 Frags +

Very nice! This will help many people

Very nice! This will help many people
5
#5
1 Frags +
StaticVoidI'm genuinely surprised that you're probably the first person I've seen to actually make a full series on how to make a custom HUD. 10x better than relying on a webpage with somewhat vague information.

The big problem with making video tutorials, aside from the greater effort needed to produce them, is pacing the information. It's very helpful for new participants to see every little step, but more experienced people won't need that. For those people, it's easier to skim through or search within a text-based tutorial than a list of 20+ minute videos.

My question for rays is, will you be doing more advanced things like modified animations or using custom texture files?

[quote=StaticVoid]I'm genuinely surprised that you're probably the first person I've seen to actually make a full series on how to make a custom HUD. 10x better than relying on a webpage with somewhat vague information.[/quote]

The big problem with making video tutorials, aside from the greater effort needed to produce them, is pacing the information. It's very helpful for new participants to see every little step, but more experienced people won't need that. For those people, it's easier to skim through or search within a text-based tutorial than a list of 20+ minute videos.

My question for rays is, will you be doing more advanced things like modified animations or using custom texture files?
6
#6
2 Frags +

Hopefully as these get into the more advanced parts of HUD making they will become extremely helpful. As it is, I have to bug people who are knowledgeable with constant questions. Thanks for this rays!

Hopefully as these get into the more advanced parts of HUD making they will become extremely helpful. As it is, I have to bug people who are knowledgeable with constant questions. Thanks for this rays!
7
#7
eXtelevision
3 Frags +

niccce

niccce
8
#8
2 Frags +

Did you find Biko off the cuff? Bit of a coincidence, I use the black version for the Windows side of my HUD.

Did you find Biko off the cuff? Bit of a coincidence, I use the black version for the Windows side of my HUD.
9
#9
-3 Frags +

Rays you can always rely on!

Rays you can always rely on!
10
#10
0 Frags +

GitHub is still abit confusing to me, but it already saved my ass. Thanks some stuff in these videos was still very helpful!

GitHub is still abit confusing to me, but it already saved my ass. Thanks some stuff in these videos was still very helpful!
11
#11
-5 Frags +

so i had an idea thats a bit crazy.
i want to try and make a tf2 hud themed to the old diablo 2 gui
would that be possible at all?

so i had an idea thats a bit crazy.
i want to try and make a tf2 hud themed to the old diablo 2 gui
would that be possible at all?
12
#12
6 Frags +

For anyone looking for more information, there is also: https://github.com/JarateKing/TF2-Hud-Reference though it's not in video format.

Draconisso i had an idea thats a bit crazy.
i want to try and make a tf2 hud themed to the old diablo 2 gui
would that be possible at all?

Sorta, sorta not. For most "crazy ideas" about huds, the answer is "if you really know what you're doing, and you're willing to sacrifice a lot." Just by looking at it:

Show Content

Most of the overlay / background stuff wouldn't be too bad, it'd just be some materials to put in hudlayout.res or hudplayerclass.res. The hard parts wouldn't be making the actual hud elements, it'd be making the textures look right and making it work good on all aspect ratios (if you decide you want it to work on other ratios).

The health could be done, either with a custom healthbar material (that wouldn't work on sv_pure servers) or with the bonuscross healthbar trick using refract materials (similar to how magnum hud does it, it's outdated but it's a good example of lots of advanced techniques).

If the mana is supposed to be ammo, you hypothetically could make it work with some specialized blockfonts (again, magnum hud would be one of the few references) for weapons like miniguns or flamethrowers with no clip and 200 ammo. It'll be wrong for any weapons with different ammo though (you could set it up to work with any specific weapon / amount of ammo, but it won't work for any others, and making it work for weapons with clips would be significantly harder). More likely, you'd just ignore the mana bar and put regular ammo numbers like any other hud.

Run meter might be ubercharge or some weapon's charge meter? Same with the xp bar. These wouldn't be too bad to set up, it'd be more a matter of making them look good when you don't have them.

I don't know what the rest would be used for. The skill icons and the item hotbar don't really have anything that can apply to a regular hud. You could probably add the class icon/model over one of the skill icons which wouldn't be hard at all, and I'd assume you could finagle the weapon quickswitch menu or the non-fastswitch menu to look good on the item hotbar (I can't comment on if it's possible to make them list items horizontally, I've never tried, so this may not be doable) and then write some scripts so that it always appears when it doesn't interfere with anything else (switching weapons and shooting).

None of this would be expected from a new hud developer. Even out of experienced hud devs, very few would be able to handle any of the harder stuff here. I can't explain everything that well either, so don't worry if not everything makes sense, the tldr is that "it's technically possible but certainly not easy."

In the future, https://www.teamfortress.tv/19073/hud-editing-short-questions-quick-answers is a good thread for questions like these.

For anyone looking for more information, there is also: https://github.com/JarateKing/TF2-Hud-Reference though it's not in video format.

[quote=Draconis]so i had an idea thats a bit crazy.
i want to try and make a tf2 hud themed to the old diablo 2 gui
would that be possible at all?[/quote]
Sorta, sorta not. For most "crazy ideas" about huds, the answer is "if you really know what you're doing, and you're willing to sacrifice a lot." Just by looking at it: [spoiler][img]https://www.geek.com/wp-content/uploads/2016/03/diablo-II.jpg[/img][/spoiler]

Most of the overlay / background stuff wouldn't be too bad, it'd just be some [url=https://github.com/JarateKing/TF2-Hud-Reference/blob/master/0-TUTORIAL/5-Materials.md]materials[/url] to put in [url=https://github.com/JarateKing/TF2-Hud-Reference/blob/master/0-TUTORIAL/6-Hudlayout.md]hudlayout.res[/url] or [url=https://github.com/JarateKing/TF2-Hud-Reference/blob/master/0-TUTORIAL/11-Class-Image.md]hudplayerclass.res[/url]. The hard parts wouldn't be making the actual hud elements, it'd be making the textures look right and making it work good on all aspect ratios (if you decide you want it to work on other ratios).

The health could be done, either with a custom healthbar material (that wouldn't work on sv_pure servers) or with the [url=https://www.teamfortress.tv/8247/show-your-hud-modifications/?page=151#4530]bonuscross healthbar trick[/url] using [url=https://github.com/JarateKing/TF2-Hud-Reference/blob/master/1-APPENDIX/Refracts.md]refract materials[/url] (similar to how [url=https://www.teamfortress.tv/34567/magnum-hud]magnum hud[/url] does it, it's outdated but it's a good example of lots of advanced techniques).

If the mana is supposed to be ammo, you hypothetically could make it work with some specialized blockfonts (again, magnum hud would be one of the few references) for weapons like miniguns or flamethrowers with no clip and 200 ammo. It'll be wrong for any weapons with different ammo though (you could set it up to work with any specific weapon / amount of ammo, but it won't work for any others, and making it work for weapons with clips would be significantly harder). More likely, you'd just ignore the mana bar and put regular ammo numbers like any other hud.

Run meter might be [url=https://github.com/JarateKing/TF2-Hud-Reference/blob/master/0-TUTORIAL/9-Ubercharge.md]ubercharge[/url] or some weapon's charge meter? Same with the xp bar. These wouldn't be too bad to set up, it'd be more a matter of making them look good when you don't have them.

I don't know what the rest would be used for. The skill icons and the item hotbar don't really have anything that can apply to a regular hud. You could probably add the class icon/model over one of the skill icons which wouldn't be hard at all, and I'd assume you could finagle the [url=https://www.reddit.com/r/tf2/comments/6m2npa/does_anyone_even_use_this_quickswitch_menu/]weapon quickswitch menu[/url] or the [url=https://i.ytimg.com/vi/SDCuw9BHcWA/maxresdefault.jpg]non-fastswitch menu[/url] to look good on the item hotbar (I can't comment on if it's possible to make them list items horizontally, I've never tried, so this may not be doable) and then write some scripts so that it always appears when it doesn't interfere with anything else (switching weapons and shooting).

None of this would be expected from a new hud developer. Even out of experienced hud devs, very few would be able to handle any of the harder stuff here. I can't explain everything that well either, so don't worry if not everything makes sense, the tldr is that "it's technically possible but certainly not easy."

In the future, https://www.teamfortress.tv/19073/hud-editing-short-questions-quick-answers is a good thread for questions like these.
13
#13
1 Frags +

.

.
14
#14
-8 Frags +

the panels won't move I even did reload scheme

the panels won't move I even did reload scheme
Please sign in through STEAM to post a comment.