<cat>Dev.UI</cat> Sometimes you may wish to create a custom VGUI Panel for an addon or gamemode. # Create a Table The first step in creating a custom VGUI Panel is to create a table. ``` local PANEL = {} ``` # Then Add Functions We can give our table a function so Garry's Mod knows what to do to it when it's initialized. ``` function PANEL:Init() self:SetSize( 100, 100 ) self:Center() end ``` We use `self:SetSize( 100, 100 )` to set the size of our panel to 100 pixels wide and 100 pixels tall. `self:Center()` centers our panel in the middle of our parent (if no parent is given it will center the panel in the middle of the screen). We can also give our table a function to tell Garry's Mod what we should do when we want to paint the panel on the screen. ``` function PANEL:Paint( w, h ) draw.RoundedBox( 0, 0, 0, w, h, Color(0,0,0,255) ) draw.RoundedBox( 0, 0, 0, w, h, color_black ) end ``` In this function we call `draw.RoundedBox(...)` to draw our panel with the dimensions defined in `self:SetSize()`. We start at 0,0 because this is the top-most-left-most point in our panel. # Finally We Register The final step in creating a custom VGUI Panel is to <page text="register the table">vgui.Register</page>. ``` vgui.Register( "MyFirstPanel", PANEL, "Panel" ) ``` Where; `"MyFirstPanel"` is the desired name of your panel to be used when you wish to create it. `PANEL` is the table we have created and `"Panel"` is the type of element you wish to use as a base. # Result You can now create your custom panel by using ``` local pnl = vgui.Create( "MyFirstPanel", parentpanel ) ``` or ``` local pnl = parentpanel:Add( "MyFirstPanel" ) ``` # Complete Code ``` local PANEL = {} function PANEL:Init() self:SetSize( 100, 100 ) self:Center() end function PANEL:Paint( w, h ) draw.RoundedBox( 0, 0, 0, w, h, Color(0,0,0,255) ) draw.RoundedBox( 0, 0, 0, w, h, color_black ) end vgui.Register( "MyFirstPanel", PANEL, "Panel" ) ```