WoW:User interface customization guide

This user interface customization guide is based upon slouken's post on the official Beta UI forums (a long time ago in a galaxy far, far away).

World of Warcraft user interface customization guide

The interface of World of Warcraft is built from XML files, which describe the look and layout, and lua files, which contain scripting functionality. This document is a short introduction into modifying these files to customize your interface. Customizing the interface is a very technical endeavor, (although Lua is an extremely simplistic language, comparitively speaking) and you should not attempt it unless you have a good working knowledge of XML and Lua.

No official support exists for modifying the WoW interface. If you break it, you get to keep both pieces. =)

With that said, there are a number of websites devoted to user interface customization (add-ons) available, such as WowInterface and Curse. These sites have customized interfaces and add-ons for almost every conceivable need, so it is extremely unlikely that you will need to create an add-on from scratch yourself. If you find an Add-on suitable for your needs from one of these sites, you will find using them much easier than attempting to create a new add-on yourself.

To get started, download the World of Warcraft Interface AddOn Kit and use that application to extract both User Interface Data & User Interface Art. This creates three new directories called: "Blizzard Interface Data (enUS)" "Blizzard Interface Art (enUS)" "Blizzard Interface Tutorial".

The art folder contains all of the graphics used in the built-in UI. They are generally BLP files, which are a simple container DirectX-formatted texture data. The BLP files page lists several tools for converting between BLP and other image formats.

The data folder contains all of the Lua and XML files which are used to describe and program the UI. These files make a great reference for examples of algorithms, syntax, using the game API and much more.

A quick reminder: when developing add-ons you may often encounter bugs that you just can't figure out. Before reporting a bug in the game UI, disable all add-ons and verify that the bug is present in the unmodified game. Maybe it is Blizzard's bug, but there's an even better chance that the bug is yours or another add-on you're running during your development.

XML layout

The files containing the layout and scripts for the game user interface can be found in Blizzard Interface Data\FrameXML.

The FrameXML.toc file is a plain text file and contains a list of Lua and XML files to load at login. The files are loaded in the order they're listed and any load errors are written to FrameXML.log in the game's Log folder.

In your own addons you will also have a .toc file which performs the same function for your own code. You will list your Lua and XML files in it and they will be loaded during login. Errors which occur while loading your addon will also be written to the FrameXML.log file.

Each XML file describes a collection of UI elements and Blizzard separates their XML files into functional modules. You will find files for the GameTooltip, ActionBarFrame, ReadyCheck, and everything else in the built-in UI. The Blizzard XML and Lua files make a great reference for understanding how to develop an addon.

The XML files strictly adhere to the XML standard and if your text editor supports XML syntax checking, the file UI.xsd in the FrameXML folder contains the schema used by the WoW interface.

Lots more details here: XML User Interface.

Lua scripting

All of the functionality in the interface is provided through Lua scripting. It is also possible to create any layout that is possible with the XML markup in pure Lua scripting.

The manual for Lua 5.1.4 (http://www.lua.org) is available online at http://www.lua.org/manual/5.1.

For more concise help, topic-specific Lua tutorials can be found at: http://lua-users.org/wiki/TutorialDirectory.

The best way to become familiar with the way Lua is used to script the interface is to look at the scripts in the XML files, denoted by the <script> tag, and to browse the lua files. The lua files typically contain functions which are used by the corresponding XML files.

As a reference, the World of Warcraft API page contains a (almost) complete list of available API functions in World of Warcraft. Also the Widget API page contains an overview of the methods that are available when dealing with objects of the user interface — like action buttons or unit frames. Feel free to play around with the print() function to try out the various API functions.

For example:

/run print(GetLocale());

This will print your client locale into the default chat window ("enUS" for English clients, "deDE" for German clients, etc).

Getting started

A good place to start getting familiar with the interface is the file BasicControls.xml.

At the top of this file is a script block which contains the function _ERRORMESSAGE(), which is called whenever an error occurs in your script. This function pops up a window with the error message. Another function is defined there, message(), which just pops up the error window with the argument to the function.

Further on in the file a few textures are defined in XML. They have the "virtual" attribute, which means that they are not actually created, only stored definitions to be inherited later. After that a frame, or widget, called "DialogBoxFrame" is defined. This frame is also virtual, and contains an anchor which defines how it's positioned relative to its parent, a background, and a child button which just hides the dialog when it's clicked.

Each frame consists of a number of layers, each of which can contain any number of textures and font strings. Each texture and font string must be anchored and sized so they are visible. The numbers used for anchor offsets and sizes are values in pixels.

At the end of the file we define an actual frame called "ScriptErrors" which inherits the dialog box we defined previously. This is the frame which is shown in the message function at the top of the file.

How does it work?

The very first frame that is created is the WorldFrame. This frame is required, and is where the game world renders. The next frame that is created is the UIParent frame. This frame manages all the rest of the user interface, and allows it to be hidden separately from the world. This is how we get screenshots without the interface visible. :)

Whenever a frame, texture or font string is defined in XML, its initial attributes are defined and it is added to the lua name space as an object of the appropriate type. Each type of object has member functions that modify that object. This is how we show the error dialog frame from script.

Each frame has a set of script handlers which are called under certain conditions. For example, UIParent has OnLoad, which is called immediately after the frame is loaded, OnEvent, which we will get to later, OnUpdate, which is called every time the world is updated, and OnShow, which is called whenever the frame is shown.

The OnEvent handler is special. This is the handler that allows the game to communicate with the interface. World of Warcraft is designed so that it needs to know very little about the interface. Instead of calling directly into the interface, whenever something interesting happens, it generates an event. Each frame registers for events that it is interested in, and when those events happen, the OnEvent handler is called for that frame.

Having the UI respond to events wouldn't be very useful if the interface couldn't affect the game in return. The game provides a wide array of functions to query information and change game state. Examples of using these functions are throughout the provided lua files.

Tips and tricks

World of Warcraft supports dynamically reloading the user interface. At any time, you can modify the XML and Lua files and then reload them by typing any of the following slash-commands in the chat edit box:

• /console reloadui
• /script ReloadUI()

Some (developer-) addons also register their own commands to reload the ui, they are usually short and so more convenient for development. Just try them out to see if they are available.

• /rl (from Ace-Console)
• /rld
• /reloadui

If you are not sure what is happening in a script, use the print() function to print a message into the default chat frame. This function is extremely forgiving and will print any variable.

Feel free to experiment. If you break something, starting fresh is really easy. If you have questions, look on the forums to see if other people have already figured out the answers. Occasionally, Blizzard staff will be available to answer scripting questions — we value your feedback!

Conclusion

The interface files are provided for your enjoyment, and are not supported in any way. That said, we hope that World of Warcraft provides a robust and flexible system for custom interfaces.

See also

• UI Questions
• Interface Customization