Schermo intero, aree sicure e angoli dell’HUD nei giochi PlayDrop

Disegna da bordo a bordo e impedisci alla pagina di scorrere, ingrandirsi o selezionare testo:

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

Dimensiona il canvas in base alla sua dimensione visualizzata moltiplicata per devicePixelRatio e ridisegnalo a ogni resize; le finestre cambiano dimensione su computer, tablet e pieghevoli e quando il telefono ruota. Le immagini di sfondo e il campo di gioco vanno ovunque, anche sotto i notch e i comandi dell’host. Solo gli elementi dell’HUD interattivi e da leggere devono evitarli. Non ti serve un tuo pulsante per lo schermo intero.

Due cose possono coprire i bordi:

• Le aree sicure dell’hardware, come un notch o l’indicatore Home, da env(safe-area-inset-top|right|bottom|left) in CSS.
• I comandi dell’host, da sdk.host.reservedCorners: { topLeft: { width, height }, topRight: { width, height } }, in pixel CSS misurati dagli angoli in alto a sinistra e in alto a destra dell’area di visualizzazione del gioco.

Evita l’unione delle due, mai la loro somma. Un elemento dell’HUD in alto a sinistra può stare sotto il rettangolo dell’angolo o accanto a esso; in entrambi i casi, usa il valore maggiore di ciascun margine:

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

• Larghezza e altezza pari a zero significano che nulla copre quell’angolo, per esempio sul sito da computer, dove i comandi stanno fuori dal gioco.
• null indica un host meno recente che non segnala gli angoli: mantieni il tuo layout attuale con le aree sicure.
• I valori provengono dai comandi realmente sullo schermo, come aree di tocco di almeno 44 punti sui telefoni, e cambiano con la rotazione, il ridimensionamento e i gruppi. Leggili; non scrivere mai una dimensione fissa nel codice e non riservare una fascia superiore a tutta larghezza.

Annulla l’iscrizione con la funzione restituita quando smonti il gioco.

Dichiara dove funziona il gioco in catalogue.json: surfaceTargets elenca desktop, mobileLandscape e mobilePortrait, e primarySurface indica quella per cui è pensato il gioco. Attiva solo ciò che hai testato. Un gioco verticale mostrato su uno schermo largo deve comunque riempirlo con uno sfondo coerente invece che con bande nere, e un gioco Instant deve essere pensato prima di tutto in verticale.

Rendi i comandi comodi per i pollici: almeno 44 pixel CSS, lontano dagli angoli riservati e dai bordi dello schermo dove partono i gesti di sistema. Usa i pointer event, chiama preventDefault() sui tocchi di gioco e supporta tastiera e mouse sul computer. I controller sono trattati in gruppi locali e controller.