Easelt BuilderDocs
Feedback
Abrir Easelt Builder →
Primeros pasos

La interfaz

Un recorrido completo por la barra de menús, la caja de herramientas, el lienzo, el inspector y el panel de capas.

Easelt Builder te ofrece un espacio de trabajo visual completo para diseñar GUIs dx de MTA:SA en tu navegador. Esta página es un recorrido completo por cada región de la interfaz: la barra de menús superior, la caja de herramientas, el lienzo, el inspector, el panel de capas, la barra de estado y el modo vista previa, para que sepas exactamente dónde vive cada control y qué hace.

La disposición de un vistazo

El espacio de trabajo está organizado en una barra de menús a lo largo de la parte superior, tres paneles de trabajo alrededor de un escenario central y una barra de estado en la parte inferior. Cada panel se puede contraer y redimensionar: arrastra el borde de un panel para dar más espacio a lo que sea que estés trabajando.

Barra de menús superior
La marca Easelt Builder a la izquierda, los menús File / Edit / View, y un grupo de controles de resolución, deshacer/rehacer, paneles y exportación a la derecha.
Caja de herramientas (izquierda)
Una lista de herramientas de elementos, con búsqueda y agrupada por categorías. Haz clic en una herramienta para añadir ese elemento al lienzo.
Lienzo / Escenario (centro)
La superficie de diseño en la resolución que elijas, con zoom, desplazamiento, guías de alineación y una superposición de medición.
Inspector (derecha)
Controles para el elemento seleccionado, o los ajustes del fondo de la GUI cuando no hay nada seleccionado.
Panel de capas
Una pila conmutable de miniaturas que puedes reordenar, agrupar en carpetas y gestionar con clic derecho.
Barra de estado (inferior)
Muestra el estado actual y sugerencias contextuales mientras trabajas.

Barra de menús superior

La marca `Easelt Builder` se sitúa en el extremo izquierdo de la barra superior. Junto a ella hay tres menús desplegables (File, Edit y View), y el lado derecho de la barra lleva botones de acceso rápido para resolución, historial, paneles y exportación.

Menú File

ElementoQué hace
New designComienza un diseño nuevo y vacío.
Designs…Gestiona varias variantes de diseño en un solo lugar.
Save (Ctrl S)Guarda el diseño actual.
LoadAbre un diseño guardado anteriormente.
Export MTA resource…Exporta tu diseño como un recurso de MTA .zip listo para usar.
Export design as PNG…Exporta una imagen PNG plana del diseño.

Menú Edit

ElementoQué hace
Undo (Ctrl Z)Retrocede a través de tu historial.
Redo (Ctrl Y)Avanza de nuevo a través de tu historial.
Duplicate (Ctrl D)Crea una copia del elemento o elementos seleccionados.
Copy (Ctrl C)Copia la selección al portapapeles.
Paste (Ctrl V)Pega desde el portapapeles al lienzo.
Delete (Del)Elimina el elemento o elementos seleccionados.
Select all (Ctrl A)Selecciona todos los elementos del lienzo.
Clear canvasElimina todo y comienza desde un escenario en blanco.

Menú View

ElementoQué hace
Grid (G)Alterna la cuadrícula de alineación en el lienzo.
Snap (S)Alterna el ajuste para que los elementos se alineen con la cuadrícula y entre sí.
Measure (M)Alterna la superposición de medición que muestra tamaños y espacios.
Toolbox panelMuestra u oculta el panel de la caja de herramientas de la izquierda.
Inspector panelMuestra u oculta el panel del inspector de la derecha.
Preview / hide chrome (P)Entra en el modo vista previa para ocultar toda la interfaz del editor.

Lado derecho de la barra superior

Selector de resolución
Elige la resolución de pantalla a la que apunta tu diseño. El lienzo se redimensiona para coincidir.
Botones de icono Undo / Redo
Controles rápidos de historial, que reflejan Ctrl Z y Ctrl Y.
Botón de capas
Alterna el panel de capas para abrirlo o cerrarlo.
Botón Blueprint
Abre la vista Blueprint.
Botón Docs
Salta a la documentación.
Botón Export
La acción de exportación principal, siempre al alcance.

Caja de herramientas

La caja de herramientas a la izquierda es una lista de herramientas de elementos con búsqueda, agrupadas por categoría. Escribe en el cuadro de búsqueda para filtrar herramientas por nombre, grupo o tipo, luego haz clic en una herramienta para añadir ese elemento al lienzo.

💡

Como la búsqueda coincide con nombre, grupo y tipo, puedes ir directamente a una herramienta escribiendo una palabra de categoría aunque no recuerdes el nombre exacto del elemento.

Lienzo / Escenario

El lienzo en el centro es tu superficie de diseño, renderizada a la resolución que hayas elegido en el selector de resolución. Es donde colocas, mueves y ajustas el tamaño de cada elemento, y te da retroalimentación en vivo mientras trabajas.

  • Haz zoom con Ctrl+scroll, o Ctrl +, Ctrl - y Ctrl 0 para restablecer.
  • Desplázate manteniendo pulsado Space y arrastrando, o arrastrando con el botón central del ratón.
  • Guías de alineación moradas aparecen mientras arrastras, ayudándote a alinear los elementos.
  • Una superposición de medición muestra los tamaños de los elementos y los espacios respecto a los elementos vecinos y a los bordes del lienzo.

Inspector

El inspector a la derecha contiene los controles de lo que tengas seleccionado. Cuando no hay nada seleccionado, cambia para mostrar los ajustes del fondo de la GUI para el diseño en su conjunto, de modo que siempre está haciendo un trabajo útil, haya o no un elemento activo.

Panel de capas

Alterna el panel de capas con el botón de capas. Enumera tus elementos como miniaturas que puedes arrastrar para reordenar, organizar en carpetas de grupo y gestionar mediante un menú de clic derecho.

Barra de estado

La barra de estado recorre la parte inferior del espacio de trabajo. Refleja el estado actual y muestra sugerencias contextuales mientras interactúas con el lienzo y los paneles.

Modo vista previa

Pulsa P para entrar en el modo vista previa, que oculta toda la interfaz del editor para que veas solo tu diseño exactamente como aparecerá. Pulsa P de nuevo o Esc para salir.

ℹ️

El modo vista previa es solo una ocultación de interfaz para visualización: pulsa P o Esc en cualquier momento para volver al editor completo.

Los paneles son flexibles

Cada panel se puede contraer y redimensionar: arrastra el borde de un panel para redimensionarlo, o usa el menú View y los botones de la barra superior para alternar por completo los paneles de la caja de herramientas, el inspector y las capas. Adapta la disposición a la tarea que tengas delante.

Atajos de teclado

CtrlS
Guardar el diseño actual
CtrlZ
Deshacer
CtrlY
Rehacer
CtrlD
Duplicar la selección
CtrlC
Copiar la selección
CtrlV
Pegar
Del
Eliminar la selección
CtrlA
Seleccionar todo
G
Alternar la cuadrícula
S
Alternar el ajuste
M
Alternar la superposición de medición
P
Entrar / salir del modo vista previa
Esc
Salir del modo vista previa
Ctrl+
Acercar zoom
Ctrl-
Alejar zoom
Ctrl0
Restablecer zoom
SpaceDrag
Desplazar el lienzo
Got feedback or an idea?Share it →