Pełny ekran, bezpieczne obszary i rogi interfejsu w grach PlayDrop

Rysuj od krawędzi do krawędzi i zablokuj przewijanie, powiększanie oraz zaznaczanie tekstu na stronie:

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

Ustalaj rozmiar canvasu na podstawie jego wyświetlanego rozmiaru pomnożonego przez devicePixelRatio i rysuj ponownie przy resize; okna zmieniają rozmiar na komputerach, tabletach i składanych telefonach oraz przy obracaniu telefonu. Grafika tła i pole gry sięgają wszędzie, także pod wcięcia ekranu i przyciski hosta. Omijać je muszą tylko interaktywne i czytelne elementy interfejsu. Nie potrzebujesz własnego przycisku pełnego ekranu.

Krawędzie mogą zasłaniać dwie rzeczy:

• Sprzętowe bezpieczne obszary, takie jak wcięcie ekranu lub wskaźnik ekranu głównego, odczytywane z CSS env(safe-area-inset-top|right|bottom|left).
• Przyciski hosta, odczytywane z sdk.host.reservedCorners: { topLeft: { width, height }, topRight: { width, height } }, w pikselach CSS mierzonych od lewego górnego i prawego górnego rogu obszaru widoku gry.

Omijaj połączenie obu obszarów, nigdy nie dodawaj ich wymiarów do siebie. Element interfejsu w lewym górnym rogu może znajdować się pod prostokątem rogu lub obok niego; w obu przypadkach dla każdego odstępu użyj większej z dwóch wartości:

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

• Zerowa szerokość i wysokość oznaczają, że nic nie zasłania danego rogu, na przykład na stronie internetowej na komputerze, gdzie przyciski znajdują się poza grą.
• null oznacza starszy host, który nie zgłasza rogów: zachowaj dotychczasowy układ z bezpiecznymi obszarami.
• Wartości pochodzą z przycisków faktycznie widocznych na ekranie, takich jak obszary dotyku o rozmiarze co najmniej 44 punktów na telefonach, i zmieniają się przy obracaniu, zmianie rozmiaru i w grupach. Odczytuj je; nigdy nie wpisuj rozmiaru na sztywno ani nie rezerwuj pasa u góry na całą szerokość.

Gdy zamykasz grę, anuluj subskrypcję, wywołując zwróconą funkcję.

Zadeklaruj, gdzie gra działa, w catalogue.json: surfaceTargets wymienia desktop, mobileLandscape i mobilePortrait, a primarySurface wskazuje tę, dla której zaprojektowano grę. Włączaj tylko to, co przetestowano. Pionowa gra wyświetlana na szerokim ekranie powinna nadal go wypełniać spójnym tłem zamiast czarnych pasów, a gra Instant musi być przede wszystkim pionowa.

Zadbaj o wygodne sterowanie kciukami: co najmniej 44 piksele CSS, z dala od zarezerwowanych rogów i krawędzi ekranu, przy których zaczynają się gesty systemowe. Używaj zdarzeń wskaźnika, wywołuj preventDefault() dla dotknięć w grze i obsługuj klawiaturę oraz mysz na komputerach. Kontrolery opisuje poradnik grupy lokalne i kontrolery.