# Área segura 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.

{% hint style="info" %}
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](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/preview-on-mobile.md).
{% endhint %}

## 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 }
```

<figure><img src="/files/3a298bd99934de7d871efde0df0bac32484617b9" alt="Mobile screen with the reserved regions highlighted"><figcaption><p>Regiões reservadas no cliente mobile: o lado esquerdo, o canto superior direito e o canto inferior direito pertencem aos controlos do sistema.</p></figcaption></figure>

## 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ã
}
```

<figure><img src="/files/8ce94a719800d37d9f9a0af1dc92381e25e1c85c" alt="Mobile screen with the safe area highlighted"><figcaption><p>A zona segura central: 720 × 605 px, de x 30%–75% e y 8%–92%.</p></figcaption></figure>

## 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](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/ui-best-practices.md)
* [Detetar a plataforma no código](/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/detect-platform.md) — usa `isMobile()` para trocar layouts.
* [UI no ecrã](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md)
* [Guia de UX & UI](/creator/content-creator-pt/scenes-sdk7/desenhar-a-experiencia/ux-ui-guide.md)


---

# Agent Instructions: 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:

```
GET https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/criar-para-mobile/safe-area.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.