Yes/No and Multiple Selection Examples

Yes/No Selection

The Yes/No item is used to allow selecting if a feature is enabled or not. By clicking on the item you can change the state from Yes to No or back again. Cvars are used to hold the yes/no state and to allow other menus (and the game) to access this state.

Yes/No items are text based and must have all the text commands defined in order to display properly. Let's look at a simple Yes/No item :

    itemDef 
    {
      name options
      type ITEM_TYPE_YESNO
      text "Marks On Walls:"
      cvar "cg_marks"
      rect 99 35 256 20
      textalign ITEM_ALIGN_RIGHT
      textalignx 128
      textaligny 20
      textscale .3
      forecolor 1 1 1 1
      visible MENU_TRUE 
    }

The cvar "cg_marks" will be set to 1 if you have selected Yes and be set to 0 if you select No. The horizontal alignment is applied only to the text string you define with the text command. Therefore, if you use a centered alignment only the text string will be centered, not the text string and the yes/no text. The Yes or No text will be drawn 8 pixels to the right of the end of the text string. The vertical alignment applies to the Yes/No text, as does the scale and foreground color. The text and the Yes/No will be tinted with the focus color and pulse when the item receives the focus.

If you want, you can fill the background with color or use a graphic background. This works quite well since the text and the Yes/No can be aligned vertically so it looks proper.

    itemDef 
    {
      name options
      type ITEM_TYPE_YESNO
      text "Marks On Walls:"
      cvar "cg_marks"
      rect 99 35 256 20
      style WINDOW_STYLE_FILLED
      textalign ITEM_ALIGN_CENTER
      textalignx 108
      textaligny 16
      textscale .3
      forecolor 1 1 1 1
      backcolor 0 0 .75 .25
border WINDOW_BORDER_KCGRADIENT
bordercolor 0.5 0.5 0.5 1
bordersize 1
visible MENU_TRUE }

Here we set the window style to WINDOW_STYLE_FILLED so we can color the box background a transparent blue and place a gradient border top and bottom. Since we can now see the window area we changed the horizontal alignment to centered and made the offset so the entire text line (text string and Yes/No) is pretty much centered in the window. The vertical alignment was adjusted so the text was centered.

Like buttons, Yes/No items can have focus sound and focus text. It is implemented exactly like it is done for buttons. See here of details.

Multiple Selection

The multiple selection (or Multi) item is used to allow a selection among two or more choices. Each time you click on the item it changes to the next choice in the list. A cvar is used to hold the choice and make it avalible to other menus and the game.

Multi items are text based (the choices are defined as text strings) so all the text commands must be defined in order to display things properly.

    itemDef 
    {
name arenatype
type ITEM_TYPE_MULTI
cvar "ui_q3model"
cvarFloatList { "Team Arena" 0 "Quake III" 1 }
text "Model Type:"
textstyle ITEM_TEXTSTYLE_SHADOWEDMORE
rect 10 10 320 31
textalign ITEM_ALIGN_LEFT
textalignx 20
textaligny 26
textscale .35
forecolor 1 1 1 1
visible MENU_TRUE
}

This Multi item gives us a choice of selecting Team Arena player models or Quake 3 player models. This is done through the cvar "ui_q3model". If it is set to 0 then Team Arena models are selected by the model drawing part of the program. If it is set to 1 then Quake 3 models are selected. The cvar command sets the cvar we want to use in this item and the cvarFloatList commands lists the selections. Each selection comes in two parts, the string that is displayed in the item and the value assigned to the cvar for that selection. So when we show "Team Arena" as the item selection we set "ui_q3model" to 0. If we show "Quake III" as the selection, "ui_q3model" is set to 1.

The horizontal alignment is applied only to the text string you define with the text command. Therefore, if you use a centered alignment only the text string will be centered, not the text string and the selection text. The selection text will be drawn 8 pixels to the right of the end of the text string. The vertical alignment applies to the selection text, as does the scale and foreground color. The text and the selection text will be tinted with the focus color and pulse when the item receives the focus.

We can create much larger selection lists than this though. There can be up to 32 selections in the cvarFloatList and cvarStringList commands. The following is an item with a larger list.

    itemDef 
    {
name graphics
text "Quality:"
type ITEM_TYPE_MULTI
cvar "ui_glCustom"
cvarFloatList { "High Quality" 0 "Normal" 1 "Fast" 2 "Fastest" 3 "Custom" 4 }
rect 99 42 256 20
textalign ITEM_ALIGN_RIGHT
textalignx 128
textaligny 20
textscale .333
forecolor 1 1 1 1
visible MENU_TRUE
action { uiScript update "ui_glCustom" }
}

This Multi item allows us to select from a "Quality" list and assign a value from 0 to 4 to the cvar "ui_glCustom", depending on the quality level we choose. In this case we also want to update the other cvars associated with "ui_glCustom" each time it changes so we include an action command. This script command is run every time we click to change the selection. What it does is run a uiScript command that updates the cvar and its associated cvars.

Like buttons, Multi items can have focus sound and focus text. It is implemented exactly like it is done for buttons. See here of details.

 

Return to Home Page