A spin-off of Jedi Knight II: Jedi Outcast, Jedi Academy allows players to create their own Jedi, train in the Academy under the tutelage of Luke Skywalker and Kyle Katarn and ultimately choose to follow the path of the Light Side or the Dark Side of the Force. The game is powered by the same version of the Quake III engine used in its predecessor, Jedi Outcast, containing modifications to the Quake code to give a third-person view and new lightsaber effects (Jedi Knight II had these 3rd person effects as well). Players have the ability to construct their own lightsaber by choosing the hilt style and blade color. After completing certain objectives, new saber styles become available including the ability to wield two independent sabers in a style known as Jar'Kai, once used by Anakin Skywalker during the closing fight in Star Wars Episode II: Attack of the Clones, or the double-bladed lightsaber (also known as a "saber staff").

Report article RSS Feed Heads Up Display Tutorial

This tutorial covers alterations to the HUD files, covering both .menu files and image creation. This tutorial assumes prior knowledge of the .pk3 file structures. Adapted from Se7enraven's HUD tutorial, on the now-inactive Expanded Banana Productions forum.

Posted by TheOneandOnly on Apr 11th, 2010
Intermediate UI/HUD.

Introduction
In this tutorial you will learn how to create your own custom Heads Up Display for Jedi Academy. The tutorial will cover the basics of creating the required graphics, but nothing specific to any particular graphics program.You will require:

  • A graphics program, such as Photoshop or GIMP
  • A text editor program, such as NotePad or TextEdit
  • Jedi Academy (Obviously!)

Premise
Jedi Academy's HUD is divided into 3 main sections: The code which tells the game which elements to draw and when to draw them, the .menu files which determine the appearance of each element, and the images themselves. This tutorial will show you how to edit the .menu files and images in order to change the HUD's appearance without changing its functionality.

ui/hud.menu (contained within "assets1.pk3") defines the size, shape, colour and image used for each element of the HUD.

gfx/hud (also within "assets1.pk3") contains all the images used, in .tga format.

Graphics
Jedi Academy displays in a 4:3 aspect ratio. When designing your HUD, your first step should be to create a new document of the same ratio (For example, 1600 x 1200 pixels). Fill the background layer with a single colour (Black is usually preferable). Each element of your HUD should have its own layer. A list of graphics elements follows:

  • Background 1
  • Background 2 (Optional)
  • Health (In 4 sections)
  • Armour (In 4 sections)
  • Ammo (In 4 sections)
  • Force (In 4 sections)
  • Sabre Stance Indicators (3 of them)

Refer to gfx/hud in "assets1.pk3" for the names of each element. Background 1 is "hudleft", and for the purpose of this tutorial, Background 2 will be named "hudright". Not every element has to be drawn, but no new ones can be added. Text is handled completely by the .menu file and does not require any images. By default, the same background image is used for the left and right sides of the HUD. Later on in this tutorial you will see how to change that if you so wish.
Once you have designed your HUD, save each element as a separate image file, but keep the complete design as a reference. Each element should be saved as a .tga file, have an alpha channel and an appropriate size. JKA requires that all image dimensions be powers of 2, for example: 256, 512, 1024 pixels etc. The height and width may be different, but each must conform to this rule. In order to avoid your image being stretched, you should copy the HUD element into a blank, appropriately sized document, rather than resizing the element itself. Line the HUD element up with the top-left corner of the document - the reason for this will be apparent when positioning elements on screen.

Menu File
Now that you've created the graphics for you new HUD, it's time to position them on screen.

All menus in JKA conform to a size of 640 x 480 (4:3 ratio). [0, 0] is the top-left corner, and [640, 480] is the bottom-right. Every entry in hud.menu is headed with either "menuDef" or "itemDef" and is contained within parentheses: { } Lines beginning with two forward slashes // are comments, and do not have any effect on the HUD.

