Inicio rápido
Crea tu primera interfaz y expórtala como un recurso de MTA:SA en unos minutos.
Te damos la bienvenida a Easelt Builder — un diseñador visual basado en el navegador para GUIs dx de MTA:SA, por Easelt · C4. Este inicio rápido te guía en todo el recorrido, desde un lienzo en blanco hasta un recurso de MTA ejecutable: elegirás una resolución, colocarás tu primer elemento, le darás estilo, conectarás algo de lógica, lo probarás en vivo y exportarás un .zip listo para arrastrar y soltar.
El resumen en 60 segundos
Aquí tienes todo el recorrido de un vistazo. Cada paso a continuación se amplía en su propia sección, pero esta es la forma de un primer proyecto:
- Elige una resoluciónElige tu resolución objetivo (p. ej.
1920x1080) en la barra superior para que las posiciones se mantengan correctas en todas partes. - Añade un elementoHaz clic en una herramienta de la caja de herramientas — prueba
Button— y se coloca en el lienzo. - Dale estiloUsa el inspector para establecer el color de relleno, las esquinas, el texto, el contorno y la sombra.
- OrganizaAñade más elementos y alinéalos con las guías de alineación y la cuadrícula/ajuste.
- Añade lógicaOpcionalmente abre Blueprint y conecta un clic para abrir una ventana, alternar la visibilidad o cambiar el texto.
- PruebaPulsa ▶ Test en Blueprint para probarlo en vivo, luego Esc para detenerlo.
- GuardaPulsa Ctrl S — Easelt también guarda automáticamente mientras trabajas.
- ExportaVe a File → Export MTA resource para obtener un
.zipque puedes arrastrar a tu servidor.
Paso 1 — Elige tu resolución objetivo
Antes de colocar nada, establece la resolución objetivo en la barra superior — por ejemplo 1920x1080. Esto le indica a Easelt Builder para qué pantalla estás diseñando, de modo que la disposición en el lienzo coincida con lo que verá un jugador en esa resolución.
Como Easelt distribuye los elementos de forma responsiva, las posiciones se mantienen correctas también en otras resoluciones — elige la resolución en la que diseñas, y tu GUI se escala limpiamente para todos los demás.
Paso 2 — Añade tu primer elemento
Abre la caja de herramientas y haz clic en una herramienta para añadir su elemento — empieza con Button. El elemento se coloca directamente en el lienzo, listo para posicionarse y darle forma. Cada elemento admite los mismos tres gestos de manipulación directa:
Paso 3 — Dale estilo en el inspector
Con tu elemento seleccionado, el inspector muestra todo lo que puedes estilizar. Recorre cada control para darle a tu Button el aspecto que quieras:
| Control | Qué hace |
|---|---|
| Color de relleno | Establece el color de fondo del elemento usando el selector de color. |
| Esquinas | Redondea las esquinas del elemento a tu gusto. |
| Texto | Edita la etiqueta y su apariencia de texto. |
| Contorno | Añade un borde/trazo alrededor del elemento. |
| Sombra | Proyecta una sombra detrás del elemento para dar profundidad. |
Haz clic en el selector de color junto a Color de relleno para elegir cualquier color — es la forma más rápida de hacer que un elemento coincida con el tema de tu servidor.
Paso 4 — Añade más elementos y organízalos
Las GUIs reales están hechas de varios elementos. Añade más desde la caja de herramientas, luego alinéalos con precisión usando las dos ayudas de posicionamiento de Easelt:
- Guías de alineación — aparecen líneas inteligentes mientras arrastras, de modo que los bordes y centros se ajustan en concordancia con los elementos cercanos.
- Cuadrícula / ajuste — los elementos se ajustan a la cuadrícula para un espaciado ordenado y uniforme sin calcular los píxeles a ojo.
Paso 5 — Añade lógica en Blueprint (opcional)
¿Quieres que tu GUI realmente *haga* algo? Abre Blueprint y conecta el comportamiento visualmente — sin necesidad de Lua. A partir de un solo clic puedes, por ejemplo:
- Abrir una ventana
- Alternar la visibilidad de un elemento
- Cambiar el texto de un elemento
Blueprint es opcional — una disposición puramente visual se exporta y funciona perfectamente sin ninguna lógica conectada.
Paso 6 — Pruébalo en vivo
En Blueprint, pulsa ▶ Test para ejecutar tu GUI en vivo y probar las interacciones que conectaste — haz clic en tu botón, observa cómo se abre la ventana, mira cómo cambia el texto. Pulsa Esc para detener la prueba y volver a la edición.
Paso 7 — Guarda tu trabajo
Pulsa Ctrl S para guardar. Easelt Builder también guarda automáticamente mientras trabajas, por lo que tu proyecto está protegido incluso si lo olvidas — pero guardar manualmente es un buen hábito antes de exportar.
Paso 8 — Exporta tu recurso de MTA
Cuando estés satisfecho, convierte tu diseño en un recurso real. Ve a File → Export MTA resource para descargar un .zip. Ese archivo comprimido es un recurso de MTA:SA completo y listo para usar que contiene:
| Archivo | Qué es |
|---|---|
gui.lua | Tu GUI generada: los elementos que dibujaste y su disposición. |
lib.lua | La biblioteca de apoyo de la que depende el código generado. |
meta.xml | El manifiesto del recurso que le indica a MTA:SA qué cargar. |
| assets | Las imágenes y otros archivos que usa tu diseño. |
Descomprime el .zip en la carpeta de recursos de tu servidor, luego inícialo como cualquier otro recurso de MTA — sin necesidad de edición manual.
Práctico: previsualiza sin la interfaz del editor
En cualquier momento, pulsa P para previsualizar tu diseño — esto oculta la interfaz del editor (caja de herramientas, inspector y paneles) para que veas solo la GUI tal como la vería un jugador. Pulsa P de nuevo para traer de vuelta el editor.
Próximos pasos
Has creado y exportado tu primera GUI — buen trabajo. Dirígete a estas páginas a continuación para profundizar: