Modding the Titan Quest UI

[Kirii]

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.

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\

Programs Needed:
Texture Viewer
ARZExplorer

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...

[Kirii]

Once you have made your edits and created an Alpha 1 channel using Photoshop or preferred image editing software you have to export your .psd as a TARGA (.tga) with 32 bits/pixel compression. We are now ready to create a mod using our new toolbar.

(If you need help on how to edit alpha channels and such in Photoshop (or Gimp which I used before I got Photoshop) there are plenty of free tutorials on the internet.)

Making the Mod

First we have to locate the .dbr file that controls where are ui element is used. Open up ArtManager (located in your Immortal Throne installation folder). Click Mod->New… and enter a name for your mod. They cannot contain any spaces.




Once you have a new mod created you want to organize some folders. Right-click the name of your mod/source and create a new directory. Name it something relevant to what ui element you are creating. I chose New Toolbar.

Now navigate to your new directory and right click in the space under Name and User and click Import. Import your newly created .tga file of your edited toolbar. Right click the .tga and click Auto-Create Asset. Choose Bitmap and click OK twice.




You now have a .tex file of your toolbar.

Once you have the asset created you have to build the mod once in order to get your new directory to show up later. Hit F7 or go to Build->Build.

Next click the Database Tab. Here we are editing the .dbr files found in the Database.arz file. These contain all the settings in TQ including the placement of the UI elements.

Click the Database->Import Record…




Here is where it gets a little tedious. You have to use best guess for where each ui part’s information is stored. Most elements are located under records->ingameui->player hud including the bottom toolbar. The hudemptyslotsbackground01 we exported earlier is located in hudbasebitmap.dbr and the hudemptyslots01 is located in hudoverlaybitmap.dbr. Import those two records (you have to do one at a time) and navigate to them in the folder tree on the left.




Once you have them imported double click one of them to open up the editor.



Under Config you can see where the bitmapName is linked to the original HUDEmptySlots01.tex. Double click the .tex file until the little square with the “…” shows up. You should see you newly created directory that contains your edited .tex file. Select it and hit OK.




Save the Edited Record and close it. Build you mod again and now you can test it in game.

[Kirii]

As you can see here the placement is completely off and none of the buttons line up. You now have to go back to ArtManager, open the .dbr file and edit the X and Y coordinates.



This is the biggest pain when making a UI. Using trial and error you have to change the Positions, Build the mod, reload the game, exit and change them again over and over until you get the right coordinates. This becomes very tedious especially with small buttons or health/mana bars. It also seems that various elements of the UI have different origin points. The 0,0 of the toolbar is not the same for the character portrait, etc.

You have to repeat the above procedure for every new element of the UI. I recommend keeping organized and well named folders in your source tab of your mod. When you have to hunt for every piece of ui element and replace them in the .dbr files it can get frustrating searching for them.

Creating a CustomMod

Currently your mod can only be used in custom map games. If you want to load the mod then be able to load any of your characters you have to create a blank map.
Open the Editor.exe program also located in your IT install directory. Select your mod from the pull down menu, highlight the map folder, give your map a name and click OK. (The file name of the map is later shown in the mod selection screen in game so name it appropriately.)



Once your map is loaded click File->Save All then Exit the editor.

Open ArtManager and select you mod. Right click the .wrl file in the maps folder of the sources tab of your mod, select Auto-Create Asset and press OK. Now Build (F7) the mod again.

Creating a Permanent Mod

(This is best done with the Fan Patch installed since it moved all database records to the IT database.arz. Now we only have to worry about editing on database.arz instead of two.)

If you don’t want to bother with loading your UI mod every time you play you can create a permanent install by copying your mod files directly into the Titan Quest IT database and adding your textures to the resources.

Once you have finished editing your mod build it then exit out of Art Manager. Navigate to your IT installation folder and to the Database folder. Make a back-up copy of the database.arz file. Copy the original to your already built mod database folder. Typically located at “C:\~Documents\My Games\Titan Quest - Immortal Throne\custommaps\{mod name}\database” There should be a .arz file located here with the name of your mod. First copy the name of this .arz file (select and hit F2 or right-click and rename) then delete the file. Rename your newly copied database.arz to the exact name of your mod.

Open Art Manager and load your mod again. Click Build and you will see this message:



Make sure and click No To All !!

You will now have a .arz file with all the original Titan Quest database files and you modded files. Copy this file back to your Titan Quest – Immortal Throne database folder and rename it to database.arz.

Now also remember to copy your UI textures files to the Titan Quest – Immortal Throne resources folder. They are located in you custommaps\{mod name}\resources folder and are .arc files. If you forget this step you will see blue and yellow checkered squares when you load the game.



That’s about everything. If you have questions or if something isn’t clear please let me know and I will try to clear it up for.

Thanks to ASYLUM101, Vorbis, and Violos and the TQ community for help and tutorials.
Kirii

[Samsonite]

Awesome tutorial Kirii, very detailed

[Kirii]

Thanks Samsonite! Had to put it in three parts since there is a max of 8 images per post.

ps. I also just noticed this isn't in the Tutorials section. I guess I was too distracted formatting the post to see that I was putting it in the wrong place! Maybe a moderator can move it for me?

[Violos]

Nice work!
It's great to still see new tutorials being added for this awesomely moddable game.

As for the permanent mod, you might want to mention the multiplayer remifications of that.

And instead of importing every single record, it can be very convenient to have an extracted version of the original database as another "mod" to copy/paste from, or copy entrie directories manually. If you do more than a few quick changes, setting this up once really pays off.

[yoman9]

Hey guys pls can somone give me a link for that monster xmax pet mod in which i can be able to summon boss pets for unlimited of time and with skill no cooldown and summon like 2 to 3 pets of each type.. please help i am new tysm and when i change amulet pet dies and as typhon pet dies window pops hail mighty warrior thing again-_- with fixing... sorry for asking and ty