Revision Difference
Derma_Basic_Guide#513168
<cat>Dev.UI</cat>⤶
# What is Derma? ⤶
⤶
Derma was created by Garry and TAD2020 and is the easiest way to create on-screen menus for your gamemode or addon.⤶
⤶
Derma differs from vgui in that its code only needs to be run once, therefore you should NEVER put Derma code inside ⤶
<page>GM:HUDPaint</page> or similar function, as these are called each frame. To make your life easier, you should wrap your Derma code in a function and then call it whenever you need to create a menu and **always** use local variables. If you must use a global pointer, make it specific or a table member. `DLabel = vgui.Create( "DLabel" )` is bad coding practice and will likely override something.⤶
⤶
Derma is [clientside](/gmod/States) and if you would like to like to call it from the server, you will have to use the <page>net</page>.⤶
⤶
Because of the age of Derma, some elements are broken or deprecated in Garry's Mod 13 like the <page>DLabelURL</page> and <page>DPanelList</page>. The majority of the Derma pages on this wiki lead to functional panels.⤶
⤶
# Starting off ⤶
The very first thing you should do is create a <page>DFrame</page> as this will be your canvas, so to speak, for placing Derma on.⤶
⤶
## Code⤶
⤶
```⤶
local Frame = vgui.Create( "DFrame" )⤶
Frame:SetPos( 5, 5 ) ⤶
Frame:SetSize( 300, 150 ) ⤶
Frame:SetTitle( "Name window" ) ⤶
Frame:SetVisible( true ) ⤶
Frame:SetDraggable( false ) ⤶
Frame:ShowCloseButton( true ) ⤶
Frame:MakePopup()⤶
```⤶
⤶
⤶
## Output⤶
⤶
⤶
# Painting Derma ⤶
## What is it? ⤶
As useful as Derma is for the Lua coder, its ugly as sin and sometimes you want a really nice looking menu. You can solve this by overriding the panel's Paint function which you can do on every single Derma element. Overriding the function means that the panel will be invisible until you draw something on it; if you would like to draw on the current panel you might try the <page>PANEL:PaintOver</page> function.⤶
⤶
## Example Code⤶
⤶
```⤶
local Frame = vgui.Create( "DFrame" )⤶
Frame:SetTitle( "Test panel" )⤶
Frame:SetSize( 300,300 )⤶
Frame:Center() ⤶
Frame:MakePopup()⤶
Frame.Paint = function( self, w, h ) -- 'function Frame:Paint( w, h )' works too⤶
draw.RoundedBox( 0, 0, 0, w, h, Color( 231, 76, 60, 150 ) ) -- Draw a red box instead of the frame⤶
end⤶
⤶
local Button = vgui.Create("DButton", Frame)⤶
Button:SetText( "Click me I'm pretty!" )⤶
Button:SetTextColor( Color(255,255,255) )⤶
Button:SetPos( 100, 100 )⤶
Button:SetSize( 100, 30 )⤶
Button.Paint = function( self, w, h )⤶
draw.RoundedBox( 0, 0, 0, w, h, Color( 41, 128, 185, 250 ) ) -- Draw a blue button⤶
end⤶
Button.DoClick = function()⤶
print( "I was clicked!" )⤶
end⤶
```⤶
⤶
⤶
## Output⤶
⤶
⤶
# User Inputs ⤶
Your Derma menus might not be of much use if you don't know how to grab data from them; whether it would be user-typed text, a button click, or a checkbox. ⤶
⤶
Let's create a <page>DTextEntry</page> so the player can input their name and when they press enter! We can then assign the entered value to a variable to reference later or even use the <page>net</page> and send their name to the server for saving.⤶
## Example Code⤶
⤶
```⤶
local PlayerName = nil⤶
⤶
local NameEntry = vgui.Create( "DTextEntry", Frame )⤶
NameEntry:SetPos( 25, 50 )⤶
NameEntry:SetSize( 75, 85 )⤶
NameEntry:SetText( "Your Name" )⤶
NameEntry.OnEnter = function( self )⤶
PlayerName = self:GetValue()⤶
print( "This user's name is "..PlayerName ) ⤶
end⤶
```⤶
⤶
⤶
⤶
Now say we wanted the player to pick a color, which could be used for coloring their player or their name in chat, and then they would confirm it by pressing a button.⤶
⤶
## Example Code⤶
⤶
```⤶
local ChosenColor = nil⤶
⤶
local ColorPicker = vgui.Create( "DColorMixer", Frame )⤶
ColorPicker:SetSize( 200, 200 )⤶
ColorPicker:SetPos(50, 50)⤶
ColorPicker:SetPalette( true )⤶
ColorPicker:SetAlphaBar( true ) ⤶
ColorPicker:SetWangs( true )⤶
ColorPicker:SetColor( Color( 255, 255, 255 ) )⤶
⤶
local ConfirmColor = vgui.Create("DButton", Frame)⤶
ConfirmColor:SetText( "I want this color" )⤶
ConfirmColor:SetSize( 90, 30 )⤶
ConfirmColor:SetPos( 100, Frame:GetTall() - 40 )⤶
ConfirmColor.DoClick = function()⤶
ChosenColor = ColorPicker:GetColor() -- Grabs the red, green, blue, and alpha values as a Color object⤶
⤶
PrintTable(ChosenColor) ⤶
--[[ Prints:⤶
r = 255 ⤶
g = 255 ⤶
b = 255⤶
a = 255⤶
]]⤶
end⤶
```⤶
⤶
⤶
## Output⤶
⤶
⤶
# Scaling ⤶
## What is it? ⤶
Not everyone who plays Garry's Mod has the same resolution or monitor size as you and as such you should create your Derma to work on nearly everyone's monitors. You can accomplish this by using the <page>Global.ScrH</page> and <page>Global.ScrW</page> functions which return their respective dimensions as integers. This is not necessarily something you have to worry about when you start your project as working with constant sizes is quicker, but this is very important if your Derma is quite large.⤶
⤶
## How do I do it? ⤶
The first thing you need to do is figure out your monitor resolution, mine is 1920 x 1080 and I'll use that for this tutorial. The easiest way to find your resolution is just to use <page>Global.print</page> and the screen size functions.⤶
⤶
Now assume we created this frame and we want it to be in the center of the player's screen and be sized accordingly⤶
⤶
```⤶
MyFrame:SetSize( 400, 300 )⤶
```⤶
⤶
To do this in an efficient way, we can simply put a math into the <page>Panel:SetSize</page> method dividing the size we want by our screen resolution and using the <page>Global.ScrW</page> and <page>Global.ScrH</page> functions:⤶
⤶
```⤶
MyFrame:SetSize( ScrW() * 400/1920, ScrH() * 300/1080 )⤶
```⤶
⤶
Now this DFrame will be 400x300 on your resolution and it will size on any other resolution. You could then scale a DButton on this frame by dividing its size by the frame's size and it will scale according to it's parent.⤶
⤶
It is recommended to replace static calculations later with the calculated values to reduce unnecessary operations in rendering code:⤶
⤶
```⤶
MyFrame:SetSize( ScrW() * 0.208, ScrH() * 0.277 )⤶
```⤶
⤶
⤶
# Resources ⤶
Unfortunately, due to the large amount of functions in Derma not all of them are documented yet, but you can search through the source code yourself and figure out how those functions work! ⤶
You can find an online repository here: https://github.com/garrynewman/garrysmod/tree/master/garrysmod/lua/vgui or look in `garrysmod\lua\vgui` in your local `Garry's Mod` directory.⤶
⤶
A list of all Derma elements can be found [here](/gmod/VGUI_Element_List).⤶
⤶
⤶
⤶
Garry's Mod
Rust
Steamworks
Wiki Help
S&box