Introduction To Using Derma

Introduction

This is the first in a series of tutorials that aim to take you from zero knowledge on derma, through all the essentials, to a solid foundation towards creating your first UI project.

Welcome to world of User Interfaces (UI) specifically within Garry's Mod. Before we begin lets define a clear vocabulary. The source engine by default draws its UI using VGUI (Valves Graphical User Interface) and CPP. In Garry's Mod We Use Lua and Derma. Derma was created by Garry and TAD2020 to make drawing UI's easier. Under the hood our Lua code will access the VGUI code allowing us to create, customize, and destroy UI elements.

Chapter 1: Panel (DPanel)

Panels are the root to root to everything, most (not all) other elements that you use and create will be comprised of these panels. The engine provides a VGUI control called "Panel" this is a control that has almost no default properties by default. Derma introduces "DPanel" a control that inherits from the engine panel while extending its functionality to be more flexible. Most of the time it will be better to use DPanel so that will be our focus.

Creating a Panel

In order to use a panel you will need to create one. The most common method is vgui.Create like so

local myFirstPanel = vgui.Create( "DPanel" )

This code snippet creates a DPanel object in Lua and stores in the variable myFirstPanel so that we may access it. We can then use this variable to run functions or adjust properties like:

Size - Width and Height of the Panel
Position - Where the top-left corner is
Draw Settings - Color and similar properties

Adjusting Properties

Panels don't make up much on their own, instead they act similarly to Lego bricks, allowing you to combine and connect multiple instances of them to create bigger components.

As mentioned before Panels have properties like Size, Position, and Draw Settings (better known as the Paint function, which we'll get to later). Part of what Derma does is provide us with Lua functions to adjust these properties.

Here is an example of some of the more common functions so you can experiment with them.

myFirstPanel:SetSize( 200, 100 ) -- Makes the width 200 pixels and the height 100 pixels myFirstPanel:SetPos( 50, 50 ) -- Sets the Panel 50 pixels from the left, then 50 from the top. myFirstPanel:Center() -- Move the panel to the center of its parent (useful for locating)

These should be fairly self-explanatory, however, its important to keep in mind how these functions use their numbers. Panels are drawn from the top-left, to the bottom-right. This means that when you use :SetSize(), the position of the top-left pixel will remain in the same spot while the bottom right pixel shoots out. Same thing with :SetPos(), this function will move the top-left pixel to those local coordinates on the screen (top-left of your screen being 0,0)

These functions are interpreted as they are read. If i use :Center() then :SetSize( w, h ) the panel will not appear center since it was centered first then the size changed.

Controlling Visibility

As you read this section, use vgui_visualizelayout 1 to help you spot any hidden panels. This function will make panels flash red when they UPDATE.

Visibility is important for controlling what you can and cant see within the elements. Derma provides us with a simple command Panel:SetVisible. Panels will automatically be shown and hidden based off of their parents state. Meaning if you hide a panel, all its children will hide to.

The visibility of panel is different than a transparent panel. A transparent panel will still update and act as though it is visible, while a hidden panel will not update correctly.

a DPanel can be made transparent by using DPanel:SetPaintBackground

Conclusion

That's it, everything you need to get started.

Here is a codeblock detailing everything we covered in this chapter:

-- Create the DPanel local myFirstPanel = vgui.Create( "DPanel" ) -- Set its size (Width: 200px, Height: 100px) myFirstPanel:SetSize( 200, 100 ) -- Set its position (X: 300px from left, Y: 200px from top) -- (Trying slightly different coords for visibility) myFirstPanel:SetPos( 300, 200 ) -- Make it paint its background myFirstPanel:SetPaintBackground( true ) -- Set the background color to blue (R=0, G=0, B=255, Alpha=255) myFirstPanel:SetBackgroundColor( Color( 0, 0, 255, 255 ) ) -- Make sure it's visible (usually is by default if not parented to hidden) myFirstPanel:SetVisible( true )