Responsividad y resoluciones
Cómo Easelt mantiene tu GUI ajustada al píxel con MTA:SA en cada pantalla.
En Easelt Builder, la disposición nunca se fija a píxeles — cada posición y tamaño se almacena como una fracción de la pantalla entre 0 y 1, exactamente igual que un código dxDraw bien escrito. Esa única idea es lo que te permite diseñar una GUI una sola vez, a cualquier resolución, y que aterrice correctamente en la pantalla de cada jugador en MTA:SA.
Fracciones, no píxeles
En lugar de recordar que un panel está en 768px, lo describes como *40% a lo ancho* de la pantalla. Una x de 0.40 significa 40% desde el borde izquierdo, una y de 0.30 significa 30% hacia abajo desde la parte superior, y un ancho de 0.20 significa que el elemento ocupa una quinta parte del ancho de la pantalla. Como estas fracciones son relativas, describen la misma disposición sin importar cuán grande sea la pantalla real — que es exactamente cómo un scripter cuidadoso de MTA:SA escribe el código dxDraw a mano.
Las fracciones van de 0 (el borde izquierdo o superior) a 1 (el borde derecho o inferior). Un valor de 0.5 es el centro exacto en ese eje.
Cómo la vista previa convierte fracciones en píxeles
El lienzo de vista previa se renderiza en espacio de píxeles del juego a cualquier resolución que elijas. Para posicionar un elemento, Easelt Builder multiplica cada fracción por las dimensiones del juego — esto es idéntico a la matemática que MTA ejecuta internamente, así que lo que ves es lo que el juego dibuja.
- Posición en píxeles =
fraction * gameWidth(ogameHeightpara el eje vertical). - La escala global
S = gameHeight / 1080escala los grosores de trazo y los tamaños de texto para que las líneas y las etiquetas se mantengan proporcionalmente correctas a cualquier resolución. - Como ambos usan las mismas fórmulas que MTA:SA, la posición en pantalla en el editor equivale a la posición dentro del juego.
La escala S está anclada a una referencia de 1080 píxeles de alto. A 1080p, S = 1; a 4K (2160 de alto), S = 2, por lo que los trazos y el texto duplican su tamaño para adaptarse a la pantalla más densa.
El selector de Resolución
El selector de Resolución se encuentra en la barra superior y controla el tamaño del lienzo de vista previa. Cambiar la resolución cambia las dimensiones del lienzo mientras tus fracciones permanecen constantes — así que cada elemento mantiene la misma posición relativa, y su posición en pantalla sigue equivaliendo a su posición dentro del juego.
Cambiar la resolución nunca mueve tus elementos en términos relativos — solo el lienzo cambia de tamaño. Las fracciones son la fuente de verdad.
Un ejemplo resuelto
Aquí está el mismo elemento — anclado en x = 0.40, y = 0.30 — resuelto en píxeles a dos resoluciones diferentes. Fíjate cómo las fracciones nunca cambian, solo los valores en píxeles que se derivan de ellas.
| Fracción | A 1920×1080 | A 3840×2160 (4K) |
|---|---|---|
| x = 0.40 | 0.40 × 1920 = 768 px | 0.40 × 3840 = 1536 px |
| y = 0.30 | 0.30 × 1080 = 324 px | 0.30 × 2160 = 648 px |
| escala S = gameHeight / 1080 | 1080 / 1080 = 1.0 | 2160 / 1080 = 2.0 |
El elemento se sitúa al 40% a lo ancho y al 30% hacia abajo en ambas pantallas — visualmente idéntico — mientras que los píxeles subyacentes y la escala de texto/trazo crecen con la resolución.
Qué se exporta
Cuando exportas, las coordenadas salen en la misma forma de fracción con la que diseñaste, multiplicadas por el tamaño de pantalla en vivo. Así que un elemento en x = 0.40, y = 0.30 se emite como:
local sx, sy = guiGetScreenSize()
dxDrawRectangle(0.40 * sx, 0.30 * sy, --[[ width, height, ... ]] )El script exportado lee el tamaño real de la pantalla con guiGetScreenSize() y mantiene tus fracciones intactas, así que el código generado se lee como el dxDraw escrito a mano que tú mismo escribirías.
Adaptación en tiempo de ejecución
Los jugadores pueden cambiar su resolución dentro del juego mientras tu recurso se está ejecutando. Para manejar eso, el script exportado también escucha `onClientRestore` y recalcula sx, sy y la escala global cada vez que la pantalla se restaura — así que la GUI se vuelve a disponer y se mantiene correcta incluso si la resolución cambia sobre la marcha.
Como las fracciones son fijas y sx, sy y S se recalculan en onClientRestore, nunca tienes que distribuir disposiciones separadas para resoluciones separadas.
La conclusión
Diseña una vez a cualquier resolución, correcto en todas. Almacena la disposición como fracciones, deja que la vista previa las resuelva en píxeles del juego con la propia matemática de MTA, elige la resolución que quieras para diseñar, y exporta código que se recalcula a sí mismo en tiempo de ejecución. Tu GUI luce igual para cada jugador, sin importar su pantalla.