Tutorial: HotBar

Overview
This is a short and sweet tutorial on how to modify the Hot-Bar (aka Quick Slot) by increasing its length and the number of visible slots and reducing its overall size.

The XML file that defines the layout of the Hot-Bar is called hotbar.xml and can be found in your Neverwinter Nights 2 directory within the UI folders default scheme. For example:

C:Program Files\Atari\Neverwinter Nights 2\ui\default\hotbar.xml

With NWN2, custom content (?speculation?) can be added to the My Documents directory, ..\My Documents\Neverwinter Nights 2\, this is the directory under which the new modded UI should go. For example:

C:\Documents and Settings\user_name\My Documents\Neverwinter Nights 2\ui\hotbar.xml

This will override the standard hot-bar.

Idle Expire & Live Editing
The first useful step when modding the UI is make sure that the UIScene has the idleexpiretime field set (about 0.5f or 1.0f), this will unload the UIScene from memory after closing the scene. This is advantageous in that changes to the XML layout can be seen immediately, while NWN2 is running, without requiring an application restart. Simply closing the Window/Scene within nwn and waiting for the expire time before re-opening it again will refresh the scene layout, revealing any changes.

The standard Hot-Bar looks as follows:



The standard NWN2 hotbar is made up of a collection of UI elements.

Main UI elements:
 * 1) CurrentHotbar UIText element
 * 2) GridUp1 UIButton element
 * 3) HOTBAR_TEXT UIText arranged to a UIGrid
 * 4) HOTBAR_TEXT UIText arranged to a UIGrid
 * 5) UIHotbarButton element arranged to the grid
 * 6) UIHotbarButton element arranged to the grid
 * 7) Background texture UIICon parented to the hotbar scene

The modified Hot-bar UIScene is defined as:



The overall length of the scene is extended to 642 to accommodate the extra slots.

The main feature of the Hot-bar is the Grid of buttons that are used for shortcuts to spells and abilities etc in-game. To extend on this, by expanding the number of buttons available in the hot-bar, the UIGrid element's columns field should be edited.

 ... 

Additional changes are required to make the text elements align with the bars background texture. The fully modified XML file can be downloaded and contains comments explaining the function and layout (see available files).

The finished and extended Hotbar looks a bit like this:



Available Files
hotbar.xml