Derma Tema Oluşturma

Giriş

Bir geliştirici olarak PANEL:Paint ve PANEL:PaintOver'a aşina olabilirsiniz. Bunlar, Derma nesnelerinizi çizmek için kullanılan fonksiyonlardır. Ama bir gün kendi Derma tasarımınızı yapmak istediniz. Yeniden çizmenin çok karmaşık olduğunu düşünebilirsiniz: surface, draw, render. Ne kadar çok fonksiyon, değil mi? Bunu daha kolay ve şık hale getirmenin bir yolu var mı? Evet, bu sayfa size kendi Derma Temanızı nasıl oluşturacağınızı gösterecektir. Varsayılan Derma'da tamamen aynı yöntem kullanılır ve bu Lua'da tanımlanmıştır.

Derma temaları nasıl çalışır?

Bilmeniz gereken ilk şey, temaların "garrysmod/lua/skins/" konumunda bulunduğudur. Varsayılan Derma teması "default.lua" dosyasındadır.

Bu dosya, UV doku haritalama (UV texture mapping), Renk tanımları ve Derma Kancaları (Derma Hooks) içerir.

UV haritalama, GWEN aracılığıyla mümkündür. Bazı GWEN fonksiyonları son argüman olarak bir IMaterial gerektirir, ancak bu boş bırakılabilir: GWEN bunun yerine SKIN.GwenTexture değişkenini kullanacaktır. Varsayılan tema dokusu, Garry's Mod .vpk dosyasında "materials/gwenskin/gmoddefault.png" konumunda bulunabilir.

Dosyanın içinde bir dizi Derma Kancası bulunur. Bunlar, derma.SkinHook ile birlikte kullanılır (Derma_Hook içinde kullanılır).

Örnek

Bu kod "default.lua" dosyasındadır.

function SKIN:PaintFrame( panel, w, h ) if ( panel.m_bPaintShadow ) then -- Bu DFrame gölgesidir local wasEnabled = DisableClipping( true ) self.tex.Shadow( -4, -4, w+10, h+10 ) -- Bu, dokumuzdan bir parça içeren çizim fonksiyonudur DisableClipping( wasEnabled ) end if ( panel:HasHierarchicalFocus() ) then -- DFrame'in odakta olup olmadığını kontrol eder ve nasıl boyanacağına karar verir self.tex.Window.Normal( 0, 0, w, h ) -- Bu, dokumuzdan bir parça içeren çizim fonksiyonudur else self.tex.Window.Inactive( 0, 0, w, h ) -- Bu, dokumuzdan bir parça içeren çizim fonksiyonudur end end

Ve bu da DFrame'in tanımlandığı "lua/vgui/dframe.lua" dosyasındadır.

function PANEL:Paint( w, h ) -- ... derma.SkinHook( "Paint", "Frame", self, w, h ) -- Bu, derma kütüphanesine bir kanca oluşturur; derma kütüphanesi temamıza bağlıdır -- ... end

Tema dosyasının yaptığı son şey, temayı Derma temaları listesine eklemektir. Bu işlem derma.DefineSkin ile yapılır.

Derma teması oluşturmaya hazırlanma

  1. Adobe Photoshop edinin
  2. "materials/gwenskin/gmoddefault.psd" dosyasını çıkartın (Bunu GCFScape ile yapabilirsiniz)
  3. "lua/skins/default.lua" dosyasından kodu (veya dosyayı) kopyalayın
  4. "lua/skins/" içinde bir lua dosyası oluşturun. Bu eğitim için adını "myskin.lua" koyacağız.
  5. "lua/autorun/" içinde bir lua dosyası oluşturun. İstediğiniz gibi adlandırabilirsiniz, sadece benzersiz olduğundan emin olun, örneğin "myskin_include.lua".

myskin_include.lua için kod

if SERVER then AddCSLuaFile("skins/myskin.lua") else include("skins/myskin.lua") end

Bu dosya, temamızı sunucu için beyaz listeye ekler ve yüklendiğinde istemci için dahil eder.

Referans

SKIN

