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

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

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

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:

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

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

Deklarer hvor spillet fungerer, i 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-spill må være laget for stående format først.

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.