# Fullskjerm, trygge områder og HUD-hjørner for PlayDrop-spill

Få et PlayDrop-spill til å fylle skjermen, og hold HUD-en innenfor CSS-trygge områder og unna vertens kontroller med SDK-ens målte reservedCorners.

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

PlayDrop gir spillet ditt hele skjermen: spillsiden på nettstedet har sin egen fullskjermkontroll, og appene spiller spill i fullskjerm. På telefoner plasserer PlayDrop små kontroller for Pause og Lyd (og en stemmekontroll under gruppespill) over de øverste hjørnene av spillet. SDK-en forteller deg nøyaktig hvor de er, slik at HUD-en kan holde seg unna dem uten å kaste bort plass.

## Fyll visningsområdet

Tegn fra kant til kant og hindre at siden ruller, zoomer eller merker tekst:

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

Sett størrelsen på canvaset ut fra den viste størrelsen ganger `devicePixelRatio`, og tegn på nytt ved `resize`; vinduer endrer størrelse på datamaskiner, nettbrett, sammenleggbare telefoner og når telefonen roteres. Bakgrunnsgrafikk og spillflaten går overalt, også under hakk og vertens kontroller. Bare interaktive og lesbare HUD-elementer trenger å unngå dem. Du trenger ingen egen fullskjermknapp.

## Hold HUD-en fri

To ting kan dekke kantene:

- **Trygge områder i maskinvaren**, som et hakk eller hjemindikatoren, fra CSS `env(safe-area-inset-top|right|bottom|left)`.
- **Vertens kontroller**, fra `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }`, i CSS-piksler målt fra øvre venstre og øvre høyre hjørne av spillets visningsområde.

Hold deg unna området som minst én av dem dekker, men legg aldri avstandene sammen. Et HUD-element øverst til venstre kan ligge under hjørnerektangelet eller ved siden av det; uansett bruker du den største av hver avstand:

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

- Null i bredde og høyde betyr at ingenting dekker det hjørnet, for eksempel på nettstedet på datamaskin, der kontrollene ligger utenfor spillet.
- `null` betyr en eldre vert som ikke rapporterer hjørner: behold det eksisterende oppsettet med trygge områder.
- Verdiene kommer fra kontrollene som faktisk er på skjermen, som trykkflater på minst 44 punkter på telefoner, og endres ved rotasjon, endring av størrelse og grupper. Les dem; hardkod aldri en størrelse, og reserver aldri et øvre felt i full bredde.

Avslutt abonnementet med funksjonen som returneres, når du avvikler spillet.

## Retning og flater

Deklarer hvor spillet fungerer, i [catalogue.json](https://www.playdrop.ai/nb/create/learn/catalogue-json): `surfaceTargets` lister `desktop`, `mobileLandscape` og `mobilePortrait`, og `primarySurface` angir den spillet er laget for. Slå bare på det du har testet. Et spill i stående format som vises på en bred skjerm, bør likevel fylle den med en sammenhengende bakgrunn i stedet for svarte felt, og et [Instant](https://www.playdrop.ai/nb/create/learn/instant-games)-spill må være laget for stående format først.

## Inndata på berøringsskjermer

Gjør kontrollene behagelige for tomler: minst 44 CSS-piksler, unna de reserverte hjørnene og skjermkantene der systemgester starter. Bruk pekerhendelser, kall `preventDefault()` på berøringer i spillet, og støtt tastatur og mus på datamaskin. Kontrollere dekkes i [lokale grupper og kontrollere](https://www.playdrop.ai/nb/create/learn/local-party).

## Relaterte veiledninger

- [Lasting, pause og lyd](https://www.playdrop.ai/nb/create/learn/lifecycle): Initialiser PlayDrop-SDK-en, meld klar ved første spillbare bilde, sett på pause og gjenoppta ryddig, følg lydreglene og forhåndslast filer for spill uten nett.
- [Lokale grupper og kontrollere](https://www.playdrop.ai/nb/create/learn/local-party): Les fysiske spillkontrollere og PlayDrops telefonkontrollere via sdk.device, følg lokale spillerplasser, og deklarer kontrollerstøtte og gruppestørrelser.
- [Klient-SDK](https://www.playdrop.ai/nb/create/learn/sdk): Referanse for PlayDrops nettleser-SDK: livssyklus, identitet og lagring, kontrollere, sosialt, flerspiller, butikk, annonser, topplister, ressurser og KI.