[Menu Scripting] How to make an Rcontool - Part 2



> >

Created 3 years ago

[Menu Scripting] How to make an Rcontool - Part 2

Learn how to work with itemDefs and menuDefs
alien_1409406799.png

Part 2 of 2 of the Tutorial "How to make an Rcontool"


Introduction:


In this second part of the tutorial you will learn what itemDef's (elements) you can use and how you can use them. If you didn't read part 1 of this tutorial, then please go back to part 1 and read it before continuing.

What will i learn in this tutorial?



You will learn how to display:
  • Text (Simple text)
  • Button (Either with background color or background image)
  • Link A normal text-link you can click on
  • Rectangle (Either with background color or background image)
  • Video (Plays a video or a GIF-animated image in .roq format)
  • Textfield (to write text in, for example the playername, rcon password)
  • Select Box (to select either "Yes" or "No") or other custom values
  • Slider (A slider, e.g. the Brightness or Mouse sensitivity Slider) - works with many more cvars
  • Feeder (Feeders are putting data into lists.. e.g. map list, server list, player list, mod list, etc.)

You will also learn how to:
  • Display a CVAR-Value
  • Hide/Show an itemDef based on CVAR-Value

These are the most common ones. And all of these itemDef's can have different values, actions, backgrounds, colors and this is what you're going to learn today.


Normal Text:


alien_1409565030.png
Available textstyle values:
ITEM_TEXTSTYLE_NORMAL
ITEM_TEXTSTYLE_SHADOWED
ITEM_TEXTSTYLE_SHADOWEDMORE
ITEM_TEXTSTYLE_BLINK
itemDef { name default rect 7 50 100 15 type ITEM_TYPE_TEXT textstyle ITEM_TEXTSTYLE_SHADOWED textfont UI_FONT_NORMAL forecolor 1 1 1 1 textscale .19 textalignx 3 textaligny 11 text "My Text:" visible 1 decoration }


Button:


alien_1409565050.png
Download Example: _tut_button.zip
itemdef { name mybutton1 rect 95 51 50 12 type ITEM_TYPE_BUTTON style UI_BUTTON_STYLE forecolor 1 1 1 1 backcolor .5 .5 .5 .50 textstyle UI_BUTTON_TEXT_STYLE textfont UI_FONT_NORMAL textscale .15 textalignx 6 textaligny 9 text "My Button" visible 1 action { play "mouse_click"; exec "rcon status"; } mouseEnter { setitemcolor mybutton1 backcolor .5 .5 .5 .75; play "mouse_over"; } mouseExit { setitemcolor mybutton1 backcolor .5 .5 .5 .50; } }


Button with Background-Image:


alien_1410113079.jpg
You can download the button.tga image used in this tutorial here.

Download Example: _tut_button_bg.zip

