Modding the Titan Quest UI
I received a pm requesting a tutorial on how I made my UI mods so I thought I would post the tutorial for anybody else who is interested here in the forum instead of a pm.
First we need to make sure our ArtManager is set up correctly.
I recommend visiting this thread made by ASYLUM101. Each person's setup may differ a little so I recommend reading through the thread and trying the best set up.
Here is how mine looks.
Programs Needed:Working Directory = D:\Documents\My Games\Titan Quest - Immortal Throne\Working\
Build Directory = D:\Documents\My Games\Titan Quest - Immortal Throne\
Tools Directory = D:\Installs\Titan Quest Immortal Throne\
Additional browse directories = D:\Installs\Titan Quest\;D:\Documents\My Games\Titan Quest - Immortal Throne\Working\Database\
Editing the UI
Next we need to decide what part of the UI we want to mod. Most of the UI graphic files are located in the InGameUI.arc file found in your Titan Quest resources folder. The locations on screen and usage of these graphic files are located in the database.arz file in your Immortal Throne database folder.
So let’s say we want a new skill bar for the bottom of the UI.
At this point you can either start from scratch and design your own or use the original file as a template. If you start from scratch though you will also have to move and redesign all quick buttons, menu buttons, primary/secondary attacks, teleport, etc. to fit your new bar. If you use the original as a template you can design around these elements which will make it much easier.
So let’s find that original graphic and convert it to an editable format.
Open ARZExplorer and open the InGameUI.arz file located in your TQ resources folder. The bottom bar is titled “hudemptyslots01” and “hudemptyslotsbackground01”. (I will explain further down why there are two files.) Extract these two .tex files.
To convert the files to .psd you need to use Texture Viewer. Open them individually and export them as .psd Photoshop files.
The Alpha Channel?
All UI elements have an alpha channel. This layer is considered invisible when the .tex file is loaded in the game. So you can see here that the hudemptyslots01 has an alpha channel that makes the Quick Slots invisible so that we can see the skill icons. The hudemptyslotsbackground01 file has no alpha channel since it is layered below the skill icons. (Note: The bottom bar is one of the few ui element that has these two layers because it has removable icons, the skill icons. So they needed something in the background when a slot was empty.)
hudemptyslots01 (Visible Channel)
hudemptyslots01 (Alpha Channel)
The alpha channel is very important once you start editing your .psd file. Without an alpha channel the ArtManager will not be able to convert you .tga file correctly and it will crash.
Now we can make our edits to the .psd file that we exported.
Simple color shifts can be done rather easily using your preferred image editing software.
As you can see the original bar is a nice square shape. There are no decorative designs on the top or sides. All ui elements have to be square shapes or again the ArtManager seems to crash when converting.
So for a bottom bar like my Diablo bar you have to use the alpha channel to get those decorative shapes at the top and also have a square .tex file.
huddiablotoolbarbase (Visable Channel)
huddiablotoolbarbase Invisible (Alpha) Channel
The black around the top will be invisible when the ui is loaded.
(Note: As you can see the two decorative triangles, or demon and angel in this case, at either end of the bar are not shown here. They are separate .tex images. They are not loaded when the resolution is too small for them to be visible. You will also need to edit those to match your design.)
to be continued...