# Pantalla completa, zonas seguras y esquinas del HUD en PlayDrop

Haz que tu juego llene la pantalla y mantén el HUD dentro de las zonas seguras CSS y lejos de los controles del host con las reservedCorners del SDK.

Source: https://www.playdrop.ai/es/create/learn/viewport

PlayDrop da a tu juego toda la pantalla: la página del juego en la web tiene su propio control de pantalla completa y las apps muestran los juegos a pantalla completa. En los móviles, PlayDrop coloca unos pequeños controles de Pausa y Audio (y un control de voz durante un grupo) sobre las esquinas superiores del juego. El SDK te indica exactamente dónde están, para que el HUD pueda evitarlos sin desperdiciar espacio.

## Llena la ventana

Dibuja de borde a borde e impide que la página se desplace, se amplíe o permita seleccionar 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>
```

Calcula el tamaño del canvas a partir de su tamaño mostrado multiplicado por `devicePixelRatio`, y vuelve a dibujar con `resize`; las ventanas cambian de tamaño en ordenadores, tabletas y plegables, y cuando el teléfono gira. El fondo y la zona de juego van por todas partes, incluso bajo las muescas y los controles del host. Solo los elementos del HUD interactivos o que hay que leer deben evitarlos. No necesitas tu propio botón de pantalla completa.

## Mantén el HUD despejado

Hay dos cosas que pueden cubrir los bordes:

- **Las zonas seguras del hardware**, como una muesca o el indicador de inicio, de CSS `env(safe-area-inset-top|right|bottom|left)`.
- **Los controles del host**, de `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }`, en píxeles CSS medidos desde las esquinas superior izquierda y superior derecha de la ventana del juego.

Evita la unión de ambas, nunca su suma. Un elemento del HUD arriba a la izquierda puede ir debajo del rectángulo de la esquina o a su lado; en cualquier caso, usa el mayor de cada margen:

```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)); }
```

- Un ancho y un alto de cero significan que nada cubre esa esquina, por ejemplo en la web de escritorio, donde los controles quedan fuera del juego.
- `null` significa un host antiguo que no informa de las esquinas: conserva tu diseño actual con zonas seguras.
- Los valores proceden de los controles que hay realmente en pantalla, como zonas táctiles de al menos 44 puntos en los móviles, y cambian con la rotación, el cambio de tamaño y los grupos. Léelos; nunca fijes un tamaño en el código ni reserves una franja superior de ancho completo.

Cancela la suscripción con la función devuelta cuando cierres el juego.

## Orientación y pantallas

Declara dónde funciona el juego en [catalogue.json](https://www.playdrop.ai/es/create/learn/catalogue-json): `surfaceTargets` enumera `desktop`, `mobileLandscape` y `mobilePortrait`, y `primarySurface` indica aquella para la que está diseñado el juego. Activa solo lo que hayas probado. Un juego vertical que se muestra en una pantalla ancha debe llenarla igualmente con un fondo coherente en lugar de franjas negras, y un juego [instantáneo](https://www.playdrop.ai/es/create/learn/instant-games) debe estar pensado ante todo para vertical.

## Controles en pantallas táctiles

Haz que los controles sean cómodos para los pulgares: al menos 44 píxeles CSS, lejos de las esquinas reservadas y de los bordes de la pantalla donde empiezan los gestos del sistema. Usa eventos de puntero, llama a `preventDefault()` en los toques del juego y admite teclado y ratón en el ordenador. Los mandos se tratan en [grupos locales y mandos](https://www.playdrop.ai/es/create/learn/local-party).

## Guías relacionadas

- [Carga, pausa y audio](https://www.playdrop.ai/es/create/learn/lifecycle): Inicia el SDK, llama a ready en el primer fotograma jugable, pausa y reanuda sin fallos, respeta el audio del host y precarga para jugar sin conexión.
- [Grupos locales y mandos](https://www.playdrop.ai/es/create/learn/local-party): Lee mandos físicos y mandos de teléfono de PlayDrop con sdk.device, sigue las posiciones de los jugadores locales y declara mandos y tamaños de grupo local.
- [SDK de cliente](https://www.playdrop.ai/es/create/learn/sdk): SDK de navegador de PlayDrop: init, host, jugador, partidas guardadas, mandos, social, multijugador, tienda, anuncios, clasificaciones, logros, recursos e IA.