SKIN tablosu global bir değişkendir. GWEN ile çalışabilmesi için global yapılmıştır.


derma.DefineSkin(tema adı, tema açıklaması, SKIN tablosu)

derma.DefineSkin( "Default", "Sıradan VGUI gibi görünmesi için yapıldı", SKIN )

Bu fonksiyon, temanızı tüm Derma temalarının listesine ekleyecektir.


derma.GetSkinTable()

for k,v in pairs(derma.GetSkinTable()) do print(k) end -- Tanımlanmış tüm temaları yazdırır


derma.RefreshSkins()

Bu fonksiyon, Derma nesnelerinden önbelleği temizler ve temalarını yeniden ayarlar.

Test Kodu Parçası

Derma temanızı test etmek için bu kodu kullanabilirsiniz.

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,"Tüm Derma nesneleri için tema ayarlar.") 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,"Tüm Derma nesneleri ve onların alt elemanları için temayı zorla ayarlar.") 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,"Tüm Derma nesneleri için temaları günceller.")

Derma nesneleri kendilerini güncelleyemez çünkü kullandıkları tema önbelleğe alınmıştır. Temaların önbelleğe alınması nedeniyle, siz düzenleme yaparken Derma nesneleri kendilerini güncelleyemez. Bu yüzden derma_updateskin komutunu yazarak önbelleği temizlememiz gerekir. Ayrıca materyali de kendi kendine güncellenemez, bunu düzeltmek için ITexture:Download kullanır.

derma_setskin tema_adı fonksiyonu, konsol aracılığıyla tüm Derma nesnelerine bir Derma teması uygulamanızı sağlar. Eğer bazı paneller güncellenmediyse derma_deepsetskin tema_adı kullanın.

Güvenlik amacıyla, sv_allowcslua 0 olduğunda bu fonksiyonları kullanamazsınız. Eğer test kodunu daha sonra kaldırmayı unutmayacaksanız bu kontrolü kaldırabilirsiniz. Temanızı test etmek için önizleme yapmak amacıyla derma_controls yazabilirsiniz.

Birinci Bölüm: SKIN değişkenleri

SKIN tablosunda birçok değişken bulunur. Bunlar bilgi amaçlıdır.

SKIN değişkenleri Bilgi değişkenleri
PrintName Yeni Temam Temanız için görüntülenecek isim
Author Garry Newman Temanın yazarı
DermaVersion 1 Temanın versiyonu
GwenTexture Material( "gwenskin/GModDefault.png" ) Temanın doku yolu. Bu, Derma nesnelerini çizmek için kullanılır. Bu, dahili olarak GWEN tarafından kullanılır.

Sırada birçok Renk değişkeni göreceksiniz. Ancak bunların hepsi oyunda gerçekten görünür değildir.

Bu liste, değişiklikler için test edilmiş değişkenleri içerir.

SKIN değişkenleri Renk değişkenleri
colTextEntryText Color( 20, 20, 20 ) DTextEntry ve türevlerinde yazılan metin rengi için kullanılır Renk oyunda yanlış görüntülenebilir.
colTextEntryTextHighlight Color( 20, 200, 250 ) DTextEntry ve türevlerinde vurgu rengi için kullanılır Renk oyunda yanlış görüntülenebilir.
colTextEntryTextCursor Color( 0, 0, 100 ) DTextEntry ve türevlerinde imleç rengi için kullanılır
colTextEntryTextPlaceholder Color( 128, 128, 128 ) DTextEntry ve türevlerinde SetPlaceholderText rengi için kullanılır Renk oyunda yanlış görüntülenebilir.

"Görüntü" sütunu notu: Sağdaki dolu kare gerçek rengi temsil eder. Soldaki ekran görüntüsü oyundaki render'ı temsil eder.

Diğer Renk değişkenleri çalışmaz çünkü Derma nesneleri bunun yerine doku kullanır.

ULX, bazı etiketler için SKIN.text_dark kullanır

İkinci Bölüm: UV Dokusu

İsimlendirilmiş Dokular

UV haritalama bölgeleri. "Overlay" klasöründeki .psd dosyasında bulunabilir.

