Garry's Mod
Garry's Mod

UI Development with Derma — Garry's Mod Guide

Learn Garry's Mod UI development with Derma. Create custom menus, windows, and buttons using Lua and Derma elements like DFrame, DButton, and DLabel.

UI Development with Derma

Derma is Garry's Mod's built-in GUI (Graphical User Interface) framework, allowing developers to create custom menus, windows, buttons, and other interactive elements within the game. Whether you're desing a complex gamemode interface, a settings menu, or a simple information panel, Derma provides the tools to build user-friendly and visually appealing UIs. Mastering Derma is essential for any serious Garry's Mod developer looking to create polished and professional addons.

Derma operates on a panel-based system. You create 'panels' which are essentially containers for other Derma elements. These panels can be nested, allowing for complex UI structures. The framework uses Lua scripting to define the appearance, behavior, and functionality of these UI elements.

Key Derma elements and concepts include:

  • vgui.Create("DFrame"): Creates a basic window or frame, which serves as the primary container for other elements.
  • panel:SetPos(x, y): Sets the position of a panel on the screen.
  • panel:SetSize(width, height): Sets the dimensions of a panel.
  • panel:SetTitle("My Window"): Sets the title bar text for a frame.
  • panel:MakePopup(): Makes the panel appear as a modal window, often blocking interaction with the game behind it.
  • panel:Dock(side): Allows panels to dock to specific sides of their parent container, creating responsive layouts.
  • vgui.Create("DButton"): Creates a clickable button. You can attach functions to its DoClick event to define what happens when it's pressed.
  • vgui.Create("DLabel"): Creates a text label.
  • vgui.Create("DTextEntry"): Creates a text input field.
  • vgui.Create("DPanelList"): A versatile panel that automatically arranges child elements in a list, useful for scrollable menus.

Creating a Simple Derma Window:

Here's a basic example of how to create a simple Derma window that appears when a console command is run:


concommand.Add("show_my_menu", function()
 local frame = vgui.Create("DFrame")
 frame:SetSize(300, 200)
 frame:SetTitle("My Custom Menu")
 frame:Center()
 frame:MakePopup()

 local label = vgui.Create("DLabel", frame) -- Create a label inside the frame
 label:SetPos(20, 40)
 label:SetText("Hello, Derma!")
 label:SizeToContents()

 local button = vgui.Create("DButton", frame)
 button:SetPos(20, 80)
 button:SetSize(100, 30)
 button:SetText("Click Me")
 button.DoClick = function()
 print("Button clicked!")
 end
end)

To use this, save it as a Lua file in your `garrysmod/lua/autorun/client/` folder. Then, in the game console, type show_my_menu. Derma development involves a lot of trial and error, and understanding the hierarchy of panels and their properties is key to creating effective UIs.