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

Spraw, by gra PlayDrop wypełniała ekran, a jej interfejs mieścił się w bezpiecznych obszarach CSS i omijał przyciski hosta dzięki reservedCorners z SDK.

Source: https://www.playdrop.ai/pl/create/learn/viewport

PlayDrop daje twojej grze cały ekran: strona gry w witrynie ma własny przycisk pełnego ekranu, a aplikacje uruchamiają gry na pełnym ekranie. Na telefonach PlayDrop umieszcza nad górnymi rogami gry małe przyciski Pauza i Dźwięk (a podczas gry w grupie także przycisk głosu). SDK mówi dokładnie, gdzie się znajdują, więc interfejs gry może je omijać bez marnowania miejsca.

## Wypełnij obszar widoku

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

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

## Nie zasłaniaj interfejsu

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:

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

```css
.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ę.

## Orientacja i powierzchnie

Zadeklaruj, gdzie gra działa, w [catalogue.json](https://www.playdrop.ai/pl/create/learn/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](https://www.playdrop.ai/pl/create/learn/instant-games) musi być przede wszystkim pionowa.

## Sterowanie na ekranach dotykowych

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](https://www.playdrop.ai/pl/create/learn/local-party).

## Powiązane poradniki

- [Ładowanie, pauza i dźwięk](https://www.playdrop.ai/pl/create/learn/lifecycle): Zainicjuj SDK, zgłoś gotowość przy pierwszej grywalnej klatce, wstrzymuj i wznawiaj grę, przestrzegaj zasad dźwięku i wstępnie ładuj pliki do gry offline.
- [Grupy lokalne i kontrolery](https://www.playdrop.ai/pl/create/learn/local-party): Odczytuj gamepady i kontrolery PlayDrop na telefonie przez sdk.device, śledź lokalne sloty graczy, deklaruj obsługę kontrolerów i rozmiary grup lokalnych.
- [SDK klienta](https://www.playdrop.ai/pl/create/learn/sdk): SDK PlayDrop w przeglądarce: cykl życia hosta, gracz i zapisy, kontrolery, funkcje społecznościowe, gra wieloosobowa, sklep, reklamy, rankingi, zasoby i AI.