Adaptar em varias resoluções

[Jovem_Extreme]

gostaria de adaptar esse painel para toda as resoluções, na minha tela nao fica boa, mais na do meu amigo fica, eu utilizo  1440x900, se alguem puder ajudar ficarei muito grato.

local screenW, screenH = guiGetScreenSize()

local circleScale, sizeStroke = 50, 3
local iconScale = 25
local circleLeft, circleTop = circleScale + 30, screenH - circleScale - 20

addEventHandler('onClientResourceStart', resourceRoot, function()
    createCircle('bgHealth', circleScale, circleScale)
    createCircle('bgArmor', circleScale, circleScale)
    createCircleStroke('health', circleScale, circleScale, sizeStroke)
    createCircleStroke('armor', circleScale, circleScale, sizeStroke)

    hiddenComponents(false)
end)

addEventHandler('onClientResourceStop', resourceRoot, function()
    hiddenComponents(true)
end)

addEventHandler('onClientRender', root, function()
    drawItem('bgHealth', circleLeft, circleTop, tocolor(28, 28, 28, 170))
    drawItem('bgArmor', circleLeft + circleScale + 10, circleTop, tocolor(28, 28, 28, 170))

    drawItem('health', circleLeft, circleTop, tocolor(255, 255, 255))
    dxDrawImage(circleLeft + ((circleScale/2) - (iconScale/2)), circleTop + ((circleScale/2) - (iconScale/2)), iconScale, iconScale, 'assets/health.png')
    
    drawItem('armor', circleLeft + circleScale + 10, circleTop, tocolor(255, 255, 255))
    dxDrawImage((circleLeft + circleScale + 10) + ((circleScale/2) - (iconScale/2)), circleTop + ((circleScale/2) - (iconScale/2)), iconScale, iconScale, 'assets/armor.png')

    setSVGOffset('health', getElementHealth(localPlayer))
    setSVGOffset('armor', getPedArmor(localPlayer))
end)

 

Edited April 5 by Lord Henry
Código convertido de texto para Lua.

[Lord Henry]

Mande uma imagem da sua tela inteira mostrando o painel. Não temos como testar sem as imagens das fontes e sem as funções úteis.

[Lord Henry]

Após analisar seu código, fiz um exemplo parecido com sua ideia.

Independente da resolução, ele vai ter a mesma proporção e distância da borda da tela.

local screen = Vector2 (guiGetScreenSize()) -- local screen.x, screen.y = guiGetScreenSize()
local offset = screen.y * 0.01852 -- Distância relativa da borda da tela. (0 = colado na borda)
--[[
    ~20px = 0.01852
    ~15px = 0.01389
    ~10px = 0.00926
]]
local bgScale, circleScale = (screen.y * 0.04), 0.9 -- Raio dos círculos background relativos à tela | Raio dos círculos em relação aos círculos background.
-- (1 = tamanho Y da tela | 1 = tamanho igual aos círculos de background)
local iconScale = bgScale * 0.5 -- Tamanho relativo dos ícones em relação ao tamanho dos backgrounds. (1 = tamanho igual aos círculos de background)
local circleAngle = 270 -- Ângulo que os backgrounds e os círculos começam a ser preenchidos. (0 = direita, 90 = abaixo, 180 = esquerda, 270 = acima)

addEventHandler("onClientRender", root, function()
    local health = getElementHealth(localPlayer)
    local armor = getPedArmor(localPlayer)

    dxDrawCircle (offset + bgScale, screen.y - bgScale - offset, bgScale, 0, 360, tocolor(28, 28, 28, 170)) -- bg Health
    dxDrawCircle (offset + bgScale, screen.y - bgScale - offset, bgScale * circleScale, 0 + circleAngle, (360 * (health/100)) + circleAngle, tocolor(255, 32, 32)) -- Health
    -- dxDrawImage (ícone da vida)
    
    if armor > 0 then -- Faz com que o círculo de armor só apareça se não estiver em 0.
        dxDrawCircle ((offset + bgScale) + (bgScale * 1.4), screen.y - bgScale - offset, bgScale, 0, 360, tocolor(28, 28, 28, 170)) -- bg Armor
        dxDrawCircle ((offset + bgScale) + (bgScale * 1.4), screen.y - bgScale - offset, bgScale * circleScale, 0 + circleAngle, (360 * (armor/100)) + circleAngle, tocolor(255, 255, 255)) -- Armor
        -- dxDrawImage (ícone do colete)
    end
end)

 

Spoiler