From GMod Wiki
|Lua: Using VGUI Basics|
|Description:||How to use VGUI in Garry's Mod.|
|Created:||20:41, 2nd August 2007 (GMT)|
The old tutorial was getting.. old and still uses RES files so I decided to update it, here we go..
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" end end concommand.Add( "testvgui", TestVGUI );
If the comments didn't explain what everything does, read on.
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.
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" ); end
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 ) end
function Panel:DoClick( ) end
You can also create your own VGUI elements but that's a different tutorial.