Derma Skin Creation

<cat>Dev.UI</cat>
#  Introduction 
As a developer you may be familiar with <page>PANEL:Paint</page> and <page>PANEL:PaintOver</page>. They are functions to draw your Derma objects. But one day you wanted to make your own Derma design. You may think that redrawing is too complicated: <page>surface</page>, <page>draw</page>, <page>render</page>. So many functions, aren't they? Is there a way to make it easier and fancy? Yes, this page will show you how to create your own Derma Skin. Exactly same method uses default Derma and it's defined in Lua.

#  How Derma skins work? 
First thing to know, they're located in `"garrysmod/lua/skins/"`. Default Derma skin is in "default.lua".


It contains [UV texture mapping](https://en.wikipedia.org/wiki/UV_mapping), <page>Global.Color</page> definitions and <page text="Derma Hooks">derma.SkinHook</page>.


UV mapping is possible through <page>GWEN</page>. Some GWEN functions require a <page>IMaterial</page> in last argument, but it can be empty: GWEN will use **SKIN.GwenTexture** variable instead. Default skin texture can be found in **Garry's Mod .vpk** file in `"materials/gwenskin/gmoddefault.png"`.


Inside file there're bunch of Derma Hooks. They're used in conjunction with <page>derma.SkinHook</page> (used in <page>Global.Derma_Hook</page>).

## Example

This is in **["default.lua"](https://github.com/Facepunch/garrysmod/blob/master/garrysmod/lua/skins/default.lua)**.



```
function SKIN:PaintFrame( panel, w, h )

	if ( panel.m_bPaintShadow ) then -- This is DFrame shadow

		DisableClipping( true )
		SKIN.tex.Shadow( -4, -4, w+10, h+10 ) -- This is drawing function, that contains a piece of our texture
		DisableClipping( false )

	end

	if ( panel:HasHierarchicalFocus() ) then -- Checks if DFrame is in focus and decide how to paint it

		self.tex.Window.Normal( 0, 0, w, h ) -- This is drawing function, that contains a piece of our texture

	else

		self.tex.Window.Inactive( 0, 0, w, h ) -- This is drawing function, that contains a piece of our texture

	end

end
```


And this is in `"lua/vgui/dframe.lua"` where <page>DFrame</page> is defined.



```
function PANEL:Paint( w, h )

    -- ...

	derma.SkinHook( "Paint", "Frame", self, w, h ) -- This creates hook to derma library, derma library is connected to our skin

    -- ...

end
```


----

Last thing that skin file does is adding skin to Derma skins list. This action is done by <page>derma.DefineSkin</page>.

#  Preparing to create Derma skin 

1. Get [Adobe Photoshop](https://www.adobe.com/products/photoshop.html)
1. Extract `"materials/gwenskin/gmoddefault.psd"` (You can do this with [GCFScape](https://nemstools.github.io/pages/GCFScape-Download.html))
1. Copy code (or file) from `"lua/skins/default.lua"`
1. Create lua file in `"lua/skins/"`. For this tutorial we will name it **"myskin.lua"**.
1. Create lua file in `"lua/autorun/"`. You can name it how you want it, just make it unique, for example **"myskin_include.lua"**.

## Code for myskin_include.lua



```
if SERVER then AddCSLuaFile("skins/myskin.lua") else include("skins/myskin.lua") end
```


This file adds our skin to whitelist for server and includes for client on load.

#  Reference 
SKIN

Table SKIN is a global variable. It's made global to work with <page>GWEN</page>.

<br/>

<page>derma.DefineSkin</page>(skin name, skin description, SKIN table)

```
derma.DefineSkin( "Default", "Made to look like regular VGUI", SKIN )
```


This function will add your skin to list of all Derma skins.

<br/>

<page>derma.GetSkinTable</page>()

```
for k,v in pairs(derma.GetSkinTable()) do print(k) end -- Prints all defined skins
```

<br/>

<page>derma.RefreshSkins</page>()

This function will clear cache from Derma objects and set their skin again.

# Tester snippet

To test out your Derma skin you can use this snippet.



```
concommand.Add( "derma_setskin", function(_,_,args)
	if GetConVar("sv_allowcslua"):GetInt() == 0 then return end
	for k,v in pairs(vgui.GetWorldPanel():GetChildren()) do
		v:SetSkin(args[1])
	end
end,nil,"Sets skin for all Derma objects.")
local function deepskin(children,skin)
	for k,v in pairs(children) do
		v:SetSkin(skin)
		if #v:GetChildren() != 0 then deepskin(v:GetChildren(),skin) end
	end
end
concommand.Add( "derma_deepsetskin", function(_,_,args)
	if GetConVar("sv_allowcslua"):GetInt() == 0 then return end
	deepskin(vgui.GetWorldPanel():GetChildren(),args[1])
end,nil,"Forces skin set for all Derma objects and their children.")
concommand.Add( "derma_updateskin", function()
	if GetConVar("sv_allowcslua"):GetInt() == 0 then return end
	for k,v in pairs(derma.GetSkinTable()) do
		if v.GwenTexture then
			local tex = v.GwenTexture:GetTexture("$basetexture")
			if tex then tex:Download() end
		end
	end
	derma.RefreshSkins()
end,nil,"Updates skins for all Derma objects.")
```


Derma objects can't update themselves because skin that they used is **cached**.
Due to skins are being **cached**, Derma objects can't update themselves while you're editing. So we need to clear cache by typing command **derma_updateskin**. Also its material can't update itself, to fix that, it uses <page>ITexture:Download</page>.


Function **derma_setskin *skin name*** allows you to apply Derma skin on all Derma object through the console. If some panels didn't update use **derma_deepsetskin *skin name***.


For safety, you can't use these functions when **sv_allowcslua is 0**. You can remove this check if you don't forget to remove tester later.
To test your skin you can type **derma_controls** to preview.

#  Part One: SKIN variables 
SKIN table has a lot of variables. These are for info.


SKIN variables | Information variables |
-------------------------------------|:----:|----
| PrintName | My New Skin | Name for your skin to display |
| Author | Garry Newman | Author of the skin |
| DermaVersion | 1 | Version of the skin |
| GwenTexture | `Material( "gwenskin/GModDefault.png" )` | Texture path of the skin. This is used to draw Derma objects. This is internally used by <page>GWEN</page>. |


Next you will see lots of <page>Global.Color</page> variables. But not all of them are actually visible in game.

This list contains variables which were tested for changes.


SKIN variables | Color variables |
-------------------------------|:------:|-----
| colTextEntryText | `Color( 20, 20, 20 )` | Used for typed text color in <page>DTextEntry</page> and it's derivatives | <image src="DermaSkin_colTextEntryText.png"/> <note>Color can display incorrectly in game.</note> |
| colTextEntryTextHighlight | `Color( 20, 200, 250 )` | Used for highlight color in <page>DTextEntry</page> and it's derivatives | <image src="DermaSkin_colTextEntryTextHighlight.png"/> <note>Color can display incorrectly in game.</note> |
| colTextEntryTextCursor | `Color( 0, 0, 100 )` | Used for cursor color in <page>DTextEntry</page> and it's derivatives | <image src="DermaSkin_colTextEntryTextCursor.png"/> |
| colTextEntryTextPlaceholder | `Color( 128, 128, 128 )` | Used for <page text="SetPlaceholderText">DTextEntry:SetPlaceholderText</page> color in <page>DTextEntry</page> and it's derivatives | <image src="DermaSkin_colTextEntryTextPlaceholder.png"/> <note>Color can display incorrectly in game.</note> |


Column "In game" note: `Right filled square represents real color. Left screenshot represents in-game render.`


Other Color variables doesn't work because Derma objects use texture instead.
<note>ULX uses **SKIN.text_dark** for some labels</note>
#  Part Two: UV Texture 
##  Named Textures 
<image src="DermaSkin_UV_Mapping.png"/>

`UV mapping zones. Can be found in .psd file in folder "Overlay".`

<note>Even in UV texture not all of textures are used in GMod!</note>




|List of named layers (From left top to right bottom) |
|------|:------:|------|
| Window (In Focus) | Window - Active | Texture of <page>DFrame</page> when <page text="HasHierarchicalFocus">Panel:HasHierarchicalFocus</page> is **true** |
| Window (Out Focus) | Window - Active (copy) | Texture of <page>DFrame</page> when <page text="HasHierarchicalFocus">Panel:HasHierarchicalFocus</page> is **false** |
| Generic Panel (Only left top is used) | Panels - Generic Panel - Normal | Texture of <page>DPanel</page> by default. This texture can be colored by <page text="SetBackgroundColor">DPanel:SetBackgroundColor</page> |
| Btn Nrml | Buttons - Regular | Texture of <page>DButton</page> when <page text="IsHovered">Panel:IsHovered</page> is **false** and <page text="IsDown">DButton:IsDown</page> is **false** |
| Btn Hvr | Buttons - Hovered | Texture of <page>DButton</page> when <page text="IsHovered">Panel:IsHovered</page> is **true** and <page text="IsDown">DButton:IsDown</page> is **false** |
| Btn Dsbld | Buttons - Dead | Texture of <page>DButton</page> when <page text="IsEnabled">Panel:IsEnabled</page> is **false** |
| Btn Down | Buttons - Down | Texture of <page>DButton</page> when <page text="IsDown">DButton:IsDown</page> is **true** |
| Chk | Buttons - Checkbox - Enabled | Textures of <page>DCheckBox</page> when <page text="IsEnabled">Panel:IsEnabled</page> is **true** |
| Chk Dsbld | Buttons - Checkbox - Disabled | Textures of <page>DCheckBox</page> when <page text="IsEnabled">Panel:IsEnabled</page> is **false** |
| Expnd | Buttons - Tree | Textures of <page>DExpandButton</page> |
| Tree Background | Panels - Tree Panel | Texture of <page>DTree</page>. This texture can be colored by <page text="SetBackgroundColor">DPanel:SetBackgroundColor</page> |
| Mnu rght | Menu - Right Arrow | Texture of Arrow in <page text="AddSubMenu">DMenu:AddSubMenu</page> option <note><page>DMenu</page> doesn't derive panel's skin when called by <page>Global.DermaMenu</page>. So it will be always "Default" skin. Works only when you set skin for it when it's visible or in <page>DMenuBar</page>.</note> |
| Menu Strip | Menu - MenuStrip | Texture of <page>DMenuBar</page> <note><page>DMenu</page> doesn't derive panel's skin when called by <page>Global.DermaMenu</page>. So it will be always "Default" skin. Works only when you set skin for it when it's visible or in <page>DMenuBar</page>.</note> |
| Menu Background | Menu - With Border | Texture of <page>DMenuOption</page> when <page text="GetDrawColumn">DMenu:GetDrawColumn</page> is **true** <note><page>DMenu</page> doesn't derive panel's skin when called by <page>Global.DermaMenu</page>. So it will be always "Default" skin. Works only when you set skin for it when it's visible or in <page>DMenuBar</page>.</note> |
| Menu BG No Border | Menu - Without Border | Texture of <page>DMenuOption</page> when <page text="GetDrawColumn">DMenu:GetDrawColumn</page> is **false** <note><page>DMenu</page> doesn't derive panel's skin when called by <page>Global.DermaMenu</page>. So it will be always "Default" skin. Works only when you set skin for it when it's visible or in <page>DMenuBar</page>.</note> |
| Menu Selected | Menu - Hover | Texture of <page>DMenuOption</page> when <page text="IsHovered">Panel:IsHovered</page> is **true** <note><page>DMenu</page> doesn't derive panel's skin when called by <page>Global.DermaMenu</page>. So it will be always "Default" skin. Works only when you set skin for it when it's visible or in <page>DMenuBar</page>.</note> |
| Text Entry Normal | Text Entry - Normal | Texture of <page>DTextEntry</page> when <page text="IsEditing">DTextEntry:IsEditing</page> is **false** |
| Text Entry Focused | Text Entry - Focus | Texture of <page>DTextEntry</page> when <page text="IsEditing">DTextEntry:IsEditing</page> is **true** |
| Text Entry Disabled | Text Entry - Disabled | Texture of <page>DTextEntry</page> when <page text="IsEnabled">Panel:IsEnabled</page> is **false** |
| Scroller Track V | Scrollbar - Vertical | Texture of <page>DVScrollBar</page> track |
| VScrollbar - Normal | Scrollbar - Vertical | Texture of <page>DVScrollBar</page>**.btnGrip** when <page text="IsHovered">Panel:IsHovered</page> is **false** and <page text="IsDown">DButton:IsDown</page> is **false** |
| VScrollbar - Hovered | Scrollbar - Vertical | Texture of <page>DVScrollBar</page>**.btnGrip** when <page text="IsHovered">Panel:IsHovered</page> is **true** and <page text="IsDown">DButton:IsDown</page> is **false** |
| VScrollbar - Pressed | Scrollbar - Vertical | Texture of <page>DVScrollBar</page>**.btnGrip** when <page text="IsDown">DButton:IsDown</page> is **true** |
| VScrollbar - Disabled | Scrollbar - Vertical | Texture of <page>DVScrollBar</page>**.btnGrip** when <page text="IsEnabled">Panel:IsEnabled</page> is **false** |
| Tab Panel BG | Tabbed - Body | Texture of <page>DPropertySheet</page> where <page text="GetActiveTab">DPropertySheet:GetActiveTab</page> is docked |
| Tab Top | Tabbed - Active | Texture of <page>DTab</page> when <page text="IsActive">DFrame:IsActive</page> is **true** |
| Unfcs Top | Tabbed - Inactive | Texture of <page>DTab</page> when <page text="IsActive">DFrame:IsActive</page> is **false** |
| List Box | ListBox - Background | Texture of <page>DListBox</page>. This class is deprecated, but it's still in game |


<note>This list contains only named textures which are used in GMod! For example, RadioButton is not listed here.</note>
##  Unnamed Textures 
<image src="DermaSkin_Textures_Numbered.png" alt="500px"/>

<bug>
	**This bug in only for layer 3.**  
	Will be used shadow texture from last loaded skin! To fix it change **SKIN** in functions **PaintShadow** and **PaintFrame** to **self**.
</bug>

| List of unnamed layers |
|----------------------|
| 1 | Texture of <page>DProgress</page> main body |
| 2 | Texture of <page>DProgress</page> progress body |
| 3 | Texture of <page>DFrame</page> outside shadow | 
| 4 | Texture of selection for <page>DTree</page> and <page>DIconBrowser</page> |
| 5 | Texture of <page>DTooltip</page> <bug><page>DTooltip</page> doesn't derive panel's skin. So it will be always "Default" skin. Works only when you set skin for it when it's visible.</bug> |
| 6 | Textures of **default**, **hovered** and **pressed** <page>DSlider</page> knob |
| 7 | Unused. Can be texture of vertical slider |
| 8 | Textures of **default**, **hovered** and **pressed** <page>DNumberWang</page> |
| 9 | Texture of <page>DMenu</page> check icon <note><page>DMenu</page> doesn't derive panel's skin when called by <page>Global.DermaMenu</page>. So it will be always "Default" skin. Works only when you set skin for it when it's visible or in <page>DMenuBar</page>.</note> |
| 10 | Textures of **default**, **hovered** and **pressed** <page>DScrollPanel:GetVBar</page> and <page>DHorizontalDivider</page>. Textures of **default**, **hovered** and **pressed** <page>DComboBox</page> button |
| 11 | Texture of selected <page>DListView_Line</page> |
| 12 | Texture of altered <page>DListView_Line</page>. To separate one line from another, DListView automatically color odd lines to slight dark color. Can be called by internal function <page>DListView_Line:SetAltLine</page> |
| 13 | Unused. Can be textures of alternative colors for <page>DListView_Line</page> |
| 14 | Texture of **hovered** <page>DListView_Line</page> |
| 15 | Unused |
| 16 | Texture of **default** <page>DComboBox</page> |
| 17 | Texture of **hovered** <page>DComboBox</page> |
| 18 | Texture of **pressed** <page>DComboBox</page> |
| 19 | Texture of **disabled** <page>DComboBox</page> |
| 20 | Texture of folded <page>DCategoryList</page> and <page>DCollapsibleCategory</page> |
| 21 | Texture of unfolded <page>DCategoryList</page> and <page>DCollapsibleCategory</page> |
| 22 | Texture of <page>DCategoryList</page> body |
| 23 | Unused |
| 24 | Textures of <page>DFrame</page>**.btnClose** button |
| 25 | Textures of <page>DFrame</page>**.btnMinim** button |
| 26 | Textures of <page>DFrame</page>**.btnMaxim** button |
| 27 | Unused. Can be textures of <page>DFrame</page> "Restore" button |


##  Color Palette Texture 
<upload src="b5245/8dbee87256cef09.png" size="7919" name="DermaSkin_Color_Numbered_Table_Updated.png" />


|Color Palette Table |
|-------------------|
| 1 A | No Color / Not Used |
| 1 B | Color of <page>DFrame</page> title when <page text="HasHierarchicalFocus">Panel:HasHierarchicalFocus</page> is **true** |
| 2 A | No Color / Not Used |
| 2 B | Color of <page>DFrame</page> title when <page text="HasHierarchicalFocus">Panel:HasHierarchicalFocus</page> is **false** |
| 3 A | Color of <page>DButton</page> text when <page text="IsDown">DButton:IsDown</page> is **true** |
| 3 B | Color of <page>DButton</page> default text |
| 4 A | Color of <page>DButton</page> text when <page text="IsEnabled">Panel:IsEnabled</page> is **false** |
| 4 B | Color of <page>DButton</page> text when <page text="IsHovered">Panel:IsHovered</page> is **true** |
| 5 A | Color of <page>DTab</page> text when <page text="IsActive">DFrame:IsActive</page> is **true** and <page text="IsDown">DButton:IsDown</page> is **true** |
| 5 B | Color of <page>DTab</page> default text when <page text="IsActive">DFrame:IsActive</page> is **true** |
| 6 A | Color of <page>DTab</page> text when <page text="IsActive">DFrame:IsActive</page> is **true** and <page text="IsEnabled">Panel:IsEnabled</page> is **false** |
| 6 B | Color of <page>DTab</page> text when <page text="IsActive">DFrame:IsActive</page> is **true** and <page text="IsHovered">Panel:IsHovered</page> is **true** |
| 7 A | Color of <page>DTab</page> text when <page text="IsActive">DFrame:IsActive</page> is **false** and <page text="IsDown">DButton:IsDown</page> is **true** |
| 7 B | Color of <page>DTab</page> default text when <page text="IsActive">DFrame:IsActive</page> is **false** |
| 8 A | Color of <page>DTab</page> text when <page text="IsActive">DFrame:IsActive</page> is **false** and <page text="IsEnabled">Panel:IsEnabled</page> is **false** |
| 8 B | Color of <page>DTab</page> text when <page text="IsActive">DFrame:IsActive</page> is **false** and <page text="IsHovered">Panel:IsHovered</page> is **true** |
| 9 A | Color of <page>DLabel</page> and <page>DListView_Line</page> label when <page text="GetDark">DLabel:GetDark</page> is **true** |
| 9 B | Color of <page>DLabel</page> and <page>DListView_Line</page> label when default |
| 10 A | Color of <page>DLabel</page> and <page>DListView_Line</page> label when <page text="GetHighlight">DLabel:GetDark</page> is **true** |
| 10 B | Color of <page>DLabel</page> and <page>DListView_Line</page> label when <page text="GetBright">DLabel:GetDark</page> is **true** |
| 11 A | Color of <page>DTree_Node_Button</page> text when <page text="IsHovered">Panel:IsHovered</page> is **true** and <page>DForm:ControlHelp</page> text |
| 11 B | Color of <page>DFileBrowser</page> treeline |
| 12 A | Color of <page>DTree_Node_Button</page> text when <page text="IsSelected">Panel:IsSelected</page> is **true** |
| 12 B | Color of <page>DTree_Node_Button</page> text when default |
| 13 A | Not Used. `Colours.Properties.Line_Hover` |
| 13 B | Not Used. `Colours.Properties.Line_Normal` |
| 14 A | Color of <page>DProperties</page> category label |
| 14 B | Not Used. `Colours.Properties.Line_Selected` |
| 15 A | Not Used. `Colours.Properties.Column_Hover` |
| 15 B | Not Used. `Colours.Properties.Column_Normal` |
| 16 A | Color of <page>DProperties</page> border between rows and columns |
| 16 B | Color of <page>DProperties</page> cell when row is being edited |
| 17 A | Not Used. `Colours.Properties.Label_Hover` |
| 17 B | Color of <page>DProperties</page> cell label when row isn't being edited |
| 18 A | No Color / Not Used |
| 18 B | Color of <page>DProperties</page> cell label when row is being edited |
| 19 A | Color of <page>DCategoryHeader</page> title when <page text="GetExpanded">DCollapsibleCategory:GetExpanded</page> is **false** |
| 19 B | Not Used. Named as "ModalBackground" |
| 20 A | Color of <page>DCategoryHeader</page> title when <page text="GetExpanded">DCollapsibleCategory:GetExpanded</page> is **true** |
| 20 B | Not Used. Named as "TooltipText" (Real tooltip text uses 27A) |
| 21 A | Color of <page>DCollapsibleCategory:Add</page> button text when **not Atled** and <page text="IsDown">DButton:IsDown</page> is **true** |
| 21 B | Color of <page>DCollapsibleCategory:Add</page> button text when **not Atled** |
| 22 A | Color of <page>DCategoryList:AddItem</page> element when **Altered** |
| 22 B | Color of <page>DCollapsibleCategory:Add</page> button text when **not Atled** and <page text="IsHovered">Panel:IsHovered</page> is **true** |
| 23 A | Color of <page>DCollapsibleCategory:Add</page> button text when **Atled** |
| 23 B | Color of <page>DCategoryList:AddItem</page> element when **Altered** and <page text="IsHovered">Panel:IsHovered</page> is **true** |
| 24 A | Color of <page>DCollapsibleCategory:Add</page> button text when **Atled** and <page text="IsHovered">Panel:IsHovered</page> is **true** |
| 24 B | Color of <page>DCategoryList:AddItem</page> element when **Altered** and <page text="IsSelected">Panel:IsSelected</page> is **true** |
| 25 A | Color of <page>DCategoryList:AddItem</page> element when <page text="IsHovered">Panel:IsHovered</page> is **true** |
| 25 B | Color of <page>DCollapsibleCategory:Add</page> button text when **not Atled** and <page text="IsDown">DButton:IsDown</page> is **true** |
| 26 A | Color of <page>DCategoryList:AddItem</page> element when <page text="IsSelected">Panel:IsSelected</page> is **true** |
| 26 B | Color of <page>DCategoryList:AddItem</page> element |
| 27 A | Color of <page>DTooltip</page> text. <bug>Currently broken.</bug> |
| 27 B | No Color / Not Used |


#  Demo  
For tutorial was created a Demo Addon with Windows 10 UI skin for Derma.
You can download it [here](https://steamcommunity.com/sharedfiles/filedetails/?id=1633684835).

Addon uses this hook for painting all Derma objects:


```
hook.Add("ForceDermaSkin","Windows10SkinForce",function()
	return "Windows" -- This will paint all Derma objects to new skin
end)
```

Derma Skin Creation

Account Management

Special Pages

Wiki List

Garry's Mod Wiki