UV dokusunda bile tüm dokular GMod'da kullanılmaz!
İsimlendirilmiş katmanların listesi (Soldan sağa, yukarıdan aşağıya)
Window (In Focus) Window - Active HasHierarchicalFocus true olduğunda DFrame dokusu
Window (Out Focus) Window - Active (copy) HasHierarchicalFocus false olduğunda DFrame dokusu
Generic Panel (Only left top is used) Panels - Generic Panel - Normal Varsayılan olarak DPanel dokusu. Bu doku SetBackgroundColor ile renklendirilebilir
Btn Nrml Buttons - Regular IsHovered false ve IsDown false olduğunda DButton dokusu
Btn Hvr Buttons - Hovered IsHovered true ve IsDown false olduğunda DButton dokusu
Btn Dsbld Buttons - Dead IsEnabled false olduğunda DButton dokusu
Btn Down Buttons - Down IsDown true olduğunda DButton dokusu
Chk Buttons - Checkbox - Enabled IsEnabled true olduğunda DCheckBox dokuları
Chk Dsbld Buttons - Checkbox - Disabled IsEnabled false olduğunda DCheckBox dokuları
Expnd Buttons - Tree DExpandButton dokuları
Tree Background Panels - Tree Panel DTree dokusu. Bu doku SetBackgroundColor ile renklendirilebilir
Mnu rght Menu - Right Arrow AddSubMenu seçeneğindeki Ok dokusu DMenu, DermaMenu tarafından çağrıldığında panelin temasını devralmaz. Bu yüzden her zaman "Varsayılan" tema olacaktır. Sadece görünür durumdayken veya DMenuBar içindeyken tema ayarlanırsa çalışır.
Menu Strip Menu - MenuStrip DMenuBar dokusu DMenu, DermaMenu tarafından çağrıldığında panelin temasını devralmaz. Bu yüzden her zaman "Varsayılan" tema olacaktır. Sadece görünür durumdayken veya DMenuBar içindeyken tema ayarlanırsa çalışır.
Menu Background Menu - With Border GetDrawColumn true olduğunda DMenuOption dokusu DMenu, DermaMenu tarafından çağrıldığında panelin temasını devralmaz. Bu yüzden her zaman "Varsayılan" tema olacaktır. Sadece görünür durumdayken veya DMenuBar içindeyken tema ayarlanırsa çalışır.
Menu BG No Border Menu - Without Border GetDrawColumn false olduğunda DMenuOption dokusu DMenu, DermaMenu tarafından çağrıldığında panelin temasını devralmaz. Bu yüzden her zaman "Varsayılan" tema olacaktır. Sadece görünür durumdayken veya DMenuBar içindeyken tema ayarlanırsa çalışır.
Menu Selected Menu - Hover IsHovered true olduğunda DMenuOption dokusu DMenu, DermaMenu tarafından çağrıldığında panelin temasını devralmaz. Bu yüzden her zaman "Varsayılan" tema olacaktır. Sadece görünür durumdayken veya DMenuBar içindeyken tema ayarlanırsa çalışır.
Text Entry Normal Text Entry - Normal IsEditing false olduğunda DTextEntry dokusu
Text Entry Focused Text Entry - Focus IsEditing true olduğunda DTextEntry dokusu
Text Entry Disabled Text Entry - Disabled IsEnabled false olduğunda DTextEntry dokusu
Scroller Track V Scrollbar - Vertical DVScrollBar kaydırma çubuğu dokusu
VScrollbar - Normal Scrollbar - Vertical IsHovered false ve IsDown false olduğunda DVScrollBar.btnGrip dokusu
VScrollbar - Hovered Scrollbar - Vertical IsHovered true ve IsDown false olduğunda DVScrollBar.btnGrip dokusu
VScrollbar - Pressed Scrollbar - Vertical IsDown true olduğunda DVScrollBar.btnGrip dokusu
VScrollbar - Disabled Scrollbar - Vertical IsEnabled false olduğunda DVScrollBar.btnGrip dokusu
Tab Panel BG Tabbed - Body GetActiveTab'in yerleştirildiği DPropertySheet dokusu
Tab Top Tabbed - Active IsActive true olduğunda DTab dokusu
Unfcs Top Tabbed - Inactive IsActive false olduğunda DTab dokusu
List Box ListBox - Background DListBox dokusu. Bu sınıf kullanımdan kaldırılmıştır, ancak hala oyunda mevcuttur
Bu liste yalnızca GMod'da kullanılan isimlendirilmiş dokuları içerir! Örneğin, RadioButton burada listelenmemiştir.