Scroll down to "// LEFT SIDE HUD - contains the armor and health". "menuDef" defines the initial menu section, named "lefthud". This is invisible, but defines a origin point for the left hand side of the HUD. The line "rect 0 368 112 112" is the position and size of the menu section. If you changed this to say "rect 0 0 112 112" the left side of the HUD would draw from the top-left of the screen, and be 112 x 112 units large. Since this section is invisible, the size is not important, however the position is. Every following entry which begins with "itemDef" is placed relative to the 'menuDef" entry. For example, "health_tic1" is positioned at [20, 24] relative to "lefthud", so its position on screen is actually [20, 24] + [0, 368] = [20, 392]. Bear in mind that "righthud" and all its constituent parts have a negative horizontal scale by default, so they draw back-to-front.

Alter the positions and sizes of all your modified elements as you wish. You may find it beneficial to resize your original HUD design (The image with all elements shown) to 640 x 480 pixels, and use that as a reference for positions. Remember that the sizes may be different, since the graphics had to conform to the sizing rule.

The numerical counters for health, armour, ammo and force power are positioned and sized in the same way, but you may also want to alter their colour. "forecolour" is the line which controls this, followed by 4 values: Red component, green component, blue component, alpha component. These combine to give the colour and opacity, for example" "1 1 0 0.5" would be yellow and slightly see-through. If you change the ammo counter, remember to also change "ammoinfinte", as this has a separate entry.

By default, JKA splits the HUD into two sides: Health and armour on the left, ammo and force on the right. You can move elements from on side to the other if you wish to do so. For example, if you wanted to place the ammo counter (originally under "righthud") on the same side as the health bar, select the entry ("itemDef" and parentheses included), cut it from its original position and paste it somewhere under "lefthud".

Different Background Images
Earlier in this tutorial we mentioned using different background graphics for either side of the HUD. In hud.menu we can see that the backgrounds (called "frame" in each case) both use "gfx/hud/hudleft" as their image. If you created a separate background image for the right side you can change this to "gfx/hud/hudright" to display this image instead. You will also need to create a shader for this image:

gfx/hud/hudright
{
nopicmip
{
map gfx/hud/hudright
blendFunc GL_SRC_ALPHA GL_ONE_MINUS_SRC_ALPHA
}
}

This will display the image with its alpha channel as a source of transparency, rather than making it fully opaque. Place the shader in a folder directory "shaders" and save it with a name of your choice and the file extension ".shader".

Conclusion
You new HUD should now be complete. Compress all your folder directories into a .pk3 file and place it in JKA's base folder. Although this tutorial specifically covers creating a new HUD, all menus are laid out in a similar way and the skills learned here are applicable to those as well.

Post comment Comments
leilei
leilei Apr 12 2010, 10:45pm says:

This tutorial also directly applies to Q3TA, too

+1 vote     reply to comment
JamyzGenius
JamyzGenius Apr 13 2010, 3:30pm says:

WOW ! this tutorial is very good !

+1 vote     reply to comment
se7enraven
se7enraven Jun 5 2010, 5:08am says:

I am surprised this is still being passed around. Peace!

+1 vote     reply to comment
TheOneandOnly Author
TheOneandOnly Jun 7 2010, 2:57pm replied:

The original forum is archived somewhere and I couldn't find your original tutorial, so I wrote my own instead and posted it here.

+1 vote   reply to comment
Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Icon
Star Wars: Jedi Academy
Platform
Windows
Developer
Raven Software
Publisher
LucasArts
Engine
id Tech 3
Contact
Send Message
Official Page
Ravensoft.com
Release Date
Released Sep 7, 2003
Game Watch
Track this game
Tutorial
Browse
Tutorials
Report Abuse
Report article
Related Games
Star Wars: Jedi Academy
Star Wars: Jedi Academy Single & Multiplayer First Person Shooter
Related Engines
id Tech 3
id Tech 3 GPL Released Dec 3, 1999
Related Groups
Expanded Banana Productions
Expanded Banana Productions Educational group with 7 members
LucasArts
LucasArts Developer & Publisher
Raven Software
Raven Software Developer & Publisher