UGX-Mods Login

or login with an authentication provider below
Sign In with Google
Sign In with Twitter
Sign In with Discord
Sign In with Steam
Sign In with Facebook
Sign In with Twitch

Menu making tutorials

broken avatar :(
Created 8 years ago
by liamsa669
0 Members and 1 Guest are viewing this topic.
4,477 views
broken avatar :(
×
broken avatar :(
Location: us
Date Registered: 27 January 2015
Last active: 7 years ago
Posts
337
Respect
Forum Rank
Perk Hacker
Primary Group
Member
Signature
×
liamsa669's Groups
liamsa669's Contact & Social Links
This is in progress, it will probably be finished LATER TODAY, so dont comment till then

Im sorry for those who know the basics, but I am teaching it from a  "noob"'s perspective. Please note I was self taught so everything was confirmed to work, but may not be the simplest or the  "most correct" method. Also I name these based on what they do since there isn't any proper documentation on the names. Within the "All Options for this:" spoilers, yellow is the option, green is what it really represents, and white is the comment. Within the Category spoilers, Orange is the script, Teal is the variable, red is a comment.

Notes:
Spoiler: click to open...
  • Items will under each other in the order that is scripted.
  • My Main Menu and HUD Templates are blank and the items go inside the comments.

Definitions:
Spoiler: click to open...

Self - This is the current menu.

menuDef - This is the Menu class. These are the main groups of items. The information on this is parented onto its items.

itemDef - This is an item class. These are found within a menuDef. These can be one of the following:

All Options for this:
Spoiler: click to open...
   ITEM_TYPE_TEXT            0      // simple text
   ITEM_TYPE_BUTTON         1      // button, basically text with a border
   ITEM_TYPE_RADIOBUTTON      2      // toggle button, may be grouped
   ITEM_TYPE_CHECKBOX         3      // check box
   ITEM_TYPE_EDITFIELD       4      // editable text, associated with a dvar
   ITEM_TYPE_COMBO          5      // drop down list
   ITEM_TYPE_LISTBOX         6      // scrollable list
   ITEM_TYPE_MODEL          7      // model
   ITEM_TYPE_OWNERDRAW       8      // owner draw, name specs what it is
   ITEM_TYPE_NUMERICFIELD      9      // editable text, associated with a dvar
   ITEM_TYPE_SLIDER         10      // mouse speed, volume, etc.
   ITEM_TYPE_YESNO          11      // yes no dvar setting
   ITEM_TYPE_MULTI          12      // multiple list setting, enumerated
   ITEM_TYPE_DVARENUM          13      // multiple list setting, enumerated from a dvar
   ITEM_TYPE_BIND            14      // bind
   ITEM_TYPE_MENUMODEL       15      // special Menu model
   ITEM_TYPE_VALIDFILEFIELD   16      // text must be valid for use in a dos filename
   ITEM_TYPE_DECIMALFIELD      17      // editable text, associated with a dvar, which allows deci
   ITEM_TYPE_UPREDITFIELD      18      // editable text, associated with a dvar
   ITEM_TYPE_GAME_MESSAGE_WINDOW 19   // game message window
[/color]

#include  "MENUFILE_PATH" - Just like in GSC, this allows you to reference different items from another file. The file's path has to be in a set of quotations.

Example:
Spoiler: click to open...

#undef  VARIABLE - This nullifies a variable.

Example:
Spoiler: click to open...

#define  VARIABLE - This defines a variable.

Example:
Spoiler: click to open...

#ifdef  VARIABLE - Checks if The variable has been defined and is not NULL

Example:
Spoiler: click to open...

#endif - Ends the if statement

Example:
Spoiler: click to open...

//  COMMENTED_TEXT - This is a comment and anything after it (  but on the same line ) will not be read in the engine.

Example:
Spoiler: click to open...

/*  COMMENTED_TEXT - This is the start of a multi[/b] -line comment and anything inside it will not be read.

Example:
Spoiler: click to open...

COMMENTED_TEXT  */ - This is the end of a multi[/b] -line comment and anything between it will not be read.

Example:
Spoiler: click to open...


Event Handlers:
Spoiler: click to open...
onOpen - It is set[/b] -up like a function in which when the item/Menu is loaded (  displayed ), it will run what is inside the brackets.

Example:
Spoiler: click to open...

doubleclick - It is set-up lile a function in which when the item/menu is doubleclicked, it will run what is inside the brackets.

Example:
Spoiler: click to open...

onClose - It is set[/b] -up like a function in which when the item/Menu is unloaded (  deleted ), it will run what is inside the brackets.

Example:
Spoiler: click to open...

onEsc - It is set[/b] -up like a function in which when the user backed out of the Menu the code will run.

Example:
Spoiler: click to open...

onFocus - It is set[/b] -up like a function in which the script will run while hovering over an object (  Only works with specific types of items )

Example:
Spoiler: click to open...

leavefocus - It is set[/b] -up like a function in which the script will run after stopping hovering over an object (  Only works with specific types of items )

Example:
Spoiler: click to open...

action - It is set[/b] -up like a function in which the script will run after clicking on an object. (  Only works with specific types of items )

Example:
Spoiler: click to open...

execKey  "BUTTON_KEY" - It is set[/b] -up like a function in which the script will run after pressing a certain button/key.

Example:
Spoiler: click to open...

All Event Handlers are set up like this (  I used a comment to be the action but the action can be anything that is on the action list ):
Code Snippet
Plaintext
Event_name {
//action here with ; at the end
}

//or

Event_name { //action here with ; at the end }

Actions:
Actions are within Event Handlers. They are what control what it should do in that situation. The following is the most popular actions to be inside an Event Handler.  These are all folowed by a ; at the end.

Spoiler: click to open...
setDvar  DVAR_NAME  "DVAR_value" - (  If its a number the  "" are not needed )

Example:
Spoiler: click to open...

open  MENU_NAME - Opens a menu by the parameter  "name".

Example:
Spoiler: click to open...

execnow  "DVAR_TO_EXECUTE" - Executes (  runs ) a DVAR.

Example:
Spoiler: click to open...

exec  "DVAR_TO_EXECUTE" - Executes (  runs ) a DVAR.

Example:
Spoiler: click to open...

play  "SOUNDALLIAS_NAME" - Plays a soundallias.

Example:
Spoiler: click to open...

hide  OBJECT_NAME - Hides a menu/object.

Example:
Spoiler: click to open...

show  OBJECT_NAME - Shows a menu/object.

Example:
Spoiler: click to open...

uiScript  SCRIPT  VALUE1 - These are a series of functions that are called easily and are in the engine. For use, look into the uiScript section.

Example:
Spoiler: click to open...

setitemcolor  COLOR_CODE - This adjusts the ITEM's color ( Does not work with  onFocus and  leavefocus )

Example:
Spoiler: click to open...

VARIABLE - Yes, thats right... You are allowed to define a variable to be a series of Actions.

Example:
Spoiler: click to open...

close  MENU_NAME [/b] - Closes a menu by the given name

Example:
Spoiler: click to open...


Parameters:
Parameters are what allow us to customize menuDef and itemDef. Event Handlers are Parameters.

Spoiler: click to open...
name CUSTOM_NAME - This allows you to name the item so you can use it in the furure.

Example:
Spoiler: click to open...

text TEXT - This allows you to make a text item. ( Only works for text items. )

Example:
Spoiler: click to open...

ownerdraw TEXT - This allows you to use a engine variable as text.


type TYPE_OF_ITEM - This allows you to choose the item text. Here is the full list of types of items.

Example:
Spoiler: click to open...

All Options for this:
Spoiler: click to open...
   ITEM_TYPE_TEXT            0      // simple text
   ITEM_TYPE_BUTTON         1      // button, basically text with a border
   ITEM_TYPE_RADIOBUTTON      2      // toggle button, may be grouped
   ITEM_TYPE_CHECKBOX         3      // check box
   ITEM_TYPE_EDITFIELD       4      // editable text, associated with a dvar
   ITEM_TYPE_COMBO          5      // drop down list
   ITEM_TYPE_LISTBOX         6      // scrollable list
   ITEM_TYPE_MODEL          7      // model
   ITEM_TYPE_OWNERDRAW       8      // owner draw, name specs what it is
   ITEM_TYPE_NUMERICFIELD      9      // editable text, associated with a dvar
   ITEM_TYPE_SLIDER         10      // mouse speed, volume, etc.
   ITEM_TYPE_YESNO          11      // yes no dvar setting
   ITEM_TYPE_MULTI          12      // multiple list setting, enumerated
   ITEM_TYPE_DVARENUM          13      // multiple list setting, enumerated from a d
   ITEM_TYPE_BIND            14      // bind
   ITEM_TYPE_MENUMODEL       15      // special menu model
   ITEM_TYPE_VALIDFILEFIELD   16      // text must be valid for use in a dos filena
   ITEM_TYPE_DECIMALFIELD      17      // editable text, associated with a dvar, whi
   ITEM_TYPE_UPREDITFIELD      18      // editable text, associated with a dvar
   ITEM_TYPE_GAME_MESSAGE_WINDOW 19   // game message window
   ITEM_TYPE_SCALEFORM         20      // Flash movie for Scaleform GFx
   ITEM_TYPE_BIND2            21      // bind2

textscale SCALE_0-1 - Allows you to change the size of the text using a decimal value between 0 and 1. This also has some preset variables.

Example:
Spoiler: click to open...

All Options for this:
Spoiler: click to open...
   TEXTSIZE_SMALL      FONTSCALE_SMALL         // small
   TEXTSIZE_SMALL_SS   (FONTSCALE_SMALL*2)      // smallest
   TEXTSIZE_DEFAULT   FONTSCALE_NORMAL      // normal
   TEXTSIZE_DEFAULT_SS   (FONTSCALE_NORMAL*2)   // smaller than normal
   TEXTSIZE_TITLE      FONTSCALE_BIG         // large
   TEXTSIZE_TITLE_SS   1                   // smaller than large

style STYLE_TYPE - Allows you to change the style the object is displayed as.

Example:
Spoiler: click to open...

All Options for this:
Spoiler: click to open...
   ITEM_TEXTSTYLE_NORMAL         0   // normal text
   ITEM_TEXTSTYLE_BLINK         1   // fast blinking
   ITEM_TEXTSTYLE_SHADOWED       3   // drop shadow ( need a color for this )
   ITEM_TEXTSTYLE_SHADOWEDMORE    6   // drop shadow ( need a color for this )
   ITEM_TEXTSTYLE_MONOSPACE      128

textfont FONT_NAME - Allows you to change the font it is displayed as.

Example:
Spoiler: click to open...

All Options for this:
Spoiler: click to open...
   UI_FONT_DEFAULT         0   // auto-chose betwen big/reg/small
   UI_FONT_NORMAL         1
   UI_FONT_BIG            2
   UI_FONT_SMALL         3
   UI_FONT_BOLD         4
   UI_FONT_CONSOLE         5
   UI_FONT_OBJECTIVE      6
   UI_FONT_MAX            6

rect COORDINENTS - Allows you to position the item on the screen. The positioning is a set of 4-6 numbers. The numbers go as: Xpos Ypos Xsize Ysize XOrgin YOrgin.

Example:
Spoiler: click to open...

textalign POSITION_OF_TEXT - This allows you to choose which side of the text box should the text be displayed on.

Example:
Spoiler: click to open...

All Options for this:
Spoiler: click to open...
   ITEM_ALIGN_LEFT          0      // aligns left of text to left of containing rectangle
   ITEM_ALIGN_CENTER         1      // aligns center of text to center of containing rectangle
   ITEM_ALIGN_RIGHT         2      // aligns right of text to right of containing rectangle
   ITEM_ALIGN_X_MASK         3

   ITEM_ALIGN_LEGACY          0      // aligns bottom of text to top of containing rectangle
   ITEM_ALIGN_TOP             4      // aligns top of text to top of containing rectangle
   ITEM_ALIGN_MIDDLE         8      // aligns middle of text to middle of containing rectangle
   ITEM_ALIGN_BOTTOM         12      // aligns bottom of text to bottom of containing rectangle
   ITEM_ALIGN_Y_MASK         12

   ITEM_ALIGN_LEGACY_LEFT      0
   ITEM_ALIGN_LEGACY_CENTER   1
   ITEM_ALIGN_LEGACY_RIGHT      2
   ITEM_ALIGN_TOP_LEFT         4
   ITEM_ALIGN_TOP_CENTER      5
   ITEM_ALIGN_TOP_RIGHT      6
   ITEM_ALIGN_MIDDLE_LEFT      8
   ITEM_ALIGN_MIDDLE_CENTER   9
   ITEM_ALIGN_MIDDLE_RIGHT      10
   ITEM_ALIGN_BOTTOM_LEFT      12
   ITEM_ALIGN_BOTTOM_CENTER   13
   ITEM_ALIGN_BOTTOM_RIGHT      14

forecolor COLOR_CODE - Changes the color of the item.

Example:
Spoiler: click to open...

visible TRUE_/_FALSE - Allows you to hide an item/menu.

Example:
Spoiler: click to open...

All Options for this:
Spoiler: click to open...
   1                      // visible
   0                     // not visible
   true                  // visible
   false                  // not visible

visible when ( CONDITION ) - Allows you to hide an item/menu untill a condition is met.

Example:
Spoiler: click to open...

All Options for this:
Spoiler: click to open...
   dvarint( DVAR ) == VALUE       \\ I use ==, but you can use any math operation
   stat( STAT_NUM ) == VALUE       \\ I use ==, but you can use any math operation
   dvarBool( DVAR )            \\ Shows when it is true
   dvarBool( !DVAR )            \\ Shows when it is false

group GROUP_NAME - Allows you to group objects to share properties.

Example:
Spoiler: click to open...

border TRUE_/_FALSE_/_BORDERSTYLE - Allows a border to be drawn around the item.

Example:
Spoiler: click to open...

All Options for this:
Spoiler: click to open...
   WINDOW_BORDER_NONE         0      // no border
   WINDOW_BORDER_FULL         1      // full border based on border color ( single pixel )
   WINDOW_BORDER_HORZ         2      // horizontal borders only
   WINDOW_BORDER_VERT         3      // vertical borders only
   WINDOW_BORDER_KCGRADIENT   4      // horizontal border using the gradient bars
   WINDOW_BORDER_RAISED      5      // darken the bottom and right sides of the border
   WINDOW_BORDER_SUNKEN      6      // darken the top and left sides of the border

bordersize COLOR_CODE - Allows you to change the thickness of the border. This is a percentage value from 0 to 1. (  You must have a border on for this to be visible. )

Example:
Spoiler: click to open...

bordercolor COLOR_CODE - This allows you to change the color of the border. (  You must have a border on for this to be visible. )

Example:
Spoiler: click to open...

backcolor COLOR_CODE - This allows you to change the background color.

Example:
Spoiler: click to open...

background MATERIAL_NAME - This allows you to choose the material that is displayed. (  The material MUST be a 2D Material and the item must an image type. )

Example:
Spoiler: click to open...

focusColor COLOR_CODE - This allows you to change the color when you are hovering over the item. (  This ONLY works with specific item types. )

Example:
Spoiler: click to open...

fullscreen TRUE_/_FALSE - This allows you to make the item fill the whole screen. This is only usefull for images.

Example:
Spoiler: click to open...

exp VARIES - This allows you to use a variable as an value.

origin COORDINENTS - This allows you to change the origin of the object.

Example:
Spoiler: click to open...

setfocus ITEM_NAME - Highlights a certain menu item.

Example:
Spoiler: click to open...

blurWorld VALUE_0_/_1 - This allows you to blur the screen in a percentage value between 0 and 10.

Example:
Spoiler: click to open...

Main Menu Template:
This is the minimum that you need for a main menu to work.
Code Snippet
Plaintext
#include "ui/menudef.h"
#include "ui_mp/common_macro.inc"
#include "ui/mission_select/missiondefs.menu"

#include "ui_mp/menustyle.inc"
#include "ui/choices_setup_common.menu"
#include "ui/online_status.inc"

{
    assetGlobalDef
    {
        fadeClamp       1.0                     // sets the fadeup alpha
        fadeCycle       1                       // how often fade happens in milliseconds
        fadeAmount      0.1                     // amount to adjust alpha per cycle
    }
   
    menuDef
    {
        name            main
        visible            0
        fullscreen        0
        soundloop       "BACKGROUND_SOUND_ALLIAS" // default is "music_mainmenu"
        rect            0 0 640 480
        focuscolor        1 1 1 1
        disablecolor        0 0 0 0
         style            WINDOW_STYLE_EMPTY
 
        onOpen
        {
            setDvar cl_bypassMouseInput "1";
        }

        onEsc
        {
            open quit_popmenu;
        }

        onClose
        {
            setDvar cl_bypassMouseInput "0"
        }

        menuDef
        {
            name            main_text
            fullScreen      1
            rect            0 0 640 480
            soundloop       "" // default is music_mainmenu
            focusColor      1 1 0 1
            style           WINDOW_STYLE_EMPTY
            onOpen
            {
                CLEARUIHINT
               
                execnow "ui_cinematic VIDEO_NAME 3"
                setdvar ui_showOnlineOfflineButton "1";

                // setdvar main_logo "0";

                //savegameshow resume;
                //savegamehide newgame;
            }
            onFocus
            {
                execnow "ui_cinematic VIDEO_NAME 3"; // default is bink_front_end_screen_home
            }
            onEsc
            {
                play "CLOSE_SOUND_ALLIAS"; // default is "mouse_click" 
            }

            // items go here



            // end of items 
        }   
    }
}

HUD Template:
This is the minimum that you need for a HUD menu to work.
Code Snippet
Plaintext
// Soon to come

Button ITEM Template:
Code Snippet
Plaintext
itemDef
{
      name            NAME_GOES_HERE
      text            "TEXT_GOES_HERE"
      type            ITEM_TYPE_BUTTON
      textscale       TEXTSIZE_DEFAULT
      style           WINDOW_STYLE_FILLED
      textfont        UI_FONT_NORMAL
      rect            30 70 50 5
      textalign       ITEM_ALIGN_MIDDLE_CENTER
      forecolor       1 1 1 1
      visible         1
      onFocus
      {
          play "mouse_over";
      }
      leavefocus
      {
         
      }
      action
      {
          play "mouse_click";
      }
}

Text ITEM Template:
Code Snippet
Plaintext
itemDef
{
     name            NAME_GOES_HERE
     text            "TEXT_GOES_HERE"
     style           WINDOW_STYLE_EMPTY
     textscale       TEXTSIZE_TITLE
     rect            30 50 50 5
     textalign       ITEM_ALIGN_MIDDLE_CENTER
     forecolor       1 1 1 1
     visible         1
     decoration
}

Image ITEM Template:
Code Snippet
Plaintext
itemDef 
{
      name               NAME_GOES_HERE
      rect                  35 130 200 100
      style                 WINDOW_STYLE_SHADER
      background      "MATERIAL_NAME"
      decoration
      visible              1
}

Fullscreen Image ITEM Template:
Code Snippet
Plaintext
itemDef 
{
       name                 "NAME_GOES_HERE"
       rect                    FULLSCREEN
       FullScreen 1
       forecolor            1 1 1 1
       style                 WINDOW_STYLE_SHADER
       background      "MATERIAL_NAME"
       decoration
       visible               1
}

Here is a text document that may help you if you are in need: https://www.dropbox.com/sh/gh971chhydjie6r/AADJb6wGk2I318xdZS8M7oPka/1A%20-%20OVERVIEW%20OF%20THE%20Q3A%20ENGINE%20AND%20UI.pdf?dl=0
Last Edit: June 23, 2016, 02:09:37 pm by liamsa669
broken avatar :(
×
broken avatar :(
Location: gbMilton Keynes
Date Registered: 17 January 2014
Last active: 4 years ago
Posts
6,877
Respect
1,004Add +1
Forum Rank
Immortal
Primary Group
Community Scripter
My Groups
More
My Contact & Social Links
More
Signature
If you want scripts / features made for you, then contact me by PM or email / skype etc
it will cost you tho so if you have no intention of reciprocating don't even waste my time ;)
×
Harry Bo21's Groups
Donator ♥ Benevolent Soul who has our eternal gratitude and exclusive access to betas and the donator section of the forum.
Community Scripter Has shown effort and knowledge in the area of scripting while being a part of the UGX-Mods community.
Harry Bo21's Contact & Social Links[email protected]HarryBo21HarryBo000
I changed the code boxes into TT boxes that were inside "hidden text" sections

Only reason is because the boxes are squashed in hidden text

Sometimes its ok, but this one there were a few options you scrolled past in one increment, so couldnt see them at all

Still looks sorta like code in TT just no highlighting and no box behind it

can change it back if requested
broken avatar :(
×
broken avatar :(
Location: frPontault-Combault, France
Date Registered: 18 October 2014
Last active: 1 month ago
Posts
86
Respect
Forum Rank
Rotting Walker
Primary Group
Member
My Contact & Social Links
More
Signature
Visitez mon site : http://www.fr-mapping.net/index.php pour rejoindre la communauté Française sur le mod tools!
visit my website : http://www.fr-mapping.net/index.php to join french communauty on mod tools
×
Wolf_Silver's Groups
 really useful! thanks! i can really edit my main menu!
broken avatar :(
×
broken avatar :(
Location: us
Date Registered: 27 January 2015
Last active: 7 years ago
Posts
337
Respect
Forum Rank
Perk Hacker
Primary Group
Member
×
liamsa669's Groups
liamsa669's Contact & Social Links
updated, all i need to do is add a 'blank' hud script, which I will get to later
broken avatar :(
×
broken avatar :(
Location: england
Date Registered: 27 June 2018
Last active: 4 years ago
Posts
4
Respect
Forum Rank
Fresh Corpse
Primary Group
Member
×
chromaspark's Groups
chromaspark's Contact & Social Links
Any updates on the hud part?

 
Loading ...