Jump to content

Centrado de rectángulo/imagen DX


Recommended Posts

Buenas. Desde hace mucho tiempo llevo usando mi método para el dibujado de ventanas/imágenes/textos y líneas DX. Quisiera saber si hay alguna forma de centrarlo, ya sea multiplicando o dividiendo por algún número ya que, manual lleva un tiempo y no siempre queda correctamente.

Este es el método que uso:

local sx, sy = guiGetScreenSize( )
local sourceX, sourceY = 1336, 768

dxDrawRectangle( sx*( 20/sourceY ), sy*( 200/sourceY ), sx*( 150/sourceX ), sy*( 200/sourceY ), tocolor( ... ) )

 

Link to comment

 

local screenWidth, screenHeight = guiGetScreenSize( )
width = 400
height = 420


function ctrl_dx()
	dxDrawRectangle( (screenWidth / 2)-(width/2), (screenHeight / 2)-(height/2), width, height, tocolor(57, 57, 57, 255), false)
	dxDrawRectangle( (screenWidth / 2)-(width/2), (screenHeight / 2)-(height/2), width, height, tocolor(254, 254, 254, 254), false)
end
addEventHandler("onClientRender", root, ctrl_dx) 

Yo para centrar un dx uso eso, lo ví en un script hace tiempo y me ha funcionado bien(creo que también sirve para posicionar un dx en cualquier parte de la pantalla).

Edited by Hit+
Link to comment
On 2017-5-2 at 17:32, Hit+ said:

 


local screenWidth, screenHeight = guiGetScreenSize( )
width = 400
height = 420


function ctrl_dx()
	dxDrawRectangle( (screenWidth / 2)-(width/2), (screenHeight / 2)-(height/2), width, height, tocolor(57, 57, 57, 255), false)
	dxDrawRectangle( (screenWidth / 2)-(width/2), (screenHeight / 2)-(height/2), width, height, tocolor(254, 254, 254, 254), false)
end
addEventHandler("onClientRender", root, ctrl_dx) 

Yo para centrar un dx uso eso, lo ví en un script hace tiempo y me ha funcionado bien(creo que también sirve para posicionar un dx en cualquier parte de la pantalla).

Versión adaptable:

local screenWidth, screenHeight = guiGetScreenSize( )
width = 400 / 1336
height = 420 / 768


function ctrl_dx()
	dxDrawRectangle( (screenWidth - ( width * screenWidth ) ) / 2, (screenWidth - ( height * screenHeight ) ) / 2, width * screenWidth, height * screenHeight, tocolor(57, 57, 57, 255), false)
	dxDrawRectangle( (screenWidth - ( width * screenWidth ) ) / 2, (screenWidth - ( height * screenHeight ) ) / 2, width * screenWidth, height * screenHeight, tocolor(254, 254, 254, 255), false)
end
addEventHandler("onClientRender", root, ctrl_dx) 

 

Link to comment

yo nose vosotros pero a mi parecer ese metodo de hacer el diseño en una resolucion y pasarlo a otra... creo que es mucho mejor usando porcentajes...

local sX, sY = guiGetScreenSize( )

function ctrl_dx()
	dxDrawRectangle( (sX * 0.5) - (sX * 0.15), (sY * 0.5) - (sY * 0.2), sX * 0.3, sY * 0.4, tocolor(57, 57, 57, 255), false)
	dxDrawRectangle( (sX * 0.5) - (sX * 0.15), (sY * 0.5) - (sY * 0.2), sX * 0.3, sY * 0.4, tocolor(254, 254, 254, 255), false)
end
addEventHandler("onClientRender", root, ctrl_dx) 

 

También esta la opción de hacer tus diseños sin cambiar el tamaño de ellos manteniendolos eso si al tener menor resolucion la gente pues vera el rectangulo mas grande ya que ocupara una X parte de la pantalla mas que en una resolucion mayor como puede ser 1920x1080

 

