Help AO-Universe cover the webserver costs for 2018 by supporting us on Pledgie! More Information Click here to lend your support to: AO-Universe - Cover webhosting costs for 2018 and make a donation at pledgie.com !

GUI Skinning Reference Part 1

Search:
Table of Contents [+]
Class: All Classes
Faction: All Factions
Level: All Levels
Item Links:
Quicklink (copy this):

Feedback: Please Login first
Tools

VBScript Based
- ( click here and search for "vbscript")
- AO Skinner Plus

Java Based (http://www.sun.com/getjava)
- AO Skin (.jar)
- AO Skin (.zip)

Windows Program
- See this post
- See this post (also handles maps and has other features...)
- Also see this executable here

Perl Based
- http://www.activestate.com/
must edit the value assigned to $AOBase to point to your AO folder

The Basics

The GUI consists of several parts. The most obvious are the graphics files.

The basic version of these is found in cd_imagetexturesarchives and the EP1 version in cd_imagetexturesarchives-ep1. You'll see 2 files in each folder, the larger being the packed graphcs, the smaller being a text file index to each of the graphics.

We'll be making a new pair if we want to modify any of the graphics for our skin, so I'll explain how these work a bit... By default, the game sets its specified skin to the EP1 files and will look in that for any graphics it needs. If it is unable to find a graphic it needs in the specified skin, then it will instead look in the default basic skin. Because of this fallback behaviour, we really only need to store changed elements in our skin file (including any from the EP1 file we haven't changed but want to ensure are used).

Another thing to be aware of is a lot of these graphics are obsolete, but we'll discuss which ones you may wish to edit in a bit...

Ok, lets start by extracting all the images into a working folder. I'll refer to the Java program here, but you can use the other tools if you prefer.

Copy the files from both folder to the folder the Jar file is in. Double-ckick the Jar file (or run the .BAT file). Next, select "Extract" and specify that you want the standard (non-EP1) graphics. Finally, enter a project name and hit "Go". You'll now have an AOExtract sub-folder, and within that a further sub folder with the name you gave the project. Repeat the above but this time specify that you want the EP1 graphics. This will ensure you have all the right graphics.

Now, as previously mentioned, many of these graphics are not in fact used. The ones we will be most interested in are the following (there are some others too, but a complete list might go on a bit...):

GFX_GUI_ACTIONVIEW_*.PNG - health/nano/xp etc bars
GFX_GUI_BAR_*.PNG - used by team window?
GFX_GUI_BORDER01_*.PNG - non-control center buttons : normal state
GFX_GUI_BORDER03_*.PNG - non-control center buttons : over/hover state
GFX_GUI_BORDER04_*.PNG - non-control center buttons : pressed/checked state
GFX_GUI_BORDER3_*.PNG - NPC dialog window
GFX_GUI_CC_ICONS_*.PNG - control center button icons
GFX_GUI_CHECKBOX_*.PNG - options checkbox
GFX_GUI_COMPASS_*.PNG - the compass
GFX_GUI_CONTROLCENTER_*.PNG - components of the control center (buttons, wings, targetting etc)
GFX_GUI_DIALOG2_*.PNG - worldmap, tower building etc
GFX_GUI_DIALOG_HELP_*.PNG - help windows
GFX_GUI_HOR_BAR_*.PNG - hp/nano/xp bars
GFX_GUI_INFO_*.PNG - info window
GFX_GUI_INSET_*.PNG - basic window tabbed area inset
GFX_GUI_MULTILISTVIEW_*.PNG - boxes used to make inventory, ncu display etc.
GFX_GUI_PROGRESS01_*.PNG - perk reset progress bar
GFX_GUI_ROLLUP_*.PNG - docked window control icons
GFX_GUI_SB_*.PNG - mini-bar buttons
GFX_GUI_TAB_*.PNG - additional window elements for tabs
GFX_GUI_TOOLBAR_.PNG - quickbar
GFX_GUI_WINDOW3_*.PNG - basic window borders
GFX_GUI_WINDOW_*.PNG - window control icons

Now all you need do is edit the ones you want, and then we can repack them ready for use.

Packing is just as simple as unpacking... just double-click the Jar file (or run the .BAT), pick "Archive", specify basic graphics, enter your project name and press "Go". The new GUIGFX files will be created in the project folder. Now you just need to start AO and on the launcher front page, press "Settings", then press "Advanced Settings", then press "Choose Skin File", pick your new GUIGFX files, "Ok" back to the launcher and start AO...

The other elements that make up the GUI are in "cd_imageguidefault" and consist of a number of XML files. The ones that we can play with most safely are in the ActionMenu sub-folder. The two root files are called LeftMenu.xml and RightMenu.xml and control the contents of the left and right menus respectively.

The first line of each xml file is a standard "I'm an xml file" component (<xml>), it's the lines that follow we're interested in.

So, a brief overview of XML...

An XML file consists of a hierarchy of tagged data, the tags are enclosed in <...> with every tag having to be matched by a closing tag (</...>). There is a single root tag pair (<Menu>...</Menu> in the case of LeftMenu.xml) that encloses everything else.

You'll notice the type="root_left" element, this is an attribute which consists of a name immediately followed by an equals sign and the value which must be enclosed in double quotes. Attributes define additional information about the current tag.

Everything in between the opening tag and its matching closing tag is the tag data, which can be text or more, nested, tags. It is also possible for a tag to enclose no data at all, either by simply having nothing between the opening and closing tags, or more commonly by merging the opening and closing tags into a single tag by ending the opening tag with '>' rather than just '>' (note the leading space) - e.g. <SetValue>.

Note also, that XML is case sensitive!

Right, with that crappy introduction to XML out of the road, lets do something useful... add the following code at the end of LeftMenu.xml between the last </MenuEntry> and the closing </Menu>:

<MenuEntry>
<Actions>
<SetValue>
</Actions>
</MenuEntry>
<MenuEntry>
<Actions>
<SetValue>
</Actions>
</MenuEntry>

The <MenuEntry>...</MenuEntry> tag pairs defines new buttons. The label attribute defines the text that appears on it and the criteria attribute specifies when our button should appear (the button_mode defines the menu behaviour in some way).

Inside that is an <Actions>...</Actions> tag pair that specifies what the button does. It has an event attribute which specifies what event causes this action (on_invoke in this case, meaning when we click on it).

Inside that we have a bunch of <SetValue> self-terminated tags, these have a name attribute and a value attribute. These allow us to set internal variables (as specified by the name="..." attribute) to a specific value (as specified by the value="..." attribute), in this case the state of the named windows to false (closed) or true (open).

Specifically, the Clear button closes the compass window whilst the restore button does the opposite. The use of the criteria attribute to check on the status of the compass window causes the two buttons to toggle, so pressing Clear hides the compass, which causes the Clear button criteria to be false (hiding the Clear button) and causes the Restore criteria to be true (showing the Restore button).

Feng-GUI

Ok, so those are the basics. And if you look at the standard XML files, or at some of the 3rd party skin XML files you can probably figure this stuff out... but we'll look at a few things of note here.

You can have multiple <Action>...</Action> tags within a <MenuEntry>, even with the same event, which can be useful if you want different criteria to apply to each action.

Criteria have qualifiers that go before them. The common two are dvalue: for GUI element names/configuration variables and s: for internal game variables. You can do some interesting stuff in this way.

Sub-menus are defined in seperate XML files and referred to by an entry like <Menu>.

Some menu buttons refer to special elements, an example being the perk menu which only shows perk actions you have, these have a special format (<Menu> in the case of perks... check the standard XML for more examples).

Testing meus... Ctrl+Shift+F7, Actions Tab, Reload Menus button... forces a reload of all the XML files. And on The DistValues you can find the internal variables the game uses for the GUI...

More information will be added here as people figure things out and share that information.

Examples

Skins tested with 16.0
- UniGUI
- DBSkin 1.4 (sample)

These are player made skins that are available and are known to be compatible with the 15.9 GUI (most will work fine with 16.0, though there may be issues with some and the options panel, but that's what the clean GUI files below are for )

Unofficial Jimskin (15.9)
Official InternalGUI (15.9)
Raeyll's AO Client Skin
FoxyGUI (See AO Forum Thread here)
Symbskin-0.D
chivskinAI

(Unofficial InternalGUI (15.9) - for reference)

The most upto date skin as far as we are aware is the FoxyGUI. Please let us know if there are others that are being updated regularly!

Clean 16.0 GUI files

16.0 Default GUI XML Files

Please PM any corrections or suggestions to this.

Last updated on 01.25.2007 by Ukblizzard
Information originally provided by Darkbane in the Official AO Forums.
Do you have questions about this article or found an error? No comments yet - Please login first to post a comment.