Uso de guiGetScreenSize para ajustar elementos da tela

[DNL291]

Neste tutorial, vou abordar sobre o uso da função guiGetScreenSize.

E também aplicando-a com uma matemática simples para que os elementos da GUI (Interface Gráfica do Usuário) e DX possam caber na tela em todas as resoluções.

Obtendo o tamanho da tela

Esta função irá retornar dois valores que são float, estes dois contém a largura e altura da tela, respectivamente.

Você pode verificar se a sua resolução está baixa ou não, com a largura e altura da tela que serão retornadas pela função. Por exemplo, se a largura for inferior a 640 e a altura inferior a 480, isso quer dizer que sua resolução está baixa.

Você pode fazer o mesmo, se quiser verificar se a resolução da tela está maior ou menor do que você deseja.

Ajustando elementos GUI e DX em todas resoluções com guiGetScreenSize()

Valores relativos e absolutos

Para ajustar um elemento GUI ou DX em todas as resoluções (gui neste caso), primeiramente, você deve saber se os valores dele são absolutos ou relativos, isso se aplica para um elemento gui.

Isso significa que se for colocado true no argumento relative, os tamanhos e posições serão relativos, e portanto, os valores X, Y, largura e altura devem estar entre 0 e 1 num tipo de valor que é float.

Ex: 0.555 ou 0.525 ou 0.5 ou 0.095 - Valor relativo.

Desta forma, 0.5 representa o ponto do centro da tela, isto corresponde a 50% entre um canto e outro canto da tela.

Isto se aplica tanto para os argumento X e Y, quanto para a largura e altura. Por exemplo, se o argumento width (largura), tiver um valor de 0.5, o element gui terá um tamanho da metade da largura da tela.

Se for colocado false no argumento relative, isso significa que os tamanhos e posições serão absolutos.

Os valores absolutos são calculados como o número total de pixels do canto superior esquerdo de seu elemento pai, se nenhum elemento pai for especificado, o pai neste caso é a própria tela.

Numa resolução de tela de 1280x800 (1280 é a largura e 800 a altura), uma posição X de 640 representará o ponto central da tela. Assim como X sendo um valor de 320 (1/4 de 1280), representará 25% entre o canto esquerdo da tela e o ponto inicial do elemento GUI (ou outro).

Você pode optar pelo uso de valores relativos e absolutos, colocando true ou false no argumento relative. Obviamente, colocando true estará usando valores relativos, e false valores absolutos.

Você pode converter valores absolutos para relativos com esta função:

-- Feito por laserlaser 
function AbsoluteToRelative( X, Y ) 
    local rX, rY = guiGetScreenSize() 
    local x = X/rX 
    local y = Y/rY 
    return x, y 
end 

E se quiser converter relativos para absolutos:

function RelativeToAbsolute( X, Y ) 
    local rX, rY = guiGetScreenSize() 
    local x = X * rX 
    local y = Y * rY 
    return x, y 
end 

Criando uma janela simples

Neste exemplo, será escrito um código que criará uma janela na gui, numa resolução de 1280x800 usando posições absolutas, sem ajustá-la com a função guiGetScreenSize.

addEventHandler("onClientResourceStart", resourceRoot, 
    function() 
        myWindow = guiCreateWindow(452, 212, 376, 375, "Janela Não ajustada para todas resoluções", false) 
    end 
) 

Ajustando a janela para caber em todas as resoluções

Primeiramente, vamos criar duas variáveis que irão retornar os valores da função guiGetScreenSize.

local sWidth, sHeight = guiGetScreenSize() 

sWidth = Largura da tela

sHeight = Altura da tela

Em seguida, iremos pegar o valor de X que é 452, e dividir por sWidth. O resultado será: 0.353.

Assim como o X, vamos dividir o Y, mas agora pela variável sHeight. Sendo assim, ficará 212 dividido por sHeight. O resultado será: 0.265.

A mesma coisa será feita com os valores width (largura) e height (altura).

Eles serão divididos por sWidth e sHeight, respectivamente.

Portanto, firará assim:

376 dividido por sWidth: 0.293.

375 dividido por sHeight: 0.468.

Depois disso, vamos pegar as variáveis da função guiGetScreenSize (sWidth e sHeight) e os resultados dados pela divisão entre os valores e o tamanho da tela, e multiplicá-los.

Iremos aplicar isso no código anterior, alterando-o para ajustar em todas as resoluções.

Portanto, o código ficará assim:

addEventHandler("onClientResourceStart", resourceRoot, 
    function() 
        local sWidth, sHeight = guiGetScreenSize() 
        myWindow = guiCreateWindow(sWidth*0.353, sHeight*0.265, sWidth*0.293, sHeight*0.468, "Janela ajustada para todas resoluções", false) 
    end 
) 

Note que o terceiro e o quarto argumento também estão sendo ajustados para todas as resoluções. Neste caso, o tamanho da janela também será ajustado conforme a sua resolução.

Feito tudo isso, sua janela já estará ajustada em todas as resoluções. Você também pode fazer isso com texto e retângulo DX e elementos da GUI.

Além de usar a função guiGetScreenSize para verificar sua resolução, você pode ajustar qualquer coisa que esteja precisando (de ajustar) para todas as resoluções.

Obs: Você pode ignorar os argumentos width e height se quiser manter o tamanho original do elemento da interface. Além disso, os elementos filhos de um elemento GUI, podem não ficarem visíveis se não tiverem a largura e altura adaptada junto à janela.

Edited December 22, 2013 by Guest

[[M]ister]

Obrigado me ajudou muito, os meus guis ficavam mal posicionados na tela

[manawydan]

bom tutorial dnl291!

[JuniorMelo]

Muito bom cara ...

esse guiGetScreenSize já vem me dando trabalho por muito tempo

AGORA SEI COMO FUNCIONA !!

Vlw