Área segura mobile

Dónde puede ubicarse de forma segura la UI de la scene en mobile, sin invadir el HUD del sistema ni los márgenes reservados por el hardware del dispositivo.

En un teléfono, dos cosas ocupan parte del espacio de pantalla que la UI puede usar con seguridad:

• El HUD del sistema de Decentraland — la app superpone sus propios controles (joystick, chat, perfil, controles de cámara, el botón de interacción). La UI de la escena colocada debajo de ellos choca visualmente y compite por los toques. Estas regiones se detallan en Márgenes reservados abajo.

• Los márgenes reservados por el hardware del dispositivo — el notch o recorte de la cámara, la barra de estado, el indicador de inicio y las esquinas redondeadas. El SDK mantiene la UI fuera de estas automáticamente con el ScreenInsetArea componente.

La área segura móvil es lo que queda — donde la UI de la escena puede vivir sin chocar con ninguna de las dos.

Todos los valores a continuación usan coordenadas normalizadas [0.0 – 1.0] basadas en una resolución de referencia horizontal de 1600 × 720 px. Usa siempre valores normalizados para que tu diseño se adapte a cualquier tamaño de pantalla. Verifícalo siempre en un dispositivo real usando el código QR de vista previa.

Márgenes reservados

El HUD del sistema ocupa los bordes exteriores en los cuatro lados. No coloques la UI de la escena dentro de estas regiones:

Borde	Reservado para	Tamaño
Izquierda	Chat, joystick, emotes	480 px — 30% del ancho
Derecha	Perfil, botones de acción	400 px — 25% del ancho
Superior	Barra del sistema	58 px — 8% de la altura
Inferior	Barra del sistema	58 px — 8% de la altura

// Insets seguros mínimos (normalizados)
margin: { left: 0.30, right: 0.25, top: 0.08, bottom: 0.08 }

Las regiones reservadas en el cliente móvil: el lado izquierdo, la parte superior derecha y la parte inferior derecha pertenecen a los controles del sistema.

Zona segura central

El área recomendada para toda la UI de la escena es la franja central de la pantalla. Te ofrece 720 × 605 px de espacio utilizable:

	Píxeles	Normalizado
x inicial	480 px	0.30
x final	1200 px	0.75
y inicial	58 px	0.08
y final	662 px	0.92

// Zona segura central (normalizada)
safeArea: {
  x: [ 0.30, 0.75 ],  // 480 – 1200 px  →  45% del ancho de la pantalla
  y: [ 0.08, 0.92 ]   // 58 – 662 px    →  84% de la altura de la pantalla
}

La zona segura central: 720 × 605 px, desde x 30%–75% y y 8%–92%.

Espacio del lado derecho (solo elementos pequeños)

Entre el avatar de perfil (arriba a la derecha) y el grupo de botones de acción (abajo a la derecha) hay un espacio estrecho donde pueden vivir elementos pequeños de la UI — iconos, contadores, indicadores de estado —. Mantén aquí elementos de un máximo de 48 × 48 px para evitar abarrotar los controles.

	Píxeles	Normalizado
rango x	1200 – 1600 px	0.75 – 1.0
rango y	158 – 360 px	0.22 – 0.50

// Espacio del lado derecho (normalizado)
rightGap: {
  x: [ 0.75, 1.0  ],  // 1200 – 1600 px
  y: [ 0.22, 0.50 ]   // 158 – 360 px
}

Dónde colocar la UI de la escena

• Centro de la pantalla — diálogos accionables, cualquier cosa que el jugador necesite leer y responder.

• Centro superior — mensajes sin acción, estado y notificaciones.

• Centro inferior (encima del botón de interacción) — pistas sensibles al contexto.

• Espacio del lado derecho — solo iconos o contadores pequeños (máx. 48 × 48 px).

Por qué importa

La UI de la escena que se superpone a las regiones reservadas:

• Quedará parcialmente oculta detrás del joystick, el botón de interacción o los controles de cámara.

• Competirá por los toques con los controles del sistema — los jugadores activarán accidentalmente uno u otro.

• Hará que tu escena se sienta rota en móvil, lo que perjudica la visibilidad y la retención.

Insets de hardware del dispositivo (ScreenInsetArea)

Los márgenes reservados anteriores pertenecen al HUD del sistema. Por separado, el hardware del dispositivo reserva espacio en pantalla para el notch o recorte de la cámara, la barra de estado, el indicador de inicio y las esquinas redondeadas. La UI dibujada debajo de estos queda parcialmente oculta o es difícil de tocar.

La ScreenInsetArea El componente mantiene tu UI fuera de estos insets de hardware automáticamente, leyendo los valores de inset actuales que informa el dispositivo. Impórtalo desde @dcl/sdk/react-ecs y envuelve la UI que quieras proteger:

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 delimitada por los insets */}
      <UiEntity
        uiTransform={{ width: '100%', height: '100%' }}
        uiBackground={{ color: Color4.create(0, 0, 0, 0.5) }}
      />
    </ScreenInsetArea>
  ))
}

ScreenInsetArea se posiciona de forma absoluta usando los valores de inset que informa el dispositivo, por lo que los campos positionType y position de su uiTransform quedan reservados — cualquier valor que establezcas para ellos se ignora. El resto de uiTransform propiedades (padding, flexDirection, alignItems, …) y componentes de UI (uiBackground, onMouseDown, …) funcionan como de costumbre. El componente reacciona automáticamente cuando cambian los insets, por ejemplo al girar el dispositivo o cuando las barras del sistema aparecen o se ocultan.

📱 Solo móvil: ScreenInsetArea solo cambia algo en el cliente móvil, donde el dispositivo informa valores reales de inset. En el cliente de escritorio los insets son (0, 0, 0, 0)0, por lo que el componente no tiene efecto y tu UI se renderiza exactamente igual que si no estuviera. Es seguro dejarlo en código de UI multiplataforma.

Relacionado

• Buenas prácticas de UI para móvil

• Detecta la plataforma desde el código — usa isMobile() para cambiar los diseños.

• UI en pantalla

• Guía de UX y UI