CS 1.6 VGUI Editing Tutorial

A Tutorial for Counter-Strike 1.6

Members see zero ads. Signup for free

So i got some requests telling me how i do these custom GUIs for CS 1.6 and i decided to make a tutorial, enjoy!

Note:- this will work on all GoldSource engine games and even source games to some extent.

okay so lets get started, first you need to understand some few things:

  1.  the files you need to edit can be found in cstrike/resource/UI folder and they are .res files that can be edited with any text editing software, i recommend Notepad++.
  2. every GUI is made from elements these elements can be text, image, panel, and buttons.
  3. there is a VGUI Editor mode in the game that you can use by pressing SHIFT, CTRL, ALT, B all at the same time if you cant code but i recommend against it because it can mess things up really bad and it autosaves and you cant go back unless you have backed up the files you are editing.
  4. backup the files you want to edit incase something messes up!

now lets start editing the GUIs, when you open the .res files you are going to see a bunch of code like:

"resource/ui/xxxxx.res"
{
    "xxxxx"
     {
         "controlname"                     "xxxxxx"
         "fieldname"                          "xxxxxx"
         "xpos"                       "xx"
         "ypos"                       "xx"
         "wide"                       "xx"
         "tall"                          "xx"
         "visible"                    "x" can be 0 or 1
         "enabled"                 "x" can be 0 or 1
     }

    "xxxxx2"
     {
         "controlname"                     "xxxxxx"
         "fieldname"                          "xxxxxx2"
         "xpos"                       "xx"
         "ypos"                       "xx"
         "wide"                       "xx"
         "tall"                          "xx"
         "visible"                    "x" can be 0 or 1
         "enabled"                 "x" can be 0 or 1
     }

}


this is a basic GUI everything "xxx" can be edited
 
now, that is called an element lets go through its variables:

the first line is the header for the GUI do not mess with it if you are editing an existing GUI 

the element starts with a title you can name it anything but it has to be unique!, after that comes the curly braces, one at the start and one at the end to close the element.

the "controlname" must be either a label, button, imagepanel, or panel. use it to define your element if you made it like this:

 "controlname"                     "imagepanel"

then it shows up as an image in the GUI, if you change it to label then it becomes a text and so on...

the "fieldname" is not as important but for advanced users its very useful im not gonna go into detail because that will be very long, just make it the same as the title.

now these tell the element where to appear on the screen:

         "xpos"                       "xx"
         "ypos"                       "xx"
         "wide"                       "xx"
         "tall"                          "xx"
they are self explanatory, basically the x and y pos are the position of the element in PIXELS   and the wide and tall variables tell the element how far can it go horizontally and vertically.

you can also set the x and y to be x pixels away from center by making it value like so "c-xxx" or "c+xxx" this will be useful when the gui get scaled by the resolution.

the "visible" and "enabled" just tell the element to appear or function 1 is enabled and 0 is disabled.

now lets go to control specific variables:

 Labels:

"labelText"        "xxxxxx" sets the text of the label.
"font"          "xxxx" tells the label to use a specific font in the clientscheme file.

"autoResize"       "0 or 1"  to auto resize the text within a given space.

"textAlignment"      "center/west/east"  self explanatory.

"brighttext"     "1 or 0"    to make the text brighter

Buttons:

the buttons can use the label variables and also has its own variables like
"command"      "xxxxx"  executes a command when pressed.

imagepanel:

to display an image it has to be 256x256 pixels or lower higher resolution will crash the game.

to set an image use the variable "image"     "xxx/xxx/xxx"
the xxx/xxx/xxx is the directory of the image, so its going to be like 
"image"        "gfx/vgui/myimage"

and also there is "scaleimage"    "0 or 1"  to let the image scale with the tall and wide variables.

Now knowing all this is all there is to it, the rest is your creativity! 
just put elements on top of each other to make a GUI!

here are some examples of the code for the different elements, you can just copy paste them and then edit them inside the file.

for the label:

"label1"

{

"ControlName"              "Label"
"fieldName"                      "label1"
"xpos"                         "xxx"
"ypos"                  "xxx"
"wide"                   "xxx"
"tall"                 "xxx"
"autoResize"             "1"
"textAlignment"                 "center"
"pinCorner"                "2"
"visible"                   "1"
"enabled"                 "1"
"tabPosition"              "0"
"font"             "normal"
"brighttext"            "1"
"labelText"         "label1"

}


for the button:

"button1"

{

"ControlName"        "Button"
"fieldName"              "button1"
"xpos"                      "xxx"
"ypos"                      "xxx"
"wide"                      "xxx"
"tall"                         "xxx" 
"autoResize"            "0"
"textAlignment"       "center"
"pinCorner"                "2"
"visible"                       "1"
"enabled"                    "1"
"tabPosition"               "0"
"font"                           "normal"
"labelText" ""
"command" "Your command here"

}

for the image:

 
     "Image1"   
{

"ControlName"       "ImagePanel"
"fieldName"         "image1"
"xpos"              "xxx"
"ypos"              "xxx"
"wide"               "xxx"
"tall"               "xxx"
"autoResize"          "0"
"pinCorner"           "0"
"visible"             "1"
"enabled"             "1"
"image"               "gfx/vgui/xxx"
"scaleImage"          "1"

}


Here are some tips to make your GUIs better:

  • if you want to put a high resolution image just cut it into 256x256 images and then use multiple imageplanel elements to put them together.
  • most of the work you will be doing is in photo editing software, dont worry about the code its not hard at all just imagine the final GUI in your head and then make images and then code them in.
  • you can look into my GUIs and see how i made them you will learn alot from them.

if this tutorial wasnt clear enough or you have some questions feel free to PM me or leave a comment :D
  • In counter strike extreme v7 (cs:cz)
    it uses plugin called NST_Player and then there are like 10+ characters in each side. They also have their own Portrait and Label, how do I add Portrait and Label?
    Bananite
    URL to post:

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Key Authors
Ahmad Samer avatar CS:GO Ports Flag
Affiliation
CS:GO Ports
Ahmad Samer username pic Joined 3y ago
Offline
CS:GO Ports Flag Affiliation: CS:GO Ports
28,882 points Ranked 163rd
20 medals 2 rare
  • 10 submissions featured Medal icon
  • Reached 50 subscribers Medal icon
  • 2016 Survey Participant Medal icon
  • One month a member Medal icon
  • GUIer of the Month, May 2016 Medal icon
  • Reached 1,000 Points Medal icon
Tutorial maker

Submitter

Ahmad Samer avatar
Ahmad Samer username pic Joined 3y ago
Offline
CS:GO Ports Flag Affiliation: CS:GO Ports
28,882 points Ranked 163rd
20 medals 2 rare
  • 10 submissions featured Medal icon
  • Reached 50 subscribers Medal icon
  • 2016 Survey Participant Medal icon
  • One month a member Medal icon
  • GUIer of the Month, May 2016 Medal icon
  • Reached 1,000 Points Medal icon
Ahmad Samer avatar
Ahmad Samer
CS:GO Ports Flag
Affiliation
CS:GO Ports

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Details

Difficulty Level
Intermediate

Attributes

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+
  • 0
  • 2.5k Views
  • 2 Posts
  • 2ySubmitted
  • 3moModified

WiPs by Submitter

More Scripting Tutorials

bcp.crwdcntrl.net tracking pixel