Scaling System

Make your UI responsive across all screen resolutions.

cLib.Scale

Scales a pixel value based on current screen resolution, using 1920x1080 as the base.

local scaled = cLib.Scale(value)

Formula:

scale = min(ScrW() / 1920, ScrH() / 1080)
result = value * scale

Usage Examples

Panel Sizing

local frame = vgui.Create("cLib.DFrame")
frame:SetSize(cLib.Scale(600), cLib.Scale(400))
frame:Center()

Margins & Padding

panel:DockMargin(
    cLib.Scale(10),  -- left
    cLib.Scale(10),  -- top
    cLib.Scale(10),  -- right
    cLib.Scale(10)   -- bottom
)

panel:DockPadding(
    cLib.Scale(15),
    cLib.Scale(15),
    cLib.Scale(15),
    cLib.Scale(15)
)

Drawing

function PANEL:Paint(w, h)
    local padding = cLib.Scale(10)
    local iconSize = cLib.Scale(24)
    local borderRadius = cLib.Scale(6)
    
    draw.RoundedBox(borderRadius, padding, padding, w - padding*2, h - padding*2, color)
    
    surface.SetMaterial(icon)
    surface.DrawTexturedRect(padding, padding, iconSize, iconSize)
end

Resolution Reference

Best Practices

-- ✅ Good - scales properly
panel:SetSize(cLib.Scale(400), cLib.Scale(300))
panel:SetPos(cLib.Scale(50), cLib.Scale(50))

-- ❌ Bad - fixed pixels don't scale
panel:SetSize(400, 300)
panel:SetPos(50, 50)