Forum

Ladies and gentlemen, I present to you my latest project – http://q-ball.io/hudcreator
As you may have guessed from the title, it is online hud creation tool.
Hudcreator is a very basic tool that lets you change size, position, color and font of all basic hud elements (health, ammo, etc), as well as edit Scoreboard, Winpanel, Team menu and Class selection screen elements.

It is fairly easy to use, so I hope there’s no need in any kind of tutorials.
Nevertheless, there are few things worth mentioning before you start working with a website:
– For website to work properly you will need to have localStorage enabled.
– HUD made for specific aspect ratio will only work on screens with that aspect ratio. So, for example, if you made HUD for 640×480 screen resolution, it will work fine on any resolution with 4:3 aspect ration, but will break with 16:10 or 16:9.
– Reset button will return everything to default state.
– You can upload your custom fonts into the system. Font will be available only until you press the Reset button.
– Removing element from canvas makes it invisible.
– Special built-in function will auto-save your current progress (canvas) every 20 seconds in localStorage.
– Positions of some elements might be a little bit off (few pixels) – thanks to the wonderful people working at Valve and also to the cross-browser stuff.
– MvM will NOT be supported! At least for the time being.
– It is possible to reset website using following link – http://q-ball.io/hudcreator?reset=1

————————————————————
Update 11.07.16:
– Changed default HUD;
– Fixed after the latest update;
– Fixed winpanel;
– Fixed “AccountValueShadow” not displaying correctly;
– Fixed medic TargetID offset;
– Added new field to change healing damage numbers;
– Added stream list to the main menu;
– Added spectator_extras to SpectatorTournament.res;
– Re-added ServerTimeLimitLabel;
– Cleaned up CSS;
– Fixed Chrome font name bug;
– Fixed multiple font upload bug.

Update 23.03.16:
– Fixed HUD after the Matchmaking update;
– Fixed the scoreboard after the Tough Break update;
– Fixed the scoreboard colors changing to lime green;
– Fixed “MapName” displaying as “[unknown]”;
– Fixed position of HudSpellMenu;
– Fixed SpectatorTournament.res to work with older HUD versions;
– Fixed hudlayout and HudAnimations_tf.txt to work with a latest update;
– Fixed respawn timer from SpectatorTournament.res;
– Fixed “MainMenuOverride” after last update;
– Fixed “AdvancingTeamLabel” position in the winpanel;
– Fixed shadow offset for “AccountValue” and “AmmoNoClip”;
– Fixed shadows not applying correctly;
– Fixed “ServerTimeLimitLabel” not displaying properly in the game;
– Fixed colorpicker for main menu elements;
– Fixed a bug with tempShadow variable;
– Fixed the size of HudDeathNotice on the canvas;
– Added “mouseoveritempanel” to the default HUD;
– Added “StopWatchLabel” and “ReinforcementsLabel” to the misc menu;
– Added “CompetitiveButton” to the MainMenuOverride.res;
– Added damage stats to the scoreboard;
– Changed default colors of koth timers;
– Changed the way shadow colorpicker works (uses clientscheme color now);
– Changed default positioning in HudTournament.res file to fix ready up menu;
– Removed “GameType” from the scoreboard.

Update 15.07.15:
– Added partial support of Gun Mettle Update;
– Fixed SpectatorTournament and SpectatorTournamentGUIHealth;
– Fixed scoreboard to support campaign medals;
– Fixed default positioning of “ServerTimeLimitLabel” element;
– Removed old font files from website cache to improve speed.

