Basic knowledge of coding menus and UI [expanded]

Basic knowledge and values for UI coding and menus. Based off Affinity's original guide. Hopefully it will be helpful to you.

menuDef:

name - this is the name you use when referring to the menu through commands such as "open" or "close", not the actual name of the .menu file

fullScreen - The main menu has to be fullscreen, other menus can open as a small window.

rect - sets the position and the resolution of the menu. If fullScreen is set to 1, it should be always set to 0 0 640 480. An item's rectangle gets drawn starting with the top left corner going downward and to the right.

visible - defines the visibility of the menu. Better set it to 1.

focusColor - sets the color of the item that is in focus (= in contact with the mouse).

desc... - the description-text that appears when you hover over the buttons (usually located at the bottom of the menu).

descX, descY - the positioning of the desc-text.

descScale - the size of the desc-text.

descColor - the color of the desc-text.

descAlignment - the alignment of the desc-text.

Itemdef

The Background (for example the Star Wars-logo on the top):

name - sets the name of the item. Can be important if you want to open or focus items.

group - you can refer to a group of items by name saying "hide (groupname) ;" or "show (groupname) ;" to have a whole bunch of items operate/be controlled as one

style - defines the style of the item.

WINDOW_STYLE_EMPTY no background

WINDOW_STYLE_FILLED filled with background color

WINDOW_STYLE_GRADIENT gradient bar based on background color

WINDOW_STYLE_SHADER gradient bar based on background color

WINDOW_STYLE_TEAMCOLOR team color

WINDOW_STYLE_CINEMATIC cinematic

rect - the position and the resolution of the item. An item's rectangle gets drawn starting with the top left corner going downward and to the right (further explanation in the end of the tutorial.)

background - the path of the background-image. Can also be a path to a shader-file. DOES NOT NEED a file extension like .jpg or .tga

forecolor - the fore color used in the item. 0 0 0 0; each 0 except the last represents a color, see below.

visible - defines the visibility of the item, if 1 the item shows by default on loading the menu, if 0 you must manually show the item but it will not show by default

decoration - makes you not touching and picking the item with the mouse.

The Button (for example the Loadgame-button)

Pretty similar to the background-items. You can actually also use an image to be a button. But in JK:JA there are only text-buttons used.

text - the path to the text-string (@MENUS_YES for example, use these for multi-language support), or you can write text in " " marks (i.e. "Bla bla bla")

descText - the path to the description text-string, works the same as text

font - the font used for the text (1-4).

textscale - the size of the text; but be forewarned; with values besides 1 as text alignment algorithms don't work as well

textaligny, textalignx - changes the position of the text relative to the rect of the menu item, so if the menu item starts at x = 100 and you put 100 here, the text will start at 200

textalign - the alignment of the text; see alignment styles below for more info

textstyle - there are different textstyles, like shadowed text, blinking; values are 0-2 IIRC

type - important command that can be used to implement listboxes, checkboxes, etc.

ITEM_TYPE_TEXT simple text, this will highlight though when the mouse hovers over it even though you can't click it like a button, make this a decoration if you don't want that to happen

ITEM_TYPE_BUTTON button, basically text with a border, however it has an action block (see below)

ITEM_TYPE_RADIOBUTTON toggle button, may be grouped

ITEM_TYPE_CHECKBOX check box

ITEM_TYPE_EDITFIELD editable text that is loaded to a cvar

ITEM_TYPE_COMBO drop down list //DOES NOT WORK IN JA

ITEM_TYPE_LISTBOX scrollable list, this takes a few extra parameters I don't remember right now (elementheight, elementwidth are two of them I believe, check raven's .menu files to see how they do them)

ITEM_TYPE_MODEL model, used for model viewers like the custom character screen I believe

ITEM_TYPE_OWNERDRAW owner draw, name specs what it is; this is CODED, use this if you have a hardcoded menu item you want to refer to

ITEM_TYPE_NUMERICFIELD editable text, associated with a cvar; probably only takes numbers

ITEM_TYPE_SLIDER mouse speed, volume, etc.; takes something like sliderwidth, sliderheight, and some other values I believe

ITEM_TYPE_YESNO yes no cvar setting, text for the menu item will display automatically as Yes/No

ITEM_TYPE_MULTI multiple list setting, enumerated, click/right-click to cycle back and forth

ITEM_TYPE_BIND binds the cvar to the chosen key

ITEM_TYPE_TEXTSCROLL scrolls text, use this to make scrollable text boxes

ITEM_TYPE_INTSLIDER mouse speed, volume, etc.; needs parameters for width, height, and scale like an ITEM_TYPE_LISTBOX, check Raven's files to see what they are, I don't remember off the top of my head

The "on" commands

Only used in the menuDef:

onOpen - stuff that happens when the menu gets opened

onEsc - stuff that happens when the menu gets closed

Events used in the itemDefs: (these execute commands shown below)

Action - gets executed when you click on the item. For example a new menu opens.

mouseEnter - gets executed when you touch the item with the mouse.

mouseExit - gets exectued when you leave the item with the mouse.

doubleclick - gets executed when you doubleclick the item.

- commands you can use are show, hide, open, close, and exec: (separate consecutive commands with a ; symbol)

show - shows the named menu item or group of items

hide - hide the named menu item or group of items

open - use this to open a menu (make sure you close the existing menu first unless you want the new menu to open on top of the existing one!); i.e. "open ingame_setup"

close - closes the named menu; a useful command I often use is "close all" which closes all menus currently open before I open a new menu

play - plays the sound file path you give

exec - probably one of THE most powerful commands you can use; allows you to execute a chain of commands as if you typed them into the console; i.e. " exec "helpusobi 1; g_gravity 100" ", use " " and ; for chains of commands just like a normal .cfg script

Remember! Always put a semi-colon ( ; ) after each command except the last one inside braces or you may get weird bugs sometimes.

Rect

The rect-command works like this:

rect X Y W H

X = horizontal position

Y = vertical position

W = width

H = height

An item's rectangle gets drawn starting with the top left corner going downward and to the right, so keep that in mind when choosing height, width, and position!

Colors

The colors work like this:

color R G B T

Values go from 0 to 1, with 1 being the highest, and 0 being the lowest. Set to 1 1 1 1 to get a white color.

R = red

G = green

B = blue

T = transparency ; 1 is completely non-transparent whereas 0 is invisible

Text Alignment

Text alignment has 3 styles:

ITEM_ALIGN_RIGHT - This lines up the beginning of the text with the rect of the menu item, so the text will start at the item's x position

example - [TEXT ], [LONGTEXT]

(TEXT or LONGTEXT (longtext just shows how a bigger/longer line of text compares to a smaller one) is whatever the menu item's text/string is, whereas the [ ] represents the menu item's interaction rectangle or rect)

ITEM_ALIGN_LEFT - This shifts the text to the left of the menu item so that where the text ends, the rect of the menu item starts

example - TEXT[ ] , LONGTEXT[ ]

ITEM_ALIGN_CENTER - This centers the text half-way between aligning to the left or the right, so about half of the text will be inside the rect and about half will be on the left side outside the rect.

example - TE[XT], LONG[TEXT]