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

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

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

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:

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

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

Geef in 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 moet eerst staand zijn.

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.