> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-es/scene-editor/construir/ui-editor.md).
# Editor de UI
Diseña visualmente la UI en pantalla de tu escena en Creator Hub, sobre un Canvas en lugar de en código.
El Editor de UI te permite crear la interfaz en pantalla de tu escena arrastrando widgets a un canvas, en lugar de escribir el código de diseño a mano. Escribe archivos reales en tu escena, así que todo lo que crees aquí es UI normal de SDK7 que puedes seguir editando en código.
## Ábrelo
Usa el **2D** / **3D** interruptor en la parte superior del panel izquierdo del editor. **3D** es el canvas de la escena que ya conoces. **2D** es el Editor de UI.
{% hint style="warning" %}
**📔 Nota**: El Editor de UI necesita `@dcl/sdk` la versión 7.26.0 o más reciente en tu escena. En una escena anterior, la **2D** pestaña muestra un **Editor de UI no disponible** aviso en lugar del canvas, con un **Actualizar SDK** botón que actualiza la escena por ti y un **Quizá más tarde** botón para descartarlo.
{% endhint %}
El Creator Hub recuerda si dejaste una escena en 2D o 3D y la vuelve a abrir de la misma manera. Esto se guarda por proyecto y nunca se publica con tu escena.
Si estás usando el renderizador de escenas de Bevy, cambiar a **2D** pausa la escena en ejecución, y volver a **3D** la reanuda si estaba en ejecución antes.
## Crea tu primera UI
1. Cambia a la **2D** pestaña.
2. Haz clic en **Nueva GUI**, ya sea el botón del centro del canvas vacío o el **+** junto a **GUIs** en el panel izquierdo. Una GUI es un componente de UI, almacenado en su propio archivo.
3. Arrastra un widget de la paleta de la parte inferior al canvas. **Pantalla completa** es un buen primer widget; te da una raíz que cubre la pantalla. Luego suelta otros widgets dentro.
4. Selecciona un widget y configura sus propiedades en el panel derecho.
No hay botón de guardar. El editor escribe tus cambios en disco a medida que avanzas, y la insignia a la izquierda de la barra de herramientas dice **Todos los cambios guardados**.
## Los paneles
* **Izquierda**: **GUIs**, la lista de tus componentes de UI, y **Nodes**, el árbol de la seleccionada. Un cuadro de búsqueda filtra ambos. Pasa el cursor por encima de un nodo para bloquearlo, ocultarlo o eliminarlo.
* **Derecha**: una **Properties** pestaña del nodo seleccionado, y una **Lógica** pestaña.
* **Inferior**: la paleta de widgets. Arrastra una tarjeta al canvas para añadirla.
* **Centro**: el canvas. Arrastra nodos para moverlos, usa los tiradores para redimensionarlos y desplázate libremente con la rueda del mouse o arrastrando.
Dos grupos flotantes de controles se sitúan en la esquina inferior derecha del canvas:
* El **vista previa** grupo alterna las guías de HUD móvil y las guías de área segura, y cambia entre **Vista de escritorio** y **Vista móvil**.
* El **zoom** grupo tiene un botón de menos y uno de más, y un campo de porcentaje. Haz clic en el porcentaje para escribir un nivel de zoom exacto entre 10 y 200, luego pulsa Enter o haz clic fuera para aplicarlo, o Escape para cancelarlo. El botón de más se desactiva cuando llegas al 200%.
## Widgets
La paleta agrupa los widgets en tres categorías:
* **Contenedores**: **Pantalla completa**, **Contenedor**, **Imagen**
* **Texto**: **Etiqueta**, **Button**
* **Entrada**: **Entrada**, **Desplegable**
**Pantalla completa** es un contenedor que llena aquello en lo que se coloca, lo que lo convierte en un buen punto de partida para una UI que debería cubrir la pantalla.
## Mover y redimensionar
La barra de herramientas tiene tres modos de herramienta:
* **Libre**: mover y redimensionar, el modo de propósito general.
* **Mover**: solo arrastrar.
* **Redimensionar**: solo tiradores.
Las posiciones se ajustan a una cuadrícula de 10 píxeles. Mantén pulsado **Shift** mientras arrastras para mover libremente, ignorando la cuadrícula. La pequeña flecha junto a los botones de herramienta abre un **Snap** casilla de verificación que desactiva por completo el ajuste.
## Diseño: flujo y posicionamiento libre
Dos propiedades separadas deciden dónde termina un nodo. Tener esto claro ahorra mucha confusión.
**El flujo** se establece en un **contenedor** y decide cómo organiza a sus hijos:
* **Libre**: los hijos se quedan donde los pongas.
* **Fila** / **Fila inversa**: los hijos se distribuyen de izquierda a derecha, o de derecha a izquierda.
* **Columna** / **Columna inversa**: los hijos se apilan de arriba abajo, o de abajo arriba.
* **Ajustar hijos**: permite que los hijos se desborden a más de una línea cuando no caben.
**Ignorar el flujo del layout** se establece en un **hijo** y decide si ese nodo opta por no seguir la organización de su padre. Desactivado, el padre lo posiciona. Activado, lo fijas tú mismo con los valores Anchor y Position.
De esto se derivan dos consecuencias:
* Suelta un widget en un **Libre** contenedor y se queda exactamente donde lo soltaste.
* Súeltalo en un contenedor con una dirección y se une al flujo, ocupando su lugar en la línea.
Cambiar un contenedor a **Libre** fija sus hijos existentes donde están en ese momento, así que no salta nada.
La raíz de una GUI siempre se posiciona libremente.
## Otras propiedades que vale la pena conocer
* **Opacidad**: 100% es totalmente opaco, 0% totalmente transparente. El valor predeterminado es 100%.
* **Inset de escena**: qué parte de la pantalla ocupa la GUI.
* **Pantalla completa** usa toda la pantalla renderizable.
* **Área segura interactuable** se mantiene alejada de la propia interfaz del cliente, como el chat, el minimapa y los indicadores del HUD.
* **Área segura del dispositivo** también evita obstrucciones físicas como una muesca o las barras del sistema. Esta opción se ofrece cuando el canvas está en vista previa móvil.
En el código que escribe el editor, estas tres opciones se convierten en `screenInset: 'none'`, `'interactable'` y `'device'`. Ver [Área de inset de pantalla](/creator/content-creator-es/scenes-sdk7/ui-2d/onscreen-ui.md#screen-inset-area).
Si le das a la raíz de una GUI un ancho y un alto en píxeles fijos, el canvas la enmarca como un artboard de exactamente ese tamaño en lugar de como una pantalla.
## Comprueba tu UI en un teléfono
Los controles de la esquina inferior derecha del canvas cambian la vista previa entre una pantalla de escritorio y un teléfono. En la vista previa móvil el canvas se dibuja dentro de un marco de teléfono, con muesca incluida, para que puedas ver dónde caen realmente los bordes de la pantalla.
Dos conjuntos de guías te ayudan a colocar las cosas donde los jugadores puedan verlas y alcanzarlas:
* **Guías de área segura** delimitan la parte de la pantalla a la que está restringida tu GUI, coincidiendo con la **Inset de escena** que elegiste. Mientras el Scene Inset sea **Área segura del dispositivo** o **Área segura interactuable** el contorno está siempre activado, porque es a lo que se recorta la GUI. Pon el Scene Inset en **Pantalla completa** y podrás activar o desactivar el contorno con el botón del icono de marco.
* **Guías del HUD** dibujan los propios controles del cliente móvil, como el joystick, los botones de salto y acción, la rueda de emotes, el perfil, el chat y la brújula. Son solo una referencia, no puedes seleccionarlos ni moverlos. El botón del mando de juego los activa y desactiva, solo aparece en vista previa móvil, y las guías se muestran por defecto cuando el Scene Inset es un área segura.
El contenido colocado fuera del área segura no se oculta, se dibuja más allá del contorno. Ese desbordamiento es la advertencia: en el cliente real quedaría debajo del propio HUD del juego.
**Área segura interactuable** limpia la columna izquierda de controles del cliente móvil, pero comparte su borde derecho con el área del dispositivo, así que los botones de acción en la esquina inferior derecha se dibujan encima por diseño. Mantén libres esas esquinas. Ver [Dónde viven los controles del cliente](/creator/content-creator-es/desarrollar-para-movil/desarrollar/safe-area.md#where-the-client-controls-live).
{% hint style="warning" %}
**📔 Nota**: estas guías son solo una aproximación para el editor. Las áreas reales las informa el cliente en tiempo de ejecución y varían según el dispositivo, así que compruébalo siempre en un teléfono real. Ver [Vista previa en móvil](/creator/content-creator-es/desarrollar-para-movil/desarrollar/preview-on-mobile.md).
{% endhint %}
## Personalizar los controles móviles
En el cliente móvil, los jugadores se mueven y actúan mediante un conjunto de controles nativos en pantalla: un joystick, una mira y una fila de botones de acción. La **MobileHUD** entrada te permite reconfigurar ese HUD sin escribir código, y muestra el resultado en el canvas a medida que avanzas.
Una vez que tu escena tiene al menos una GUI, **MobileHUD** aparece como la primera fila de la lista de **GUIs** , por encima de tus propias GUIs. Selecciónalo para abrir su panel a la derecha.
Tres casillas de verificación en la parte superior ocultan partes enteras del HUD:
* **Ocultar Joystick**: elimina la palanca de movimiento.
* **Ocultar Crosshair**: elimina la retícula de apuntado.
* **Ocultar acciones de entrada**: elimina todos los botones de acción a la vez.
Debajo de ellos, la **Acciones de entrada** sección enumera los ocho botones, en el orden en que ocupan los espacios en pantalla:
| Acción | Botón en pantalla |
| ------------------------------------- | ------------------------------------ |
| `IA_JUMP` | El botón central grande, por defecto |
| `IA_POINTER` | El botón de interacción |
| `IA_PRIMARY (E)` | El botón E |
| `IA_SECONDARY (F)` | El botón F |
| `IA_ACTION_3 (1)` a `IA_ACTION_6 (4)` | Los botones numerados |
Cada fila te ofrece tres cosas:
* **Principal**: un botón de opción que convierte esta acción en el botón central grande. `IA_JUMP` es Principal por defecto, y solo una acción puede ser Principal a la vez.
* Un **icono de ojo** que muestra u oculta ese botón. Cuando ocultas uno, los botones inferiores suben para llenar el hueco.
* **Icono personalizado**: reemplaza el glifo del botón por una `.png`, `.jpg` o `.jpeg` imagen de tu escena.
Por defecto no se oculta nada y `IA_JUMP` es el botón principal, que es exactamente lo que reciben los jugadores en una escena que no toca el HUD.
{% hint style="info" %}
**💡 Consejo**: los botones numerados normalmente se sitúan detrás de un conmutador de desbordamiento "+". Oculta suficientes de los botones superiores y aparecerán directamente. Ver [Controles en pantalla](/creator/content-creator-es/scenes-sdk7/interactividad/touch-screen-controls.md#how-the-button-layout-works) para saber cómo se llenan los espacios.
{% endhint %}
### El archivo que escribe
Tus cambios se escriben en `src/mobile-hud.ts`, que exporta una `setupMobileHud()` función basada en el [`TouchScreenControls`](/creator/content-creator-es/scenes-sdk7/interactividad/touch-screen-controls.md) del SDK:
```ts
import { engine, InputAction, TouchScreenControls } from '@dcl/sdk/ecs'
export function setupMobileHud() {
TouchScreenControls.createOrReplace(engine.RootEntity, {
hideJoystick: true,
hideCrosshair: false,
mainAction: InputAction.IA_PRIMARY,
touchInputs: [
{ inputAction: InputAction.IA_ACTION_3, hide: true },
],
})
}
```
El editor también añade la importación y la llamada a tu `src/index.ts`:
```ts
import { setupMobileHud } from './mobile-hud'
setupMobileHud()
```
El archivo solo existe mientras tenga algo que decir. Si vuelves a poner todo en su valor predeterminado, o borras tu última GUI, el Creator Hub elimina `src/mobile-hud.ts` y quita esas dos líneas otra vez.
{% hint style="warning" %}
**📔 Nota**: Mientras **MobileHUD** está seleccionada, la paleta de widgets se desactiva y los controles de vista previa se ocultan, ya que no hay nada que colocar y el HUD es solo móvil. Selecciona una de tus propias GUIs para recuperarlos.
{% endhint %}
## Dónde van los archivos
El Editor de UI edita los archivos fuente reales de tu escena. No existe un formato guardado aparte.
* Cada GUI es un `.tsx` archivo bajo `src/ui/`.
* `src/ui/index.tsx` es generado por el editor para reunirlos. No lo edites a mano.
* `src/mobile-hud.ts` almacena tus [controles móviles](#customize-the-mobile-controls), si cambiaste alguno. Se sitúa fuera de `src/ui/` a propósito, para que nunca se trate como una GUI.
Si tu escena tiene un único `src/ui.tsx` antiguo, el editor lo guarda como copia de seguridad en `src/ui.tsx.bak` la primera vez que abres el Editor de UI.
Como se trata de archivos normales, puedes abrirlos en tu [editor de código](/creator/content-creator-es/scene-editor/extender-con-codigo/overview.md) en cualquier momento. Ver [UI](https://github.com/decentraland/docs/tree/main/creator/sdk7/2d-ui/README.md) para saber qué hace el código subyacente.
## Código que el editor no puede editar
El editor entiende una forma concreta de código de UI. Un nodo escrito de otra manera, por ejemplo construido dentro de un bucle o una condición, o usando un componente personalizado o props spread, se dibuja en el canvas como un bloque gris con una insignia de **no estándar, edítalo en código** . Sus hijos no se muestran, y en su lugar lo editas en código.
El resto de la GUI a su alrededor sigue funcionando con normalidad.
## Páginas relacionadas
* [UI](https://github.com/decentraland/docs/tree/main/creator/sdk7/2d-ui/README.md): escribir la UI de la escena en código.
* [Combinar con código](/creator/content-creator-es/scene-editor/extender-con-codigo/overview.md): abre tu escena en un editor de código.
* [Entidades y Componentes](/creator/content-creator-es/scene-editor/construir/components.md): el lado 3D del editor.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.decentraland.org/creator/content-creator-es/scene-editor/construir/ui-editor.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
