Lua:VGUI Basics

From GMod Wiki

Jump to: navigation, search
Lua: Using VGUI Basics
Page white text.png Description:How to use VGUI in Garry's Mod.
User.png Original Author:Xera
Calendar.png Created:20:41, 2nd August 2007 (GMT)


VGUI Tutorial

The old tutorial was getting.. old and still uses RES files so I decided to update it, here we go..

The example

function TestVGUI( )
    local Frame = vgui.Create( "Frame" ); //Create a frame
    Frame:SetSize( 200, 200 ); //Set the size to 200x200
    Frame:SetPos( 100, 100 ); //Move the frame to 100,100
    Frame:SetVisible( true );  //Visible
    Frame:MakePopup( ); //Make the frame
    Frame:PostMessage( "SetTitle", "text", "This is the title" ); //Set the title to "This is the title"   
    local Button = vgui.Create( "Button", Frame ); //Create a button that is attached to Frame
    Button:SetText( "Click me!" ); //Set the button's text to "Click me!"
    Button:SetPos( 30, 5 ); //Set the button's position relative to it's parent(Frame)
    Button:SetWide( 100 ); //Sets the width of the button you're making
    function Button:DoClick( ) //This is called when the button is clicked
        self:SetText( "Clicked" ); //Set the text to "Clicked"
concommand.Add( "testvgui", TestVGUI ); 

If the comments didn't explain what everything does, read on.

The explanation


local Frame = vgui.Create( "Frame" ); 

This function creates a VGUI element, here we're creating a Frame element which will hold all of our buttons, labels and other VGUI elements.

It takes 3 arguments, the first being the element that we want to create, in this case a Frame. The second is the parent, the VGUI element that it is attached to and will move around with. The third one isn't important. (I don't really know what it does..)


Frame:SetSize( 200, 200 );

Here we're setting the size of Frame to 200 by 200 pixels.


Frame:SetPos( 100, 100 );

This function sets the X and Y position of a VGUI element, it takes 2 arguments, x and y(In pixels.) If the element has a parent, the position is relative to the parent's position.

Panel.SetVisible & Panel.MakePopup

Frame:SetVisible( true );
Frame:MakePopup( );

These two functions are used in conjunction to make the frame show, I'm not quite sure if Panel.MakePopup is needed but we'll leave it in just in case.


Frame:PostMessage( "SetTitle", "text", "This is the title" );

I won't go into great detail on this one but it's used to directly tell an element to do something, in this case, we're setting the title.


Button:SetText( "Click me!" );

This function should be pretty self explanatory but if for some strange reason it isn't, it sets the text of things like labels, buttons, etc.


function Button:DoClick( )
    self:SetText( "Clicked" );

This function is called whenever a button or any other clickable element is.. clicked, you can use it in one of two ways;

function Panel.DoClick( self )


function Panel:DoClick( )

Useful links

Basic element list

You can also create your own VGUI elements but that's a different tutorial.

Personal tools
Lua Scripting