Área segura no mobile

As regiões do ecrã reservadas para os controlos do cliente no mobile.

Quando a tua cena é executada no cliente mobile, a app Decentraland sobrepõe os seus próprios controlos no ecrã — joystick, chat, profile, controlos da camera e o botão de interação. Estas regiões são reservadas: qualquer UI da cena que fique dentro delas irá colidir visualmente com os controlos e também poderá ficar inacessível ao toque.

A área segura mobile define exatamente onde a UI da cena pode ficar sem colidir com o HUD do sistema.

Todos os valores abaixo usam coordenadas normalizadas [0.0 – 1.0] com base numa resolução de referência em paisagem de 1600 × 720 px . Usa sempre valores normalizados para que o teu layout se adapte a qualquer tamanho de ecrã. Verifica sempre num dispositivo real usando o código QR de preview.

Margens reservadas

O HUD do sistema ocupa as extremidades externas nos quatro lados. Não coloques a UI da cena dentro destas regiões:

Borda	Reservado para	Tamanho
Esquerda	Chat, joystick, emotes	480 px — 30% da largura
Direita	Profile, botões de ação	400 px — 25% da largura
Topo	barra do sistema	58 px — 8% da altura
Fundo	barra do sistema	58 px — 8% da altura

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

Regiões reservadas no cliente mobile: o lado esquerdo, o canto superior direito e o canto inferior direito pertencem aos controlos do sistema.

Zona segura central

A área recomendada para toda a UI da cena é a faixa central do ecrã. Ela dá-te 720 × 605 px de espaço utilizável:

	Pixels	Normalizado
início do x	480 px	0.30
fim do x	1200 px	0.75
início do y	58 px	0.08
fim do y	662 px	0.92

// Zona segura central (normalizada)
safeArea: {
  x: [ 0.30, 0.75 ],  // 480 – 1200 px  →  45% da largura do ecrã
  y: [ 0.08, 0.92 ]   // 58 – 662 px    →  84% da altura do ecrã
}

A zona segura central: 720 × 605 px, de x 30%–75% e y 8%–92%.

Espaço livre do lado direito (apenas elementos pequenos)

Entre o avatar do Profile (canto superior direito) e o grupo de botões de ação (canto inferior direito) existe um espaço estreito onde pequenos elementos de UI — ícones, contadores, indicadores de estado — podem ficar. Mantém os elementos aqui com um máximo de 48 × 48 px para evitar sobrecarregar os controlos.

	Pixels	Normalizado
intervalo do x	1200 – 1600 px	0.75 – 1.0
intervalo do y	158 – 360 px	0.22 – 0.50

// Espaço livre do lado direito (normalizado)
rightGap: {
  x: [ 0.75, 1.0  ],  // 1200 – 1600 px
  y: [ 0.22, 0.50 ]   // 158 – 360 px
}

Onde colocar a UI da cena

• Centro do ecrã — diálogos acionáveis, tudo o que o jogador precise de ler e responder.

• Centro superior — mensagens não acionáveis, estado e notificações.

• Centro inferior (acima do botão de interação) — dicas sensíveis ao contexto.

• Espaço livre do lado direito — apenas ícones pequenos ou contadores (máx. 48 × 48 px).

Porque isso importa

A UI da cena que se sobrepõe às regiões reservadas irá:

• Ficar parcialmente escondida atrás do joystick, do botão de interação ou dos controlos da camera.

• Competir por toques com os controlos do sistema — os jogadores vão ativar acidentalmente um ou outro.

• Fazer com que a tua cena pareça com problemas no mobile, o que prejudica a destaque e a retenção.

Relacionado

• Melhores práticas de UI para mobile

• Detetar a plataforma no código — usa isMobile() para trocar layouts.

• UI no ecrã

• Guia de UX & UI