# Schermvullend, veilige zones en HUD-hoeken voor PlayDrop-games

Laat een PlayDrop-game het scherm vullen en houd de HUD binnen de CSS-veilige zones en vrij van de hostknoppen met de gemeten reservedCorners van de SDK.

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

PlayDrop geeft je game het hele scherm: de gamepagina op de website heeft een eigen knop voor schermvullend spelen en de apps spelen games schermvullend. Op telefoons plaatst PlayDrop kleine knoppen voor Pauze en Audio (en een spraakknop als je in een groep speelt) over de bovenhoeken van de game. De SDK vertelt je precies waar ze staan, zodat de HUD er vrij van kan blijven zonder ruimte te verspillen.

## De viewport vullen

Teken van rand tot rand en voorkom dat de pagina scrolt, zoomt of tekst selecteert:

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

Bepaal de grootte van het canvas op basis van de weergegeven grootte maal `devicePixelRatio` en teken opnieuw bij `resize`; vensters veranderen van grootte op desktops, tablets en vouwbare telefoons, en wanneer de telefoon draait. Achtergrondafbeeldingen en het speelveld lopen overal door, ook onder notches en de knoppen van de host. Alleen interactieve en leesbare HUD-elementen moeten die vermijden. Je hebt geen eigen knop voor schermvullend nodig.

## De HUD vrijhouden

Twee dingen kunnen de randen bedekken:

- **Veilige zones van de hardware**, zoals een notch of de thuisbalk, uit CSS `env(safe-area-inset-top|right|bottom|left)`.
- **De knoppen van de host**, uit `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }`, in CSS-pixels gemeten vanaf de hoeken linksboven en rechtsboven van de viewport van de game.

Vermijd het gebied dat een van beide bedekt, maar tel ze nooit bij elkaar op. Een HUD-element linksboven kan onder de hoekrechthoek staan of ernaast; gebruik in beide gevallen per richting de grootste vrije ruimte:

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

- Een breedte en hoogte van nul betekent dat niets die hoek bedekt, bijvoorbeeld op de desktopwebsite, waar de knoppen buiten de game staan.
- `null` betekent een oudere host die geen hoeken meldt: behoud je bestaande lay-out met veilige zones.
- De waarden komen van de knoppen die echt in beeld zijn, zoals aanraakdoelen van minstens 44 punten op telefoons, en veranderen bij draaien, bij een andere venstergrootte en tijdens groepsspel. Lees ze; codeer nooit een vaste grootte en reserveer nooit een balk over de volle breedte bovenaan.

Meld je af met de teruggegeven functie wanneer je de game opruimt.

## Oriëntatie en weergaven

Geef in [catalogue.json](https://www.playdrop.ai/nl/create/learn/catalogue-json) op waar de game werkt: `surfaceTargets` somt `desktop`, `mobileLandscape` en `mobilePortrait` op, en `primarySurface` noemt de weergave waarvoor de game is ontworpen. Zet alleen aan wat je hebt getest. Een staande game op een breed scherm moet dat nog steeds vullen met een samenhangende achtergrond in plaats van zwarte balken, en een [Instantgame](https://www.playdrop.ai/nl/create/learn/instant-games) moet eerst staand zijn.

## Invoer op aanraakschermen

Maak de besturing comfortabel voor duimen: minstens 44 CSS-pixels, uit de buurt van de gereserveerde hoeken en de schermranden waar systeemgebaren beginnen. Gebruik pointer events, roep `preventDefault()` aan bij aanrakingen in de game en ondersteun toetsenbord en muis op desktop. Controllers worden behandeld in [lokale groepen en controllers](https://www.playdrop.ai/nl/create/learn/local-party).

## Gerelateerde gidsen

- [Laden, pauze en audio](https://www.playdrop.ai/nl/create/learn/lifecycle): Initialiseer de PlayDrop-SDK, meld klaar bij het eerste speelbare frame, pauzeer en hervat netjes, volg het audiobeleid en laad vooraf voor apps en offline.
- [Lokale groepen en controllers](https://www.playdrop.ai/nl/create/learn/local-party): Lees fysieke gamepads en PlayDrop-telefooncontrollers via sdk.device, volg lokale spelersplaatsen en geef controllerondersteuning en lokale groepsgroottes op.
- [Client-SDK](https://www.playdrop.ai/nl/create/learn/sdk): De PlayDrop-browser-SDK: init, host, speler en saves, controllers, sociaal, multiplayer, winkel, advertenties, ranglijsten, prestaties, assets en AI.