GUI Skinning Reference Part 2

Table of Contents [+]

Class: All Classes
Faction: All Factions
Level: All Levels
Item Links:
Quicklink (copy this):

Feedback: Please Login first

So, youve modified your exsisting menus. You've added stuff using Funcoms images?

Pah, your with the big boys and girls now. You want your OWN menus, you want your own images and hell yes you want transparency on them too.

Here ill try to do a basic breakdown of controlling elements on the screen, adding your own images and how they work. Un-fortuneately (at least for the time being) the GUI is locked down a fair amount in terms of how much you can add yourself.

For example custom rollovers, varied buttons for multiple menus, the position of things liketarget HP bars and variables are all hard-coded into the game. But dont fret, theres still a fair amount we can do!

⇑

Images
Making your own
Well, you're pretty much open to anything here. As long as its saved as a PNG it should work. Pure Green (R0, G255, B0) is AO's Transparency colour.

ANYTHING in your image which is pure green will appear transparent and show the game behind it. Default examples utilising transparency are Target Blocks. You know those rectangle corners you egt when you click one someone? Yup one big green image with the corner bits drawn in. Simple huh?

When saving it, try to keep a consitent naming pattern either inline with AOs, or your own. It makes things so much simpler when creating your XML files.

GFX_GUI_CUSTOM_MYIMAGE1 for example is a good name.

⇑

Modifying exsisting images
Once extracted you will see theres a hell of alot of them. For a COMPLETELY custom GUI theres so many border sections and parts it seems quite a mess. Don't be overwhelmed, you can achieve a fair amount without changing the Core sections of the GUI.

Some groundrules first. If its something integral to the GUI (and im talking size here) try to keep the image the same size. Some things on the GUI wont like being bigger than they should be, hardcode can sometimes cause what would normally work somewhere to not work elsewhere.

Here is a good example, the 'Ignored' image. If the size of the image is changed, or location of text moved you could well see it dissappearing. I wanted to push it above the persons name, so I added about 50 pixels of Transparency to the bottom, alas it didnt appear. The way the code was handling this particular image meant it wouldn't actually show.

Thats about it really, now some tips.

ButtonX_state1, ButtonX_state2, ButtonX_state3!? Three? What the hell.

This bits simple state 1 is 'idle' this is what it looks when no mouse cursor is hovering above the image. State 2 is on MouseOver and state3 is on mouse down, or toggled on.

ButtonX and ButtonX_HIGHE simply Button at idle (normal) and button on highlight (Rollover)

Woah there horsey! I made my image black, but its a funny shade of blue! some elements of the GUI will apply a blue hue to your image. The Agg/Def bar is actually yellow for example. Not all parts of the GUI do this, but for the best part (menus, wings and buttons) do.

I haven't yet found a workaround for this, I will do some colour comparisons at some point to see if its possible to give your base image a blue deffiency which when hued by the GUI looks a bit closer to the original colour, but we shall see.

Once modified just save over the original (in PNG format of course) using exactly (case and all) the same name.

For adding/using your own custom made images consult the Adding your own Menu and Button section to follow.

⇑

Adding your own menus and buttons
This section goes hand in hand with each other, so it makes it a bit simpler!

You will need to read the Controlcenter.xml section after following this bit because your own elements wont appear untill you define them, dont worry about this for now. Lets just make something!

Every menu and button has common settings so lets look at them.

bgicon="id:GFX_GUI_CUSTOM_MYIMAGE1" This controls the background image for a file. The value will always be id:name_of_image_without_extension" The above would use an image I made called name_of_image_without_extension.png I made and then further re-compiled into a skin file.

name="name" this controls what the button does if its a Funcom element. if this was name="mission_window" then when the button was clicked it would open the Mission Window. Consult the default XML fiels to get a look at what all the different names are. Leave this blank (name="") if this is going to be a custom made menu not controlling something of Funcoms.

label="name" quite simply a label for your button label="My button!!!" for example would create a button with the text My button!!! in it.

tooltip="text" this is the first section of the tooltip options. This controls what is diaplyed in the 'Header bar' for the tool tip dialogue.

tooltip_body="text" this is the second section fo the tool tip dialogue, this is the main body of the tool tip.

