Easelt BuilderDocs
Feedback
Abrir Easelt Builder →
Diseño

Elementos

Cada tipo de elemento que puedes colocar en el lienzo, para qué sirve y cómo se comporta.

Todo lo que colocas en el lienzo en Easelt Builder es un *elemento*. Esta página es el catálogo completo de cada tipo de elemento que puedes agregar — formas decorativas, texto, imágenes, widgets interactivos y contenedores — además de las reglas que todos comparten. Cada elemento se dibuja con las funciones dx de MTA:SA, así que lo que ves en el builder es exactamente lo que tus jugadores ven en el juego (WYSIWYG honesto).

Cómo se comporta cada elemento

Antes del catálogo, aquí están las reglas que aplican a *cada* elemento, sin importar su tipo. Estas se cumplen ya sea que hayas soltado un rectangle, un button o un group en el lienzo.

  • La posición y el tamaño se almacenan como fracciones de pantalla — nunca píxeles fijos. Esto es lo que mantiene tu GUI responsiva, de modo que un diseño creado en una resolución se ubique correctamente en otra.
  • Selecciona para dar estilo, arrastra para mover, usa los manejadores para redimensionar. Haz clic en un elemento para seleccionarlo y abrir sus propiedades en el inspector, arrastra su cuerpo para reposicionarlo y tira de sus manejadores de esquina/borde para redimensionarlo.
  • Manejador de rotación donde esté disponible. Los elementos que admiten rotación exponen un manejador de rotación dedicado para que puedas girar la caja del elemento.
  • La opacidad es por elemento. Cada elemento lleva su propia opacidad, así que puedes atenuar cualquier ítem individual de forma independiente del resto.
  • Cualquier elemento puede convertirse en una ventana/panel Blueprint. Activa la opción Blueprint en el inspector para promover cualquier elemento a una ventana o panel que enmarque tu diseño.
ℹ️

El texto siempre se dibuja en posición vertical. dxDrawText de MTA no tiene rotación, así que rotar un text o un button rota la *caja* — las letras permanecen horizontales. Easelt Builder muestra esto de forma honesta en lugar de fingir una inclinación que el juego no puede renderizar.

Formas

Las formas son decoración no interactiva — los paneles, divisores, insignias y acentos que le dan estructura a una GUI. No responden a clics en el juego; están ahí para ser vistas. Cada fila a continuación es un tipo de forma que puedes agregar.

FormaQué dibujaOpciones destacadas
rectangleUn rectángulo simple y plano.Color de relleno, opacidad.
roundedrectUn rectángulo con esquinas redondeadas.Redondeo de esquinas, color de relleno.
circleUn círculo relleno.Color de relleno, radio mediante el tamaño.
ellipseUna elipse rellena (un círculo estirado).Color de relleno, ancho/alto.
ringUn círculo hueco — un anillo (dona).Grosor del anillo, color de relleno.
pieUn sector circular / porción de un círculo.Ángulo inicial y ángulo final.
polygonUn polígono regular de N lados.Número de lados ajustable.
starUna forma de estrella.Cantidad de puntas y ratio interior ajustables.
triangleUn triángulo de tres lados.Color de relleno, tamaño.
gradientrectUn rectángulo relleno con un degradado de color.Colores del degradado.
lineUn solo segmento recto.Rotable; estilo sólido/discontinuo/punteado con espaciado de guiones/puntos ajustable.
💡

Usa line para divisores y acentos — es la única forma diseñada para rotarse libremente, y sus estilos discontinuo/punteado con espaciado ajustable la hacen flexible para separadores y marcos.

Texto

Hay un elemento de texto, y es el caballo de batalla de cada etiqueta, encabezado y leyenda en tu GUI.

text
Una etiqueta. Escribe cualquier cadena que quieras, incluido árabe. Recuerda que siempre se renderiza en posición vertical — rotarlo gira la caja delimitadora, no las letras.

Imágenes

Dos tipos de elementos incorporan arte a tu GUI — uno para tus propias imágenes, otro para glifos vectoriales nítidos.

image
Muestra una imagen importada. Suelta tu propio arte y colócalo en cualquier parte del lienzo.
icon
Un glifo vectorial extraído de un conjunto de iconos integrado estilo Feather — nítido a cualquier tamaño, perfecto para botones y etiquetas.

Widgets interactivos

Los widgets son los elementos que *responden a clics en el juego*. Estos son tus botones, campos, interruptores y medidores — las partes de la GUI que los jugadores realmente operan. Cada fila a continuación es un tipo de widget.

WidgetQué esOpciones destacadas
buttonUn botón en el que se puede hacer clic.Texto de la etiqueta, estilo, opacidad.
editboxUna apariencia de campo de texto para entrada.Estilo del campo y apariencia del texto de marcador de posición.
checkboxUna casilla de encendido/apagado con una etiqueta.La casilla puede ubicarse a la izquierda o a la derecha de la etiqueta.
switchUn interruptor de encendido/apagado.Estado del interruptor y estilo.
dropdownUna lista de selección.La lista de opciones para elegir.
progressbarUna barra de llenado que muestra el progreso.Posición de la etiqueta: dentro, izquierda, derecha, arriba, abajo o ninguna.
volumeUn deslizador / medidor.Modo de llenado o modo centrado; etiquetas izquierda y derecha.
ℹ️

Como un button contiene texto, aplica la misma regla del texto en posición vertical: rótalo y la caja gira mientras la leyenda permanece horizontal — exactamente como será en MTA:SA.

Contenedor

Un tipo de elemento contiene a otros, permitiéndote construir paneles estructurados y movibles.

group
Un contenedor que aloja otros elementos. Promuévelo a una ventana o panel Blueprint para enmarcar toda una sección de tu GUI, luego mueve el grupo para reposicionar todo lo que hay dentro de una sola vez.

Ventanas y paneles Blueprint

"Blueprint" no es un elemento aparte — es un modo que puedes activar para *cualquier* elemento en el inspector. Activarlo hace que ese elemento actúe como una ventana o panel que enmarca tu diseño. Un group es la elección natural para esto, ya que además lleva sus elementos hijos, pero la opción está disponible en todas partes.


Ese es el catálogo completo de elementos. Agrega cualquiera de estos desde el lienzo, luego selecciona para dar estilo, arrastra para mover y tira de los manejadores para redimensionar — usando el manejador de rotación donde se ofrezca — y ajusta la opacidad y la configuración Blueprint de cada elemento en el inspector.

Got feedback or an idea?Share it →