Vollbild, sichere Bereiche und HUD-Ecken für PlayDrop-Spiele

Zeichne von Rand zu Rand und verhindere, dass die Seite scrollt, zoomt oder Text markiert:

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

Berechne die Größe des Canvas aus seiner angezeigten Größe mal devicePixelRatio und zeichne bei resize neu; Fenster ändern ihre Größe auf Computern, Tablets und Foldables und wenn das Handy gedreht wird. Hintergrundgrafik und Spielfeld reichen überallhin, auch unter Notches und die Bedienelemente des Hosts. Nur interaktive und lesbare HUD-Elemente müssen ihnen ausweichen. Eine eigene Vollbild-Schaltfläche brauchst du nicht.

Zwei Dinge können die Ränder verdecken:

• Sichere Bereiche der Hardware, etwa eine Notch oder die Home-Leiste, aus CSS env(safe-area-inset-top|right|bottom|left).
• Die Bedienelemente des Hosts, aus sdk.host.reservedCorners: { topLeft: { width, height }, topRight: { width, height } }, in CSS-Pixeln, gemessen von der oberen linken und oberen rechten Ecke des Anzeigebereichs des Spiels.

Weiche der Vereinigung beider Bereiche aus, nie ihrer Summe. Ein HUD-Element oben links kann unter dem Eckrechteck oder daneben sitzen; nimm in beiden Fällen jeweils den größeren Abstand:

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

• Breite und Höhe null bedeuten, dass nichts diese Ecke verdeckt, zum Beispiel auf der Desktop-Website, wo die Bedienelemente außerhalb des Spiels liegen.
• null bedeutet einen älteren Host, der keine Ecken meldet: Behalte dein bisheriges Layout mit sicheren Bereichen.
• Die Werte stammen von den Bedienelementen, die tatsächlich auf dem Bildschirm sind, etwa Touch-Flächen von mindestens 44 Punkt auf Handys, und ändern sich beim Drehen, bei Größenänderungen und bei Partys. Lies sie aus; programmiere nie eine feste Größe ein und reserviere nie einen Streifen über die ganze Breite oben.

Melde dich mit der zurückgegebenen Funktion ab, wenn du das Spiel abbaust.

Deklariere in der catalogue.json, wo das Spiel funktioniert: surfaceTargets listet desktop, mobileLandscape und mobilePortrait auf, und primarySurface nennt das Format, für das das Spiel gestaltet ist. Aktiviere nur, was du getestet hast. Ein Hochformat-Spiel auf einem breiten Bildschirm sollte ihn trotzdem mit einem stimmigen Hintergrund füllen statt mit schwarzen Balken, und ein Sofortspiel muss für das Hochformat gemacht sein.

Mach die Bedienelemente angenehm für Daumen: mindestens 44 CSS-Pixel groß, weg von den reservierten Ecken und von den Bildschirmrändern, an denen Systemgesten beginnen. Verwende Pointer-Events, rufe bei Spiel-Berührungen preventDefault() auf und unterstütze auf dem Computer Tastatur und Maus. Controller werden unter lokale Partys und Controller behandelt.