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

# Área segura móvil

Dónde la UI de la escena puede ubicarse de forma segura en móvil, sin invadir los márgenes de hardware del dispositivo ni los controles del propio cliente.

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

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

No tienes que medir ninguno de los dos. El cliente informa de ambas áreas en tiempo de ejecución y el SDK coloca tu UI dentro de la que elijas, con la [`screenInset`](/creator/content-creator-es/scenes-sdk7/ui-2d/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 quedan a tu cargo                  | `screenInset: 'none'`                                     |

```ts
// Recomendado para la UI de la 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 más reciente. En clientes anteriores, el área se informa 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 desktop** — el cliente de escritorio reserva aproximadamente el 25 % izquierdo de la pantalla para su propia UI, así que `'interactable'` también cambia tu layout de escritorio. [`isMobile()`](/creator/content-creator-es/desarrollar-para-movil/desarrollar/detect-platform.md) Haz una bifurcación con
{% endhint %}

Consulta [si solo quieres el inset en teléfonos.](/creator/content-creator-es/scenes-sdk7/ui-2d/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/ui-2d/onscreen-ui.md#default-virtual-size).

## Dónde viven los controles del cliente

`'interactable'` te da el área **que cada Explorer designa para la UI de la escena** — eso no promete 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 la escena, el contorno verde delimita el área interactuable. La columna izquierda queda excluida; los botones de acción en la parte inferior derecha se sitúan sobre el área.</p></figcaption></figure>

Así que incluso con `'interactable'`, considera estas zonas como concurridas:

* **Abajo a la derecha** — los botones de acción y el botón de interacción se dibujan encima. Cualquier cosa que pongas aquí sigue siendo accesible, pero compite por los toques.
* **Arriba a la derecha** — los controles de perfil y cámara quedan justo fuera del área, así que la UI pegada a esa esquina se lee como parte del HUD del cliente.

Lo que cubre el área depende de cada Explorer y puede cambiar entre versiones. Léelo en tiempo de ejecución, nunca lo codifiques de forma fija, y compruébalo en las plataformas a las que apuntas.

## Dónde colocar la UI de la 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** — sugerencias sensibles al contexto.
* **No en la esquina inferior derecha** — incluso dentro del área interactuable, 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 `InteractableArea` . 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 tamaño 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 absolutamente usando los valores que reporta el cliente, así que los `positionType` y `posición` campos de sus `uiTransform` están reservados — cualquier valor que pongas para ellos se ignora. Todas las demás `uiTransform` propiedades (`padding`, `flexDirection`, `alignItems`, …) y los componentes de UI (`uiBackground`, `onMouseDown`, …) funcionan como siempre. Reaccionan automáticamente cuando el área cambia, por ejemplo al girar o cuando las barras del sistema aparecen o desaparecen, y compensan el [factor de escala de la UI](/creator/content-creator-es/scenes-sdk7/ui-2d/onscreen-ui.md#screen-virtual-scale), de modo que los márgenes quedan correctos 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 anterior importa. Si envuelves tu UI en un componente mientras el renderer también aplica el inset correspondiente, empujas tu UI hacia dentro por el doble del margen. Elige una cosa u 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)`, `screenInset: 'device'` y la `ScreenInsetArea` el componente no tiene efecto allí y tu UI se renderiza exactamente como lo haría sin ellos. El área interactuable, a diferencia de los insets del dispositivo, *es* no es cero en escritorio.
{% endhint %}

## Por qué importa

La UI de la escena que se superponga 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 destacada y la retención.

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

## Relacionados

* [si solo quieres el inset en teléfonos.](/creator/content-creator-es/scenes-sdk7/ui-2d/onscreen-ui.md#screen-inset-area) — la `screenInset` referencia completa.
* [Buenas prácticas de UI para móvil](/creator/content-creator-es/desarrollar-para-movil/desarrollar/ui-best-practices.md)
* [Detecta la plataforma desde el código](/creator/content-creator-es/desarrollar-para-movil/desarrollar/detect-platform.md) — usa `isMobile()` para cambiar layouts.
* [UI en pantalla](/creator/content-creator-es/scenes-sdk7/ui-2d/onscreen-ui.md)
* [Guía de UX y UI](/creator/content-creator-es/scenes-sdk7/disenar-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 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/desarrollar-para-movil/desarrollar/safe-area.md?ask=<question>&goal=<user_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.