All of the above goes within your <Menu> tags for each individual entry you do. You will get a better overview in the following exmaples.

Lets have a look at a complete Button!

<MenuEntry>
</MenuEntry>

Lets place this in the top of the Left Menu, it will give us a button, showing your graphic, labelled Missions which when clicked will open the mission window.

Open up leftmenu.xml and copy paste it between <Menu> and the next <Menu label= section.

Fire up ao and look in your left menu, you should have your own custom button, Nice!

So now you've mastered the formation of a button, we can apply it to making a menu.

The base button for launching the menu uses the exact same method as above, except we need to add the process of loading up a menu.

Don... sub_script=

When this is appleid to a button it tells Ao that when clicked, I want you to load another XML file with this name (it must be in the same folder as your base menu)

So, lets start with a base using the example above.

open up notepad and add the following:

<Menu>
<Menu>
</Menu>
</Menu>

the line <xml> makes the XMl a 'standalone' piece of code, this allows us to add it anywhere and have it work on itself.

<Menu> just defines what side of the screen it will be on, and what side the buttons branch from (Suppsoedly we dont ened this anymore, but we shall leave it in untill Ive tested otherwsie :P). The additional closing </Menu> tag just closes off this additional line.

Right, this is the first bit done. Save As Mymenu Make sure Type is set to "all files" and save it appending the XML extension (You should have Mymenu.xml in the save dialogue)

Next we need to add the menu section.

Open a new clean Notepad file and add the following.

<MenuEntry>

<Actions> <RunChatScript>
</Actions>

</MenuEntry>

<MenuEntry> is the code we use to add a simple menu entry to a button. Closed by </MenuEntry>

Between the actions tags we have a simple chat command.

Save it as Ubermenu the same way as before. You will now have 2 new XML files in the actionmenu folder. Mymenu.Xml and Ubermenu.xml

Now we need to add this to your GUI.

Locate Controlcenter.xml in your Views folder one level up from the ActionMenu folder.

Right click it and Edit, or fire it up in notepad.

<xml>
<root>
<View>
<View>

This section should not be touched, it just controls how the GUI handles different components.

Lets have a look at an existing block and what it does.

<View>
<VLayoutSpacer>
<View>
</view>

The above may differ slightly from default (im using the Skin files I have changed which are available to me)

The bit we are interested in is the

<View>
</view>

<View> just defines that anything between this line and the last closing </view> tag for this section is going to be on the left hand side of the GUI.

name="" this is the section which is going to be defined. LeftWingDock is a Funcom hardcoded variable, and will only work for those they have defined. So in this example we will be controlling the location of the Left Wing.

The activate_criteria= variables im not 100% sure on, cc_section is the area on the gui it is and the others are set out for the Element, dont worry about this.

layout_borders is the juicy bit we want a part of. The 4 comma delimeteed numbers control its position on the screen by 'Pushing' by X number of pixels.

A,B,C,D - lets make this easy.

A controls how many pixels to push from the left of the screen, which would move the element to the right. We use this when outr element resides in the h_alignment="LEFT" section.

B we do not need to use.

C controls how many pixels to push from the right of the screen to move the element towards the left. We use this in the h_alignment="RIGHT" section.

D controls how many pixels to push up from the bottom of the screen, to move the elemnt towards the top. We use this in all sections (at the moment)

So, lets say we want to move the Left Wing into the far bottom elft corner, leaving a 1 pixel space. Our line of could would be the following:

layout_borders="Rect(1,0,0,1)"

So far so good, but we want to add our menu, right?

lets add it to the far bttom left corner.

between the fade_group="cc_left_fade_group"/> line in the Leftwing dock section and the next line being <View name="LeftBarDock" paste the following:

</View>

Save control center and fire up ao.

If you have left wing and menu turned on turn it off for now.

You should (pending ive got everything right) have a little button with your graphic, which when clicked laods your menu with you Chat Script button.

Magic!

Hopefully the info I have provided here i enough to get you started. Use trial and error and experiment with different things and you should pick it up relatively easy.

Remember it doesnt hurt to look at others work to see how things are done. Dont blatnently copy others peopels work though

Last updated on 01.25.2007 by Ukblizzard
Information originally provided by Internalfire 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.

Your Comment: