If you have ever tried to create a fully graphical menu system using the TA scripted menus, you will have quickly found that it is just not possible with the commands currently avalible. The original Quake 3 had a very text oriented menu and when TA was created it too followed this path and made it's menus text oriented. Since many mods would like to utilize a graphical menu similar to that used by FAKK 2, I have extended the TA scripted menu system to include several more graphical item types and a number of new commands that can be utilized to create that graphical menu. The updated versions of the dll/qvm files, the source code and the new assets are avalible on the Downloads page. If you wish to use any of the graphical extensions in your scripts you will need to download the Graphical Extension Assets package in order to get the updated version of the menudef.h file.
In the following we will look at the new item types and the changes made to current item types, as well as the new commands and assets, that will allow the creation of a graphical menu.
CheckBox
The Yes/No item type is Quake 3's version of a checkbox. It allows you to set the value of a cvar to either 0 or 1 by clicking on the item. To make a graphical menu we need a graphical checkbox item that does the very same thing.
Like the other graphical items in the TA scripted menu, like sliders and scrollbars, our checkbox will require some graphic assets. In this case, we need a graphic to represent the unchecked checkbox and another for the checked checkbox. By default, the system will attempt to load the ui/assets/checkbox_unchecked.tga file and the ui/assets/checkbox_checked.tga file for these graphics. The default size of these graphics is set to 16x16.
Since we would like to be able to change these graphics (and their size) some new commands have been added to the assetGlobalDef section. To change the size of the checkbox graphic the following commands are used :
checkboxWidth 96 - sets the width of the checkbox graphic
checkboxHeight 16 - sets the height of the checkbox graphic
This sets the size that the graphic will be drawn in the menu. To change the graphics the following are used :
checkBox <name> - sets the graphic used for the unchecked checkbox
checkBoxSel <name> - sets the graphic used for the checked checkbox
A checkbox item is created by including the following in the itemDef :
type ITEM_TYPE_CHECKBOX
The graphic can be drawn in three different locations in the item's window - left side, right side or centered. By default the graphic is drawn on the left side of the window but we can specify the location using the align command as follows :
align ITEM_ALIGN_LEFT - draw graphic on left side of window
align ITEM_ALIGN_CENTER - draw graphic in center of window
align ITEM_ALIGN_RIGHT - draw graphic on right side of window
The graphic is always drawn so it is vertically centered in the window, regardless of it's horizontal alignment.
The checkbox state is stored in the cvar you must assign to the item using the cvar command. This allows other items and menus (plus the rest of the program) to access the value. A checked state sets the cvar to 1, while an unchecked state sets it to 0.
If you wish to have text appear in the item window along with the checkbox graphic you can define it using the text command. The placement of this text is governed by the text formatting commands textalign, textalignx, textaligny, textscale and textstyle. All placement is calculated from the side of the item window, regardless of the graphic placement.
When we click on the item's window to change the checkbox state we can make it run the script defined by the action command. This command is used like :
action { <script> }
where <script> is a series of script commands. See Script Actions for more information.
An example of a Checkbox item is as follows :
itemDef
{
name alwaysrun
type ITEM_TYPE_CHECKBOX
cvar "cl_run"
rect 32 25 100 20
align ITEM_ALIGN_RIGHT
text "Always Run"
textalign ITEM_ALIGN_RIGHT
textalignx 80
textaligny 16
textscale .28
forecolor 0 0 0 1
visible MENU_TRUE
}
This item is used to set the cl_run cvar to either 0 or 1 when it is clicked on. The checkbox graphic is placed at the right side of the item window and the text Always Run is placed to it's left.
Even though the default checkbox graphic is 16x16 it doesn't need to be square. As an example we will look at a nonsquare checkbox graphic similar to that used in the Weapons Factory mod. The graphics used are :
|
|
checkbox_unchecked.tga |
checkbox_checked.tga |
They are 90x16 in size. To make this work correctly you must add checkboxWidth 90 to the assetGlobalDef section of the menus.
itemDef
{
name alwaysrun
type ITEM_TYPE_CHECKBOX
cvar "cl_run"
rect 32 25 90 16
align ITEM_ALIGN_LEFT
text "Always Run"
textalign ITEM_ALIGN_LEFT
textalignx 16
textaligny 12
textscale .2
forecolor 0 0 0 1
visible MENU_TRUE
}
In the menu this will look like :
when checked and unchecked.
Dropdown Combo Box
The Multi item type is used as the text method of selecting a cvar value from a list of values. The graphical version of this item is the Dropdown Combo Box. In this type of item you click on the dropdown graphic and a list of values appears underneath the item. You choose which value you want by clicking on it. The dropdown list then dissappears.
Again, we must have some graphical assets for this item. By default, the program trys to load the files ui/assets/pulldownarrow.tga and ui/assets/pulldownarrow_sel.tga as the graphics for the unselected dropdown graphic and the selected dropdown graphic, respectively. These graphics are 16x16 in size by default.
Since we would like to be able to change these graphics (and their size) some new commands have been added to the assetGlobalDef section. To change the size of the dropdown graphic the following commands are used :
comboWidth 96 - sets the width of the dropdown graphic
comboHeight 16 - sets the height of the dropdown graphic
This sets the size that the graphic will be drawn in the menu. To change the graphics the following are used :
combo <name> - sets the graphic used for the unselected dropdown
comboSel <name> - sets the graphic used for the selected dropdown
A dropdown combo item is created by including the following in the itemDef :
type ITEM_TYPE_COMBO
The graphic can be drawn in two different locations in the item's window - left side or right side. By default the graphic is drawn on the left side of the window but we can specify the location using the align command as follows :
align ITEM_ALIGN_LEFT - draw graphic on left side of window
align ITEM_ALIGN_RIGHT - draw graphic on right side of window
The graphic is always drawn so it is vertically centered in the window, regardless of it's horizontal alignment.
Like the Multi item, this item must have a cvar attached to it using the cvar command. This cvar receives the value we select from the dropdown list. You define the list of choices using the cvarFloatBoxList command or the cvarStrBoxList command.
cvarStrBoxList <display string> <cvar string> ..... <display string> <cvar string>
where each choice consists of a pair of strings, the <display string> which is what is displayed in the dropdown list, and the <cvar string> which is what is stored in the cvar attached to the item via the cvar command. The cvarFloatBoxList command is very similar :
cvarFloatBoxList <display string> <cvar value > ..... <display string> <cvar value >
where each choice consists of a string and a value, the <display string> which is what is displayed in the dropdown list, and the <cvar value > which is what is stored in the cvar attached to the item via the cvar command. The <cvar value> is a floating point number rather than a string as in cvarStringList.
There can be a maximum of 32 choices in a cvarStrBoxList or cvarFloatBoxList command.
The <display string> corresponding to the cvar value is also displayed in the item's window. This uses the text formatting commands textalign, textalignx, textaligny, textscale and textstyle to place the <display string> text in position. All placement is calculated from the side of the item window, regardless of the dropdown graphic placement.
There are a number of new commands that deal with the look and format of the dropdown list. The location of the list is set by the following :
comboalignx <x>
comboaligny <y>
where <x> is the horizontal number of pixels from the left side of the item's window to the left side of the area containing the dropdown list and <y> is the vertical number of pixels from the bottom of the item's window to the top of the area containing the dropdown list. By default these are set to <x. = 8 and <y> = 8.
The font size of the text used in the dropdown list is set by the combotextscale command as follows :
combotextscale <font size>
where <font size> is the same values as used in the textscale command. The color of the text is set by the combotextcolor command as :
combotextcolor <r> <g> <b> <alpha>
where <r> <g> <b> <alpha> are the normal values for color as used in the forecolor command.
The size of the area used by the dropdown list is determined by the number of entries in the cvarFloatBoxList or cvarStrBoxList command and the <font size> value in the combotextscale command. The size of the area is automatically calculated by the program, as is the spacing between each entry and the left and right spacings. The background color of this area is set using the combobackcolor command as follows
combobackcolor <r> <g> <b> <alpha>
where <r> <g> <b> <alpha> are the normal values for color as used in the backcolor command. By default this color is black.
As an example of using a dropdown combo box we will look at an item that can be used to change the value of the cg_hudfiles cvar. The contents of this cvar define the file that is used to load the script files used by the Hud so, by changing the cvar value, we can change the Hud script files. This is done in the Weapons Factory mod to change the style of Hud displayed.
Because we have text displayed in the dropdown item, and it uses the forecolor command to set its color, we can not use a graphical background in the dropdown item (the foreground color will tint the background graphic, which normally makes a mess of it). Instead we will use another item to display a graphic that will be used as the dropdown background. The graphic used is :
and the item looks like :
itemDef
{
name hudchoicebackground
style WINDOW_STYLE_SHADER
rect 12 60 200 20
background "ui/assets/comboback.tga"
visible MENU_TRUE
decoration
}
The dropdown item looks like the following :
itemDef
{
name hudchoice
type ITEM_TYPE_COMBO
cvar "cg_hudfiles"
cvarStrBoxList { Normal "ui/hud.txt" Small "ui/hud2.txt"
Mini "ui/HUD-PH-mini.txt" Mini2 "ui/HUD-BS-mini.txt"
Micro "ui/hud-micro.txt" MicroSpecial "ui/hud-micro-special.txt"
Milli "ui/HUD-PH-milli.txt" 0700 "ui/HUD-PH-0700.txt"
Peri "ui/HUD-PH-peri.txt" Full "ui/HUD-PH-full.txt"
Center "ui/HUD-BS-center.txt" Classic "ui/HUD-BS-classic.txt"
Grow "ui/HUD-BS-grow.txt" Simple "ui/HUD-BS-simple.txt"
Small "ui/HUD-BS-small.txt" Team "ui/HUD-BS-team.txt"
RKHud "ui/rk-hud.txt" }
rect 10 60 200 20
align ITEM_ALIGN_LEFT
comboalignx 18
comboaligny 1
combobackolor .4 .4 .4 1
combotextcolor 1 .75 0 1
combotextscale .22
forecolor 1 1 1 1
textscale .25
textalign ITEM_ALIGN_CENTER
textalignx 108
textaligny 15
visible MENU_TRUE
}
In this item we set the type to ITEM_TYPE_COMBO and attach the cg_hudfiles cvar to it. Since this cvar contains a string value we use the cvarStrBoxList command to define the <display string> <cvar string> pairs. There are 17 pairs defined in the dropdown list. The align command is used to place the dropdown graphic on the left side of the item window. The comboalignx and comboaligny commands define the dropdown box area to be 1 pixel below the item window and 18 pixels in from the left side. The dropdown box background color is set to a dark grey by the combobackolor command and the text size is set to .22 in a yellow color.
The <display string> corresponding to the cvar's string value is displayed using the text formatting commands in the item. This sets the text size to .28 and the color to black. The text is centered in the window area to the left of the dropdown graphic.
When the dropdown combo box is not activated it looks like this :
and when it has been clicked on and the dropdown area is displayed it looks like :
When a dropdown combo box is open no other item in the menu can receive the focus. You can close the box by clicking outside the box area or you can choose an entry by clicking on it. As the mouse moves over an entry it's color is changed to the focus color. Once you click on an entry the box is closed.
Important Note - if you are using dropdown combo boxes in a popup menu or in an overlay menu care must be taken when placing those items. If the dropdown area extends beyond the menu window area you will be able to highlight those entries outside the menu window but will not be able to select them with a click. You must place the dropdown combo item so the dropdown box is entirely inside the menu's window area.
Key Binding
Binding a key to a cvar that performs an action in the game is, in the standard TA menu scripting, totally text based and is, to be honest, somewhat awkward to do. I was always impressed with the system used by FAKK2 so I have added some new commands to make a similar system possible in Quake 3. Some of these commands can also be used in the current text system to make it more versatile.
1. We will start with the key bind status message that is displayed by the ownerdraw UI_KEYBINDSTATUS command. When the item containing this command is visible it displays one of two messages, depending on the status of the binding. In a graphical system we don't want this command to display a message unless we are in the process of actually binding a key. To accomplish this we must add the following command to the item :
ownerdrawflag UI_BIND2CLICK
2. Another problem we have to deal with in a graphical binding system is the color of the text used in our item changing to the focus color whenever the mouse moves over the item. This isn't always what we want so we can include the following in the item to stop text from changing to the focus color :
noFocusColor MENU_TRUE
This command can also be used in other items if you have the need to stop text from changing to the focus color.
3. In an item whose type is set to ITEM_TYPE_BIND, in the current text system, both the primary and alternate keys bound to the cvar are displayed at the same time and changing a specific key can be difficult. A new command makes it so only the primary or alternate key is displayed and only that key is changed during the binding. This command, bindType, is used as follows :
bindType BIND_PRIMARY - display only the primary key
bindType BIND_ALTERNATE - display only the alternate key
This command has application in both the text system and the graphical system. One other change has been made to the displaying of the keys. In the previous code, an item of type ITEM_TYPE_BIND required a text command containing some text before the keys would be displayed. This requirement has been removed in the current system. Also, if no text command is present in the item, the text formatting commands are applied to the key text. This allows formatting the names of the keys in our graphical system.
4. In the current text system, clicking on the bind item once causes it to shift into bind mode, where it waits for a key press to bind that key to the attached cvar. In the FAKK2 graphical system you click on the bind item to select it and then click on it again to shift into bind mode. To implement this style of binding you add the following command to the bind item :
bind2Click MENU_TRUE
5. In conjuction with the bind2Click command is a new command meant to be used in an action script. This is the clearclick script command. It is used as follows :
clearclick <name>
where <name> is the name of an item or the name of a group of items. When this command is executed in the script it resets the click status of all named items except the item it is in. These means that any bind item (with the correct name or group name) that has been clicked once and is waiting for the second click is reset so it requires a click to select it again.
Since creating a graphical bind system is somewhat complex, we will look at a large example of the items required to implement a FAKK2 bind system. Each action we wish to bind keys to will require six items so the menu scripts can get quite complicated. The bindings for two actions would look like the following :
where the first area is the action name, the second the primary key and the third the alternate key. If you click on the action name area the bindings change to this :
and when you click on the primary key area this happens :
When one of the key areas is tinted yellow it is waiting for a second click to shift into bind mode.
The background graphic we will use in our system is ui/assets/emptykey.tga and it looks like this :
It is 64x16 in size.
To create each of the different areas, action name, primary key and alternate key, we require two items, since tinting the area blue or yellow must be done by a seperate item. The script for the Run/Walk action name area is :
itemDef
{
name runwalkaction
type ITEM_TYPE_BUTTON
style WINDOW_STYLE_SHADER
rect 10 5 128 16
background "ui/assets/emptykey.tga"
visible MENU_TRUE
noFocusColor MENU_TRUE
text "Run/Walk"
textalign ITEM_ALIGN_CENTER
textalignx 64
textaligny 13
textscale .2
forecolor 1 1 1 1
action
{
hide tint;
clearclick bind2click
show runwalkactiontint;
setitemcolor runwalkactiontint backcolor 1 .75 0 .35 ;
show runwalktint;
setitemcolor runwalktint backcolor 0 0 .55 .25 ;
show runwalkalttint;
setitemcolor runwalkalttint backcolor 0 0 .55 .25 ;
}
}
itemDef
{
name runwalkactiontint
group tint
style WINDOW_STYLE_FILLED
rect 10 5 128 16
backcolor 1 .75 0 .5
visible MENU_FALSE
decoration
}
The runwalkactiontint item, which must be defined after the runwalkaction item, is used to tint the area with it's background color. It is not visible by default since we only want a tint under certain circumstances. We use the group command to place it in a group named tint. All items used to tint areas in the graphical binding system are part of this group.
The runwalkaction item is a Button item with a graphical background, in this case ui/assets/emptykey.tga stretched to 128x16. It has the text Run/Walk displayed on the background using the text formatting commands to center it in the item's window. The noFocusColor command is used to stop the text from changing color when the mouse moves over the item. The item's action script is where the actual work takes place.
The hide tint command makes all the items used for tinting invisible so no area will have a tint. We must do this since we don't know which area is currently tinted. Next the clearclick bind2click command will reset the click status in all the items which belong to the group named bind2click. More on this group later. Then we make the runwalkactiontint item visible again, since we wish to tint this item's area. The setitemcolor runwalkactiontint backcolor 1 .75 0 .35 command changes the background color of the runwalkactiontint item to yellow so our tint becomes yellow for this item. We repeat this step with the two other tint items, runwalktint and runwalkalttint, that tint our key areas. These areas are tinted a blue color.
So what we have to this point is an item, the action name area, that, when clicked on, tints itself yellow and tints the key areas associated with it blue. It also makes sure no other areas are tinted and it resets all the item's click status.
The script for the Run/Walk primary key area is as follows :
itemDef
{
name runwalk
group bind2click
style WINDOW_STYLE_SHADER
background "ui/assets/emptykey.tga"
type ITEM_TYPE_BIND
bindType BIND_PRIMARY
bind2Click MENU_TRUE
noFocusColor MENU_TRUE
cvar "+speed"
rect 138 5 64 16
textalign ITEM_ALIGN_CENTER
textalignx 32
textaligny 13
textscale .2
forecolor 1 1 1 1
visible MENU_TRUE
mouseenter
{
show keyBindStatus ;
}
mouseexit
{
hide keyBindStatus ;
}
action
{
hide tint;
clearclick bind2click
show runwalkactiontint;
setitemcolor runwalkactiontint backcolor 0 0 .55 .25 ;
show runwalktint;
setitemcolor runwalktint backcolor 1 .75 0 .35 ;
show runwalkalttint;
setitemcolor runwalkalttint backcolor 0 0 .55 .25 ;
}
}
itemDef
{
name runwalktint
group tint
style WINDOW_STYLE_FILLED
rect 138 5 64 16
backcolor 1 .75 0 .5
visible MENU_FALSE
decoration
}
The runwalktint item, which is a member of the tint group, is used to tint the primary key area and, like other tint items, is not visible by default.
The runwalk item is a Bind item since it's type is set to ITEM_TYPE_BIND. Since only Bind items can have a click status we may want to reset, we make this item part of the bind2click group using the group command. All Bind items will be part of this group. This item has a graphical background using the ui/assets/emptykey.tga graphic. Since this item is for the primary key we use the bindType BIND_PRIMARY command to set it that way. The bind2Click MENU_TRUE command makes this Bind item require two click to shift into bind mode. The name of the key bound to the +speed cvar is displayed using the text formatting commands and is centered in the item's window. The noFocusColor MENU_TRUE command makes sure the text doesn't change color when this item receives the focus.
The action script is very similar to the action script for the runwalkaction item. The hide tint command makes all the items used for tinting invisible so no area will have a tint. Next the clearclick bind2click command will reset the click status in all the items which belong to the group named bind2click, except for this item. Then we make the runwalkactiontint item visible and set it's background color to blue. We repeat this step with the runwalktint item , making it's background color yellow, and with the runwalkalttint item, making it's background color blue.
Again, we have an item that, when clicked on, will tint itself yellow and tint the action name area and the alternate key area blue. It resets the click status of all other bind items except itself and removes any tint from other binds. The difference between this item and the action area item is that it is now waiting for a second click to shift into bind mode and bind a key to the attached cvar.
The script for the Run/Walk alternate key area is as follows :
itemDef
{
name runwalkalt
group bind2click
style WINDOW_STYLE_SHADER
background "ui/assets/emptykey.tga"
type ITEM_TYPE_BIND
bindType BIND_ALTERNATE
bind2Click MENU_TRUE
noFocusColor MENU_TRUE
cvar "+speed"
rect 202 5 64 16
textalign ITEM_ALIGN_CENTER
textalignx 32
textaligny 13
textscale .2
forecolor 1 1 1 1
visible MENU_TRUE
mouseenter
{
show keyBindStatus ;
}
mouseexit
{
hide keyBindStatus ;
}
action
{
hide tint;
clearclick bind2click
show runwalkactiontint;
setitemcolor runwalkactiontint backcolor 0 0 .55 .25 ;
show runwalktint;
setitemcolor runwalktint backcolor 0 0 .55 .25 ;
show runwalkalttint;
setitemcolor runwalkalttint backcolor 1 .75 0 .35 ;
}
}
itemDef
{
name runwalkalttint
group tint
style WINDOW_STYLE_FILLED
rect 202 5 64 16
backcolor 1 .75 0 .5
visible MENU_FALSE
decoration
}
The runwalkalttint item, which is a member of the tint group, is used to tint the alternate key area and, like other tint items, is not visible by default.
The runwalkalt item is almost identical to the runwalk item except that it operates on the alternate key by using the bindType BIND_ALTERNATE command. It's action script does the same things as the runwalk item's action script except that it sets the background color of the runwalkalttint item yellow and the other item's background color blue.
These six items make up one complete graphical bind for an action. By repeating these items for different cvars we can create more graphical binds for other actions. The only changes that need to be made are the item names, the window location, the text in the action name item and the cvar attached to the Bind items. The following is a set of items for another graphical bind that you can compare to to see the differences from the previous graphical bind.
itemDef
{
name forwardaction
type ITEM_TYPE_BUTTON
style WINDOW_STYLE_SHADER
rect 10 21 128 16
background "ui/assets/emptykey.tga"
visible MENU_TRUE
noFocusColor MENU_TRUE
text "Forward"
textalign ITEM_ALIGN_CENTER
textalignx 64
textaligny 13
textscale .2
forecolor 1 1 1 1
action
{
hide tint;
clearclick bind2click
show forwardactiontint;
setitemcolor forwardactiontint backcolor 1 .75 0 .35 ;
show forwardtint;
setitemcolor forwardtint backcolor 0 0 .55 .25 ;
show forwardalttint;
setitemcolor forwardalttint backcolor 0 0 .55 .25 ;
}
mouseenter
{
show keyBindStatus ;
setcvar "ui_LowerAnim" LEGS_WALK ;
uiScript UpdateModel
}
mouseexit
{
hide keyBindStatus ;
setcvar "ui_LowerAnim" LEGS_IDLE ;
uiScript UpdateModel
}
}
itemDef
{
name forwardactiontint
group tint
style WINDOW_STYLE_FILLED
rect 10 21 128 16
backcolor 1 .75 0 .5
visible MENU_FALSE
decoration
}
itemDef
{
name forward
group bind2click
style WINDOW_STYLE_SHADER
background "ui/assets/emptykey.tga"
type ITEM_TYPE_BIND
bindType BIND_PRIMARY
bind2Click MENU_TRUE
noFocusColor MENU_TRUE
cvar "+forward"
rect 138 21 64 16
textalign ITEM_ALIGN_CENTER
textalignx 32
textaligny 13
textscale .2
forecolor 1 1 1 1
visible MENU_TRUE
mouseenter
{
show keyBindStatus ;
setcvar "ui_LowerAnim" LEGS_WALK ;
uiScript UpdateModel
}
mouseexit
{
hide keyBindStatus ;
setcvar "ui_LowerAnim" LEGS_IDLE ;
uiScript UpdateModel
}
action
{
hide tint;
clearclick bind2click
show forwardactiontint;
setitemcolor forwardactiontint backcolor 0 0 .55 .25 ;
show forwardtint;
setitemcolor forwardtint backcolor 1 .75 0 .35 ;
show forwardalttint;
setitemcolor forwardalttint backcolor 0 0 .55 .25 ;
}
}
itemDef
{
name forwardtint
group tint
style WINDOW_STYLE_FILLED
rect 138 21 64 16
backcolor 1 .75 0 .5
visible MENU_FALSE
decoration
}
itemDef
{
name forwardalt
group bind2click
style WINDOW_STYLE_SHADER
background "ui/assets/emptykey.tga"
type ITEM_TYPE_BIND
bindType BIND_ALTERNATE
bind2Click MENU_TRUE
noFocusColor MENU_TRUE
cvar "+forward"
rect 202 21 64 16
textalign ITEM_ALIGN_CENTER
textalignx 32
textaligny 13
textscale .2
forecolor 1 1 1 1
visible MENU_TRUE
mouseenter
{
show keyBindStatus ;
setcvar "ui_LowerAnim" LEGS_WALK ;
uiScript UpdateModel
}
mouseexit
{
hide keyBindStatus ;
setcvar "ui_LowerAnim" LEGS_IDLE ;
uiScript UpdateModel
}
action
{
hide tint;
clearclick bind2click
show forwardactiontint;
setitemcolor forwardactiontint backcolor 0 0 .55 .25 ;
show forwardtint;
setitemcolor forwardtint backcolor 0 0 .55 .25 ;
show forwardalttint;
setitemcolor forwardalttint backcolor 1 .75 0 .35 ;
}
}
itemDef
{
name forwardalttint
group tint
style WINDOW_STYLE_FILLED
rect 202 21 64 16
backcolor 1 .75 0 .5
visible MENU_FALSE
decoration
}
You will see that the items used for tinting are still part of the tint group and the bind items are part of the bind2click group. This allows us to remove the tint from all items with a single hide command and to reset the click status on all bind items with just a clearclick command.
To complete our graphical bind system we must make a slight change to the keyBindStatus item. This item is made visible when the mouse moves over a bind item in order to give us an indication of the bind status. Since we don't need this item displaying a message unless we are actually in bind mode, waiting for a key to bind, (the yellow tint on the key area tells us to click again to go to bind mode) we add the ownerdrawflag UI_BIND2CLICK command to the item definition. The end result is :
itemDef
{
name keyBindStatus
ownerdraw UI_KEYBINDSTATUS
ownerdrawflag UI_BIND2CLICK
text ""
rect 0 262 350 20
textStyle ITEM_TEXTSTYLE_NORMAL
textscale 0.22
textalign ITEM_ALIGN_CENTER
textalignx 185
textaligny 12
forecolor 0 0 0 1
visible MENU_FALSE
decoration
}