İsimlendirilmemiş Dokular

Bu hata sadece 3. katman içindir.
Son yüklenen temanın gölge dokusu kullanılacaktır! Düzeltmek için PaintShadow ve PaintFrame fonksiyonlarındaki SKIN'i self olarak değiştirin.
İsimlendirilmemiş katmanların listesi
1 DProgress ana gövdesinin dokusu
2 DProgress ilerleme gövdesinin dokusu
3 DFrame dış gölgesinin dokusu
4 DTree ve DIconBrowser için seçim dokusu
5 DTooltip dokusu DTooltip, panelin temasını devralmaz. Bu yüzden her zaman "Varsayılan" tema olacaktır. Sadece görünür durumdayken tema ayarlanırsa çalışır.
6 varsayılan, üzerinde ve basılı DSlider topuzunun dokuları
7 Kullanılmıyor. Dikey kaydırıcının dokusu olabilir
8 varsayılan, üzerinde ve basılı DNumberWang dokuları
9 DMenu onay simgesi dokusu DMenu, DermaMenu tarafından çağrıldığında panelin temasını devralmaz. Bu yüzden her zaman "Varsayılan" tema olacaktır. Sadece görünür durumdayken veya DMenuBar içindeyken tema ayarlanırsa çalışır.
10 varsayılan, üzerinde ve basılı DScrollPanel:GetVBar ve DHorizontalDivider dokuları. varsayılan, üzerinde ve basılı DComboBox düğmesi dokuları
11 Seçili DListView_Line dokusu
12 Değiştirilmiş DListView_Line dokusu. Bir satırı diğerinden ayırmak için, DListView tek sayılı satırları otomatik olarak hafif koyu bir renge boyar. Dahili fonksiyon DListView_Line:SetAltLine ile çağrılabilir
13 Kullanılmıyor. DListView_Line için alternatif renklerin dokuları olabilir
14 üzerinde olan DListView_Line dokusu
15 Kullanılmıyor
16 varsayılan DComboBox dokusu
17 üzerinde olan DComboBox dokusu
18 basılı DComboBox dokusu
19 devre dışı DComboBox dokusu
20 Katlanmış DCategoryList ve DCollapsibleCategory dokusu
21 Açılmış DCategoryList ve DCollapsibleCategory dokusu
22 DCategoryList gövdesinin dokusu
23 Kullanılmıyor
24 DFrame.btnClose düğmesinin dokuları
25 DFrame.btnMinim düğmesinin dokuları
26 DFrame.btnMaxim düğmesinin dokuları
27 Kullanılmıyor. DFrame "Geri Yükle" düğmesinin dokuları olabilir

Renk Paleti Dokusu