local sX, sY = guiGetScreenSize()
local w, h = 350, 400
local x, y = sX * 0.5 - w * 0.5, sY * 0.5 - h * 0.5

function ctrl_dx()
	dxDrawRectangle( x, y, w, h, tocolor(57, 57, 57, 255), false)
end
addEventHandler("onClientRender", root, ctrl_dx)

 

Defino el x y para si quiero dibujar algo dentro lo único que tengo que hacer es x + 10 y + 32 y ya puedo dibujar de una manera mas fácil a lo renderTarget

Así es como mas o menos hago yo en los paneles y pienso que la primera forma es mas adaptable es a lo paginas web. Ya decide tu cual para ti es mejor.

PD: esto no solo va dirigido a centrar ventana si no que también hacerla adaptable a todas las resolución de una forma a mi parecer correcta.

Edited by Arsilex
Link to comment
  • 2 weeks later...

Una solución mejor sería una variable para la escala, no crees?

En ese caso algo como:

local screenX, screenY = guiGetScreenSize()
local screenScale = screenY / 768

Así despues cualquier tamaño o posición lo podrás poner conforme a la escala esa, como ejemplo:

local posX = 512 * screenScale
local posY = 200 * screenScale

Aunque claro es solo una manera muy básica.

Edited by XeroxMTA
Link to comment

Tal vez esto te sirva :)

local x, y = guiGetScreenSize ()

local ini = 0


function ancho()
if x <= 800 then
return 0.3
elseif x <= 1024 then
return 0.45
elseif x <= 1280 then
return 0.4
elseif x <= 1366 then
return 0.45
else
return 0.45
end
end

function alto()
if y <= 600 then
return 0.55
elseif y <= 720 then
return 0.75
elseif y <= 768 then
return 0.8
else
return 0.6
end
end

function possX()
if x <= 800 then
return 0.95
elseif x <= 1024 then
return 1.18
elseif x <= 1280 then
return 1.57
elseif x <= 1360 then
return 1.65
elseif x <= 1366 then
return 1.65
else
return 1.6
end
end

function possY()
if y <= 600 then
return 0.65
elseif y <= 720 then
return 0.75
elseif y <= 768 then
return 0.8
else
return 0.4
end
end

scaleX = ancho()
scaleY = alto()

possX = possX()
possY = possY()

imgX, imgY = 400*scaleX, 200*scaleY

posX, posY = 360*possX, 380*possY

 

Link to comment
On 2017-5-21 at 00:58, Bc# said:

Tal vez esto te sirva :)


local x, y = guiGetScreenSize ()

local ini = 0


function ancho()
if x <= 800 then
return 0.3
elseif x <= 1024 then
return 0.45
elseif x <= 1280 then
return 0.4
elseif x <= 1366 then
return 0.45
else
return 0.45
end
end

function alto()
if y <= 600 then
return 0.55
elseif y <= 720 then
return 0.75
elseif y <= 768 then
return 0.8
else
return 0.6
end
end

function possX()
if x <= 800 then
return 0.95
elseif x <= 1024 then
return 1.18
elseif x <= 1280 then
return 1.57
elseif x <= 1360 then
return 1.65
elseif x <= 1366 then
return 1.65
else
return 1.6
end
end

function possY()
if y <= 600 then
return 0.65
elseif y <= 720 then
return 0.75
elseif y <= 768 then
return 0.8
else
return 0.4
end
end

scaleX = ancho()
scaleY = alto()

possX = possX()
possY = possY()

imgX, imgY = 400*scaleX, 200*scaleY

posX, posY = 360*possX, 380*possY

 

Eso es una solución peor a la que le di xD

En todo caso sería más fácil realizar un math.min & math.max en cuanto a la escala.

Link to comment

Que sea mas larga no implica que sea menos efectiva, de hecho acá se abordan mas casos posibles. Si te das cuenta, las resoluciones muchas veces no son equivalentes. Esto soluciona un poco eso. Concedo que este codigo es un poco viejo, pero si lo pienso, se puede hacer mas ordenado con tablas.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...