# Tela cheia, áreas seguras e cantos do HUD em jogos do PlayDrop

Faça o jogo ocupar a tela toda, com o HUD dentro das áreas seguras do CSS e longe dos controles do host, usando os reservedCorners medidos pelo SDK.

Source: https://www.playdrop.ai/pt-br/create/learn/viewport

O PlayDrop dá ao seu jogo a tela inteira: a página do jogo no site tem seu próprio controle de tela cheia, e os apps rodam os jogos em tela cheia. Nos celulares, o PlayDrop coloca pequenos controles de Pausa e Áudio (e um controle de voz durante um grupo) sobre os cantos superiores do jogo. O SDK informa exatamente onde eles estão, para que o HUD fique longe deles sem desperdiçar espaço.

## Ocupe toda a área de exibição

Desenhe de ponta a ponta e impeça que a página role, dê zoom ou selecione texto:

```html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
<style>
  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
  body { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  canvas { display: block; width: 100vw; height: 100dvh; }
</style>
```

Defina o tamanho do canvas a partir do tamanho exibido multiplicado por `devicePixelRatio` e redesenhe no `resize`; as janelas mudam de tamanho em computadores, tablets e dobráveis, e quando o celular gira. A arte de fundo e o campo de jogo vão para todo lugar, inclusive sob os entalhes e os controles do host. Só os elementos interativos e de leitura do HUD precisam evitá-los. Você não precisa de um botão de tela cheia próprio.

## Mantenha o HUD livre

Duas coisas podem cobrir as bordas:

- **As áreas seguras do hardware**, como um entalhe ou o indicador de início, obtidas pelo CSS `env(safe-area-inset-top|right|bottom|left)`.
- **Os controles do host**, obtidos de `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }`, em pixels CSS medidos a partir dos cantos superior esquerdo e superior direito da área de exibição do jogo.

Evite a união das duas, nunca a soma delas. Um elemento do HUD no canto superior esquerdo pode ficar abaixo do retângulo do canto ou ao lado dele; nos dois casos, use a maior de cada distância:

```js
const root = document.documentElement.style;
function layoutHud(corners) {
  const left = corners?.topLeft ?? { width: 0, height: 0 };
  const right = corners?.topRight ?? { width: 0, height: 0 };
  root.setProperty("--pd-tl-h", `${left.height}px`);
  root.setProperty("--pd-tr-h", `${right.height}px`);
}
layoutHud(sdk.host.reservedCorners);
const stop = sdk.host.onReservedCornersChange(layoutHud);
```

```css
.score { position: absolute; left: max(12px, env(safe-area-inset-left));
  top: max(12px, env(safe-area-inset-top), var(--pd-tl-h, 0px)); }
.lives { position: absolute; right: max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top), var(--pd-tr-h, 0px)); }
```

- Largura e altura zero significam que nada cobre aquele canto, por exemplo no site em computadores, onde os controles ficam fora do jogo.
- `null` indica um host antigo que não informa os cantos: mantenha seu layout atual com as áreas seguras.
- Os valores vêm dos controles que estão realmente na tela, como áreas de toque de pelo menos 44 pontos nos celulares, e mudam com a rotação, o redimensionamento e os grupos. Leia esses valores; nunca fixe um tamanho no código nem reserve uma faixa superior de largura total.

Cancele a inscrição com a função retornada quando desmontar o jogo.

## Orientação e superfícies

Declare onde o jogo funciona no [catalogue.json](https://www.playdrop.ai/pt-br/create/learn/catalogue-json): `surfaceTargets` lista `desktop`, `mobileLandscape` e `mobilePortrait`, e `primarySurface` indica aquela para a qual o jogo foi pensado. Ative só o que você testou. Um jogo vertical exibido em uma tela larga ainda deve preenchê-la com um fundo coerente em vez de barras pretas, e um jogo [Instantâneo](https://www.playdrop.ai/pt-br/create/learn/instant-games) precisa ser pensado primeiro para a vertical.

## Entrada em telas sensíveis ao toque

Deixe os controles confortáveis para os polegares: pelo menos 44 pixels CSS, longe dos cantos reservados e das bordas da tela, onde começam os gestos do sistema. Use eventos de ponteiro, chame `preventDefault()` nos toques do jogo e ofereça suporte a teclado e mouse no computador. Os controles físicos e de celular são abordados em [grupos locais e controles](https://www.playdrop.ai/pt-br/create/learn/local-party).

## Guias relacionados

- [Carregamento, pausa e áudio](https://www.playdrop.ai/pt-br/create/learn/lifecycle): Inicialize o SDK, sinalize que está pronto no primeiro quadro jogável, pause e retome bem, siga o áudio do host e pré-carregue arquivos para apps e offline.
- [Grupos locais e controles](https://www.playdrop.ai/pt-br/create/learn/local-party): Leia controles físicos e de celular do PlayDrop com sdk.device, acompanhe as posições dos jogadores locais e declare suporte a controles e tamanhos de grupo.
- [SDK de cliente](https://www.playdrop.ai/pt-br/create/learn/sdk): Referência do SDK de navegador: init, host, jogador e salvamentos, controles, social, multijogador, loja, anúncios, placares, conquistas, assets e IA.