DermaSkin_Color_Numbered_Table_Updated.png
Renk Paleti Tablosu
1 A Renk Yok / Kullanılmıyor
1 B HasHierarchicalFocus true olduğunda DFrame başlığının rengi
2 A Renk Yok / Kullanılmıyor
2 B HasHierarchicalFocus false olduğunda DFrame başlığının rengi
3 A IsDown true olduğunda DButton metninin rengi
3 B DButton varsayılan metninin rengi
4 A IsEnabled false olduğunda DButton metninin rengi
4 B IsHovered true olduğunda DButton metninin rengi
5 A IsActive true ve IsDown true olduğunda DTab metninin rengi
5 B IsActive true olduğunda DTab varsayılan metninin rengi
6 A IsActive true ve IsEnabled false olduğunda DTab metninin rengi
6 B IsActive true ve IsHovered true olduğunda DTab metninin rengi
7 A IsActive false ve IsDown true olduğunda DTab metninin rengi
7 B IsActive false olduğunda DTab varsayılan metninin rengi
8 A IsActive false ve IsEnabled false olduğunda DTab metninin rengi
8 B IsActive false ve IsHovered true olduğunda DTab metninin rengi
9 A GetDark true olduğunda DLabel ve DListView_Line etiketinin rengi
9 B Varsayılan durumda DLabel ve DListView_Line etiketinin rengi
10 A GetHighlight true olduğunda DLabel ve DListView_Line etiketinin rengi
10 B GetBright true olduğunda DLabel ve DListView_Line etiketinin rengi
11 A IsHovered true olduğunda DTree_Node_Button metninin rengi ve DForm:ControlHelp metninin rengi
11 B DFileBrowser ağaç çizgisinin rengi
12 A IsSelected true olduğunda DTree_Node_Button metninin rengi
12 B Varsayılan durumda DTree_Node_Button metninin rengi
13 A Kullanılmıyor. Colours.Properties.Line_Hover
13 B Kullanılmıyor. Colours.Properties.Line_Normal
14 A DProperties kategori etiketinin rengi
14 B Kullanılmıyor. Colours.Properties.Line_Selected
15 A Kullanılmıyor. Colours.Properties.Column_Hover
15 B Kullanılmıyor. Colours.Properties.Column_Normal
16 A DProperties'de satırlar ve sütunlar arasındaki sınırın rengi
16 B Satır düzenlenirken DProperties hücresinin rengi
17 A Kullanılmıyor. Colours.Properties.Label_Hover
17 B Satır düzenlenmezken DProperties hücre etiketinin rengi
18 A Renk Yok / Kullanılmıyor
18 B Satır düzenlenirken DProperties hücre etiketinin rengi
19 A GetExpanded false olduğunda DCategoryHeader başlığının rengi
19 B Kullanılmıyor. "ModalBackground" olarak adlandırılmış
20 A GetExpanded true olduğunda DCategoryHeader başlığının rengi
20 B Kullanılmıyor. "TooltipText" olarak adlandırılmış (Gerçek ipucu metni 27A kullanır)
21 A Altered değilken ve IsDown true olduğunda DCollapsibleCategory:Add düğme metninin rengi
21 B Altered değilken DCollapsibleCategory:Add düğme metninin rengi
22 A Altered olduğunda DCategoryList:AddItem öğesinin rengi
22 B Altered değilken ve IsHovered true olduğunda DCollapsibleCategory:Add düğme metninin rengi
23 A Altered olduğunda DCollapsibleCategory:Add düğme metninin rengi
23 B Altered ve IsHovered true olduğunda DCategoryList:AddItem öğesinin rengi
24 A Altered ve IsHovered true olduğunda DCollapsibleCategory:Add düğme metninin rengi
24 B Altered ve IsSelected true olduğunda DCategoryList:AddItem öğesinin rengi
25 A IsHovered true olduğunda DCategoryList:AddItem öğesinin rengi
25 B Altered değilken ve IsDown true olduğunda DCollapsibleCategory:Add düğme metninin rengi
26 A IsSelected true olduğunda DCategoryList:AddItem öğesinin rengi
26 B DCategoryList:AddItem öğesinin rengi
27 A DTooltip metninin rengi. Şu anda bozuk.
27 B Renk Yok / Kullanılmıyor

Demo

Bu eğitim için Derma'ya yönelik bir Windows 10 arayüzü teması içeren bir Demo Eklentisi oluşturulmuştur. Buradan indirebilirsiniz: tıklayın.

Eklenti, tüm Derma nesnelerini boyamak için bu kancayı kullanır:

hook.Add("ForceDermaSkin","Windows10SkinForce",function() return "Windows" -- Bu, tüm Derma nesnelerini yeni temayla boyayacaktır end)

Tüm sunucular · GmodTR Launcher · Rehber · GMod Wiki · GmodTR nedir? · Sunucu ekle · Discord