Skinning the GUI - A Reference
Tools
VBScript Based (http://www.microsoft.com/downloads/s...displaylang=en and search for "vbscript")
http://www.lastmanut.pwp.blueyonder....inner_plus.zip
Java Based (http://www.sun.com/getjava)
http://www.jm012a3035.pwp.blueyonder...app/aoskin.jar
http://www.jm012a3035.pwp.blueyonder...app/aoskin.zip
Windows Program
See this post (appears to be gone)
See this post (also handles maps and has other features...) - also here
NO LONGER AVAILABLE?
Perl Based (http://www.activestate.com/)
http://www.curt.co.uk/AO/AOGUIout.pl
http://www.curt.co.uk/AO/AOGUIin.pl
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_image\textures\archives and the EP1 version in cd_image\textures\archives-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_image\gui\default" 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 version="1.0" standalone="yes">), 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 name="perk_window" value="false" />.
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>:
Code:
<MenuEntry label="Clear" button_mode="button" criteria="dvalue:cc_compass==true">
<Actions event="on_invoke">
<SetValue name="cc_compass" value="false" />
</Actions>
</MenuEntry>
<MenuEntry label="Restore" button_mode="button" criteria="dvalue:cc_compass==false">
<Actions event="on_invoke">
<SetValue name="cc_compass" value="true" />
</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).
Secifically, 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).
Please PM any corrections or suggestions to this