itemdef { name mybutton2 rect 95 50 52 14 type ITEM_TYPE_BUTTON style WINDOW_STYLE_SHADER forecolor 1 1 1 1 background "ui_mp/button.tga" textstyle ITEM_TEXTSTYLE_SHADOWED textfont UI_FONT_NORMAL textscale .15 textalign ITEM_ALIGN_CENTER textalignx 25 textaligny 10 text "My Button" visible 1 action { play "mouse_click"; exec "rcon status"; // Example Command } mouseEnter { play "mouse_over"; } }

Information about images in Call of Duty and Quake3-based games:
Background images must be in .tga format. You will need a program like Photoshop (paid), Gimp (free) or paint.net (free) to create this type of image. If you are using photoshop, you can save the file by pressing "File" > "Save As" - Select "Targa" format. You will get a dialog asking you for the resolution, select "24 bits/pixel". Also, note that your image must have one of the following dimensions: 2 4 8 16 32 64 128 256 512 1024, so an image with the width of 64 and height of 32 will work fine while 60x30 wouldn't work.

There is also Online Targa converters available.

.DDS images should work as well but i have never tested that. Formats such as JPG don't work (tested).


Textlink:


alien_1409566564.png
A textlink is the same as a button, the only difference to a button is that it doesn't have a background and it has the style "WINDOW_STYLE_EMPTY".

Download Example: _tut_link.zip
itemdef { name mylink1 rect 95 51 46 12 type ITEM_TYPE_BUTTON style WINDOW_STYLE_EMPTY forecolor 1 1 1 1 textstyle ITEM_TEXTSTYLE_SHADOWED textfont UI_FONT_NORMAL textscale .19 textalignx 3 textaligny 10 text "My Link" visible 1 action { play "mouse_click"; exec "rcon map_restart"; // Example command } }


Rectangle:


alien_1409567168.png

Download Example: _tut_rectangle.zip
itemDef { name default rect 20 30 90 30 style WINDOW_STYLE_FILLED border 1 bordercolor 0 0 0 1 // Black Border backcolor 0 0 1 .7 // Green Background visible 1 decoration }


Rectangle with a Background-Image:


alien_1409569155.png
Same as a regular rectangle, only that it has a "background" instead of a "backcolor" property and the style "WINDOW_STYLE_SHADER".


Download Example: _tut_rectangle_bg.zip
itemDef { name default rect 20 30 128 32 style WINDOW_STYLE_SHADER background "ui_mp/test.tga" visible 1 decoration }

Information about images in Call of Duty and Quake3-based games:
Background images must be in .tga format. You will need a program like Photoshop (paid), Gimp (free) or paint.net (free) to create this type of image. If you are using photoshop, you can save the file by pressing "File" > "Save As" - Select "Targa" format. You will get a dialog asking you for the resolution, select "24 bits/pixel". Also, note that your image must have one of the following dimensions: 2 4 8 16 32 64 128 256 512 1024, so an image with the width of 64 and height of 32 will work fine while 60x30 wouldn't work.

There is also Online Targa converters available.

.DDS images should work as well but i have never tested that. Formats such as JPG don't work (tested).



Video/Animated Image:


alien_1410035994.png
Please download the provided example file to see a fully working example.

Download Example: _tut_cinematic.zip
itemDef { name cinematic style WINDOW_STYLE_CINEMATIC cinematic "video/atvi.roq" rect 26 30 225 160 backcolor 1 1 1 .25 decoration visible 1 }


Information About Videos and Animated Images in Call of Duty and Quake3-based games:
WINDOW_STYLE_CINEMATIC allows you to display videos and animated images inside Call of Duty. The files need to be in ROQ format. If you want to display a video (.avi) or animated .gif-image, you will need to convert it into RoQ format first. You can do so by using...

1. Quake Video Maker (Tutorial: FeedHow to create a RoQ video-file in Quake Video Maker ).

or

2. Ffmpeg (command line)

I have used ffmpeg for the example in this tutorial. Simply download the lastest build from http://sourceforge.net/projects/mplayer-win32/files/FFmpeg/. Then paste ffmpeg.exe into the directory you want to work in (for example desktop). Then open command line (cmd.exe) and go to that directory by writing cd C:\Users\USERNAME\Desktop. And the last step, apply the following command: ffmpeg -i ORIGINALVIDEO.avi -r 30 -s 256x256 OUTPUTVIDEO.roq. This will probably take a few minutes but that's it! Note that the maximum sampling rate is 22050hz, if you get any error message that it has too much HERTZ then apply the following command: ffmpeg -i ORIGINALVIDEO.avi -ar 22050 -r 30 -s 256x256 OUTPUTVIDEO.roq. Depending on the number of frames it will take several minutes for converting. In this example it took about 4 minutes for a 1:30 (16mb) AVI- Video.

Once it's been converted to .roq format, simply put it into your rcontool and call it with the code provided above.



Textfield / Editfield:


alien_1410269080.jpg
A textfield requires a CVAR to be loaded in the onOpen {} command of the menuDef with (example)exec "setfromcvar name ui_name";. And in order to apply the changes you made in the textfield, you need to update the CVAR exec "setfromcvar name ui_name"; either when closing the window (onEsc) or by the click of a button (which is the case in this example). Please download the provided example file for a fully working example.

Download Example: _tut_textfield.zip
itemDef { name edit_playername type ITEM_TYPE_EDITFIELD rect 90 50 125 15 text " " cvar "ui_name" maxchars 25 maxpaintchars 25 textalign ITEM_ALIGN_RIGHT textalignx 0 textaligny 12 textfont UI_FONT_NORMAL textscale .20 textstyle ITEM_TEXTSTYLE_SHADOWED forecolor OPTIONS_CONTROL_FORECOLOR style WINDOW_STYLE_FILLED backcolor .25 .25 .25 .75 visible 1 }



Selectbox:


alien_1410272213.jpg
A selectbox let's you switch between values, for example 1, 2 or 3. In this example, we are switching the value of com_maxfps. Our values are defined in cvarFloatList { "76" 76 "85" 85 "125" 125 "250" 250 "333" 333 } Please download the example file to see a fully working example.

Download Example: _tut_selectbox.zip
itemDef { name changemaxfps type ITEM_TYPE_MULTI cvar "com_maxfps" cvarFloatList { "76" 76 "85" 85 "125" 125 "250" 250 "333" 333 } rect 90 50 38 15 style WINDOW_STYLE_FILLED textalign ITEM_ALIGN_LEFT textstyle ITEM_TEXTSTYLE_SHADOWED textalignx 5 textaligny OPTIONS_CONTROL_YALIGN textscale .20 backcolor .25 .25 .25 1 forecolor OPTIONS_CONTROL_FORECOLOR text "" // Can contain a value (label text) but not necessary visible 1 action { play "mouse_click"; } mouseEnter { setitemcolor changemaxfps backcolor .35 .35 .35 1; play "mouse_over"; } mouseExit { setitemcolor changemaxfps backcolor .25 .25 .25 1; } }



Slider:


alien_1410273422.jpg
A slider changes a value in a range. In this example, we have cvarfloat "sensitivity" 5 1 30, which means "The value is ranging from 1 to 30 and if the value is outside this range, it's 5 (default)". Please download the provided example file to see a fully working example.

Download Example: _tut_slider.zip
itemDef { name slider type ITEM_TYPE_SLIDER text "" cvarfloat "sensitivity" 5 1 30 rect 80 50 OPTIONS_CONTROL_SIZE textalign ITEM_ALIGN_LEFT textalignx 0 textaligny 12 textscale .20 style WINDOW_STYLE_FILLED backcolor 0 0 0 0 forecolor 1 1 1 1 visible 1 mouseEnter { play "mouse_over"; } }


Listbox with data (feeder):


alien_1411742051.jpg
Displays a listbox. Source of items to list is indicated by "feeder" statement.

Link: List of available feeders


Download Example: _tut_feeder.zip
itemDef { name slider type ITEM_TYPE_SLIDER text "" cvarfloat "sensitivity" 5 1 30 rect 80 50 OPTIONS_CONTROL_SIZE textalign ITEM_ALIGN_LEFT textalignx 0 textaligny 12 textscale .20 style WINDOW_STYLE_FILLED backcolor 0 0 0 0 forecolor 1 1 1 1 visible 1 mouseEnter { play "mouse_over"; } }



Displaying a Cvar-value:


alien_1409583100.png
This is the same as a normal text itemDef. The only difference is that this one has cvar "cvarname" and text "" has been removed. You can display any CVAR's value.


Download Example: _tut_displaycvar.zip
itemDef { name default cvar "name" rect 100 50 100 15 forecolor 1 1 1 1 type ITEM_TYPE_TEXT textstyle ITEM_TEXTSTYLE_SHADOWED textfont UI_FONT_NORMAL textscale .19 textalignx 3 textaligny 11 visible 1 decoration }


Hide / Show item based on Cvar-Value:


alien_1412076575.jpg
Requires cvarTest "cvarname" and showCvar  {"1"} . In this case, the itemdef is shown if the value from the cvar rafi is 1.

Download Example: _tut_cvartest.zip

Note: In the example file, open the window, then open console and write "/set rafi 1" and the text will be shown.
itemDef { name default cvar "name" rect 100 50 100 15 cvarTest "rafi" showCvar  {"1"} // If value is 1, make it visible text "^1Info: ^7rafi is set to 1." forecolor 1 1 1 1 type ITEM_TYPE_TEXT textstyle ITEM_TEXTSTYLE_SHADOWED textfont UI_FONT_NORMAL textscale .19 textalignx 3 textaligny 11 visible 1 decoration }





Useful Resources for Menu Scripting (worth checking out):


  1. Quake III: Team Arena Menu Files - by PhaethonH - Lists all possible itemdef/menudef values, script actions and more.
  2. rfactory.org - Quake III Team Arena Scripted Menus - Complete tutorial for scripting - very good resource

What else can i do?


Look at other rcontool's source codes and learn from it. But respect copyrights and licenses.
  1. Rafi Rcontool
  2. HLC Rcon

Rcontools that have been made with the help of this tutorial:

  1. Want your rcontool listed here? Send a PM to alien with 1: Rcontool Name and 2: Download Link


Questions? Please leave them in the comments!



Notice: I may update this tutorial to add extra information - Changes will be displayed here.

Tutorial Details

Created: 3 years ago by ^THiNK#ALIEN

Views: 3189 Views

Keywords: Rcontool, scripting, modding, menu, itemdef, menudef, rcon,

Share this Knowledge with your friends!

Direct Link:

2 Comments

(inlove)(heart)
Commented by ~stb* Takasur  (Oct 18th, 2014 08:03 AM)

nice job :D
Commented by `~Fres{h}lo!c~  (Dec 26th, 2014 06:22 PM)

Please sign in or create an account to post a comment.