Update 12.03.15:
– Removed health bar for targetid because it was way too buggy;
– Fixed the position of HudAccountPanel value;
– Fixed Reset button not working properly;
– Fixed Default HUD font;
– Moved shadow offset to the new block called General Settings;
– Added option to change overall shadow color;
– Added option to change font outline including CDamageAccountPanel (not tested);
– Added new function to customize labels on main screen;
– Added option to change position and size of PlayerStatus_MedicUber images, PlayerStatusBleedImage, PlayerStatusMilkImage, PlayerStatusMarkedForDeathImage, PlayerStatus_Parachute and PlayerStatus_WheelOfDoom status icons;
– Added new menu with a few screen labels from HudObjectiveTimePanel.res (Overtime, Waiting for players, Sudden death, Setup);
– Separated PlayerStatusHealthImage and PlayerStatusHealthImageBG for better customization;
– Fixed the size of PlayerStatusHealthImageBG element;
– Added missing file SpectatorTournamentGUIHealth.res.

Update 24.11.14:
– Fixed TargetID after Halloween update (limited movements of SpectatorGUIHealth, TargetNameLabel and TargetDataLabel elements);
– Fixed TargetID shadows;
– Fixed shadow offset;
– Fixed default font color.

Update 28.10.14:
– Added health bar for targetid;
– Fixed blue koth timer;
– Fixed position of coloredBox elements;
– Fixed targetid medic offset.

Update 20.10.14:
– Fixed align field not working properly;
– Added ServerTimeLimitLabel element;
– Added option to edit colors of koth timers;
– Added new res files from keredhud: SpectatorTournament, FlagStatus, TextWindow, TextWindowCustomServer, WaveStatusPanel, MvMScoreboard.

Update 02.10.14:
– Added image thumbnails to the HUD list (it’s very buggy but works nonetheless);
– Added option to change overall shadow offset;
– Changed the way grid toogle works;
– Fixed AccountValue not working properly;
– Fixed shadows not saving correctly (again :D);
– Fixed some elements not removing from canvas correctly;
– Removed TargetIDBG element for spectator mode for the time being.

Update 17.09.14:
– Added option to change color on low ammo;
– Fixed shadows sometimes becoming visible;
– Fixed AmmoNoClipShadow not saving correctly.

Update 03.09.14:
– Added option to change ChargeMeters colors;
– Added option to change killfeed alignment (rightjusttify);
– Changed the way the elements of TargetID are represented;
– Uber ChargeLabel now flashes on uber ready as well as ChargeMeter;
– Fixed xHair and HealthBG not working correctly;
– Fixed payload-related stuff;
– Fixed Chrome font name bug.

Update 24.08.14:
– Implemented steam openid;
– Added option to save your HUD on the server;
– Added option to share your HUD with other users;
– Fixed some fonts not being displayed correctly.

Update 18.08.14:
– Added new button to add multiple boxes to main screen;
– Added limits for font size;
– Fixed fonts with spaces not showing up in element-fontname;
– Fixed canvas not showing up on click in element list.

Update 16.08.14:
– Changed the way fonts are represented – now you can pick font/size separately;
– Added base/local background colors for killfeed;
– Added option to add crosshair outline;
– Added option to change grid size;
– Fixed grid position;
– Fixed TargetID positioning;
– Fixed crosshair positioning on different aspect ratios.

Update 13.08.14:
– Added text alignment option;
– Added color transparency;
– Added rest of the charge meters;
– HealthBG is now showing high / low player health;
– Added option to change crosshair color on hit;
– Added option to change flashing uber colors;
– Added option to customize freezecam menu;
– Added option to customize main game menu;
– Pressing Delete on the selected HUD element will make it invisible;
– Improved overall performance of javascript/php scripts.

Update 11.08.14:
– Added function to upload HUDs previously created with the program.

cool shit yo

Big

Quoted from Phantom

Holy shit, this is epic, great work. I wonder if you could implement an option to load huds, so you can edit what you made later or even other huds to adjust positions etc.

This so much

Also nice work dude :3

nice work, looks like the quake hud creator inspired you. was waiting for someone to create a tool like this for a long time!

Chrome users: If you cannot download the file, allow popups on the site so it starts working

This is awesome!

put it on tf.tv too

edit: ninja’d

mental, also could you make a magnifying glass like in paint?

Quoted from

Holy shit, this is epic, great work. I wonder if you could implement an option to load huds, so you can edit what you made later or even other huds to adjust positions etc.

also dis