> 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/crear-para-movil/desarrollar/safe-area.md).

# Mobile Safe Area

Dónde puede vivir con seguridad la UI de la scene en móvil: fuera de los márgenes de hardware del dispositivo y de los propios controles del client.

En un teléfono, dos cosas no relacionadas consumen el espacio de pantalla que tu UI puede usar de forma segura:

* **Los márgenes de hardware del dispositivo** — el notch o el recorte de la cámara, la barra de estado, el indicador de inicio y las esquinas redondeadas. La UI dibujada debajo de ellos queda parcialmente oculta o es difícil de tocar.
* **Los propios controles del cliente de Decentraland** — joystick, chat, perfil, controles de cámara, botones de acción. La UI de escena colocada debajo de ellos choca visualmente y compite por los mismos toques.

No tienes que medir ninguno de los dos. El cliente informa ambas áreas en tiempo de ejecución y el SDK posiciona tu UI dentro de la que elijas, con la [`screenInset`](/creator/content-creator-es/scenes-sdk7/2d-ui/onscreen-ui.md#screen-inset-area) opción del renderer:

| Lo que quieres                                                    | Lo que debes pasar                                        |
| ----------------------------------------------------------------- | --------------------------------------------------------- |
| Libre de los márgenes de hardware                                 | nada — `screenInset: 'device'` es el valor predeterminado |
| Libre de los márgenes de hardware **y** los controles del cliente | `screenInset: 'interactable'`                             |
| Toda la pantalla, los márgenes los manejas tú                     | `screenInset: 'none'`                                     |

```ts
// Recomendado para la UI de escena que no debe chocar con los controles móviles
ReactEcsRenderer.setUiRenderer(uiComponent, { screenInset: 'interactable' })
```

{% hint style="warning" %}
**Compatibilidad del cliente**: `'interactable'` requiere el cliente móvil `1.12.1` o una versión más reciente. En clientes más antiguos, el área se reporta como cero y la UI vuelve a cubrir toda la pantalla. Esa misma versión normaliza el `'device'` área entre Android e iOS.

**No es un no-op en escritorio** — el cliente de escritorio reserva aproximadamente el 25% izquierdo de la pantalla para su propia UI, así que `'interactable'` también cambia tu diseño de escritorio. Usa una rama con [`isMobile()`](/creator/content-creator-es/crear-para-movil/desarrollar/detect-platform.md) si solo quieres el inset en teléfonos.
{% endhint %}

Consulta [Área del screen inset](/creator/content-creator-es/scenes-sdk7/2d-ui/onscreen-ui.md#screen-inset-area) para la referencia completa: las tres áreas lado a lado en un dispositivo real, el comportamiento por renderer y cómo se relacionan con la [pantalla virtual](/creator/content-creator-es/scenes-sdk7/2d-ui/onscreen-ui.md#default-virtual-size).

## Donde viven los controles del cliente

`'interactable'` te da el área **que cada explorer designa para la UI de escena** — eso no significa deliberadamente que todos los controles del cliente queden fuera de ella. En el cliente móvil, es el área segura del dispositivo menos la columna izquierda (chat, perfil, joystick, emotes); los botones de acción en la parte inferior derecha se dibujan sobre el área **por diseño**.

<figure><img src="https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-c0c75a80bed756d6b2b1483a7cca0cadef26c77e%2Fscreeninset-interactable.png?alt=media" alt="Scene UI inset to the area the mobile client reports as free of its own HUD"><figcaption><p><code>screenInset: 'interactable'</code> en el cliente móvil <code>1.12.1</code>. El rectángulo magenta es la UI de escena, el contorno verde delimita el área interactable. La columna izquierda se excluye; los botones de acción en la esquina inferior derecha se superponen al área.</p></figcaption></figure>

Así que incluso con `'interactable'`, trátalas como concurridas:

* **Esquina inferior derecha** — los botones de acción y el botón de interacción se dibujan por encima. Cualquier cosa que coloques aquí sigue siendo accesible, pero compite por los toques.
* **Esquina superior derecha** — los controles de perfil y de cámara se sitúan justo fuera del área, así que la UI que se pega a esa esquina se lee como parte del HUD del cliente.

Lo que cubre el área es una decisión de cada explorer y puede cambiar entre versiones. Léanla en tiempo de ejecución, nunca la codifiques de forma rígida, y compruébala en las plataformas a las que apuntas.

## Dónde colocar la UI de escena

* **Centro de la pantalla** — diálogos accionables, cualquier cosa que el jugador necesite leer y a la que deba responder.
* **Centro superior** — mensajes no accionables, estado y notificaciones.
* **Centro inferior, encima del botón de interacción** — pistas contextuales.
* **No la esquina inferior derecha** — incluso dentro del área interactable, pertenece a los botones de acción.

## Envuelve parte de tu UI en su lugar

Si optaste por no usarlo con `screenInset: 'none'` y quieres proteger solo parte de tu UI, envuélvela en el componente `ScreenInsetArea` o el `InteractableArea` componente. Cada uno lee su área correspondiente y la aplica a sus hijos. Impórtalos desde `@dcl/sdk/react-ecs`:

```tsx
import ReactEcs, { ReactEcsRenderer, UiEntity, ScreenInsetArea } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export function setupUi() {
  ReactEcsRenderer.setUiRenderer(() => (
    <ScreenInsetArea>
      {/* Un hijo de 100% × 100% llena exactamente el área segura del inset */}
      <UiEntity
        uiTransform={{ width: '100%', height: '100%' }}
        uiBackground={{ color: Color4.create(0, 0, 0, 0.5) }}
      />
    </ScreenInsetArea>
  ), { screenInset: 'none' })
}
```

Ambos componentes se posicionan de forma absoluta usando los valores que informa el cliente, así que los `positionType` y `position` campos de sus `uiTransform` están reservados — cualquier valor que les pongas se ignora. Todas las demás `uiTransform` propiedades (`padding`, `flexDirection`, `alignItems`, …) y los componentes de UI (`uiBackground`, `onMouseDown`, …) funcionan con normalidad. Se adaptan automáticamente cuando el área cambia, por ejemplo al girar o cuando las barras del sistema aparecen o se ocultan, y compensan el [factor de escala de la UI](/creator/content-creator-es/scenes-sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale), de modo que los márgenes quedan correctamente situados sea cual sea el tamaño de tu pantalla virtual.

{% hint style="warning" %}
**📔 No apliques el inset dos veces:** el `screenInset: 'none'` en el fragmento de arriba importa. Envolver tu UI en un componente mientras el renderer también aplica el inset correspondiente empuja tu UI hacia adentro con un margen doble. Elige una cosa o la otra.
{% endhint %}

{% hint style="info" %}
**📱 Solo móvil:** los insets del dispositivo solo tienen valores reales en el **cliente móvil**. En el **cliente de escritorio** son `(0, 0, 0, 0)`cero `screenInset: 'device'` y el `ScreenInsetArea` componente no tienen efecto allí y tu UI se renderiza exactamente igual que sin ellos. El área interactable, a diferencia de los insets del dispositivo, *sí* tiene un valor distinto de cero en escritorio.
{% endhint %}

## Por qué importa

La UI de escena que se superpone a los controles del cliente:

* Quedará parcialmente oculta detrás del joystick, el botón de interacción o los controles de cámara.
* Competirá por los toques con esos controles: los jugadores activarán accidentalmente uno u otro.
* Hará que tu escena parezca rota en móvil, lo que perjudica la visibilidad y la retención.

Verifica siempre en un dispositivo real usando el [código QR de previsualización](/creator/content-creator-es/crear-para-movil/desarrollar/preview-on-mobile.md).

## Relacionado

* [Área del screen inset](/creator/content-creator-es/scenes-sdk7/2d-ui/onscreen-ui.md#screen-inset-area) — la `screenInset` referencia completa.
* [Buenas prácticas de UI para móviles](/creator/content-creator-es/crear-para-movil/desarrollar/ui-best-practices.md)
* [Detecta la plataforma desde el código](/creator/content-creator-es/crear-para-movil/desarrollar/detect-platform.md) — usa `isMobile()` para alternar entre diseños.
* [UI en pantalla](/creator/content-creator-es/scenes-sdk7/2d-ui/onscreen-ui.md)
* [Guía de UX y UI](/creator/content-creator-es/scenes-sdk7/diseno-de-la-experiencia/ux-ui-guide.md)


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-es/crear-para-movil/desarrollar/safe-area.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.