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 settins 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!
Code:
<MenuEntry label="Missions"
bgicon="id:GFX_GUI_CUSTOM_MYIMAGE1"
name="mission_window"
tooltip="Missions"
tooltip_body="Clicking this button will show the mission window where you can review what Quests or Missions you are currently assigned">
</MenuEntry>
Lets place this in the top of the Left Menu, it will gie 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 type="root_right"> 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 youve 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:
Code:
<?xml version="1.0" standalone="yes">
<Menu type="root_left">
<Menu label="My Menu"
bgicon="id:GFX_GUI_CUSTOM_MYIMAGE1"
subscript="Ubermenu.xml"
tooltip="My Menu"
tooltip_body="Access to my Ubér Menu">
</Menu>
</Menu>
the line <?xml version="1.0" standalone="yes"> makes the XMl a 'standalone' piece of code, this allows us to add it anywhere and have it work on itself.
<Menu type="root_left"> 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.
Code:
<MenuEntry label="Hi!" button_mode="button">
<Actions event="on_invoke"> <RunChatScript value="/ Hi!" />
</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.
Code:
<?xml version="1.0" standalone="yes">
<root>
<View view_layout="stacked" activate_criteria="dvalue:cc_control_center">
<View view_layout="horizontal">
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.
Code:
<View view_layout="vertical" h_alignment="LEFT">
<VLayoutSpacer/>
<View name="LeftWingDock"
activate_criteria="dvalue:cc_section1 && dvalue:cc_left_wing && dvalue:cc_left_bar"
layout_borders="Rect(0,0,0,0)"
fade_group="cc_left_fade_group"/>
</view>
The above may differ slightly from default (im using the Skin files I have changed which are avilabel to me)
The bit we are interested in is the
Code:
<View name="LeftWingDock"
activate_criteria="dvalue:cc_section1 && dvalue:cc_left_wing && dvalue:cc_left_bar"
layout_borders="Rect(0,0,0,0)"
fade_group="cc_left_fade_group"/>
</view>
<View view_layout="vertical" h_alignment="LEFT"> just defines that anythign 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 si going to be defined. LeftWingDock is a Funcom hardcoded variable, and will onyl work for those they have defined. So in this example we will eb 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:
Code:
<CCMenu script="Mymenu.xml"
activate_criteria="dvalue:cc_section1 && dvalue:cc_left_menu"
fade_group="cc_left_fade_group"
layout_borders="Rect(0,0,0,0)"/>
</View>
Save control center and fire up ao.
If you ahve elft 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.
Remeber it doesnt hurt to look at others work to see how things are done. Dont blatnently copy others peopels work though