# Koko näyttö, turva-alueet ja HUD-kulmat PlayDrop-peleissä

Täytä näyttö PlayDrop-pelillä ja pidä HUD CSS-turva-alueiden sisällä ja erillään isännän säätimistä SDK:n mittaamien reservedCorners-arvojen avulla.

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

PlayDrop antaa pelillesi koko näytön: verkkosivuston pelisivulla on oma koko näytön säädin, ja sovellukset näyttävät pelit koko näytöllä. Puhelimissa PlayDrop sijoittaa pelin yläkulmien päälle pienet Tauko- ja Ääni-säätimet (ja ryhmän aikana puhesäätimen). SDK kertoo tarkalleen, missä ne ovat, joten HUD voi väistää ne tuhlaamatta tilaa.

## Täytä näyttöalue

Piirrä reunasta reunaan ja estä sivun vierittäminen, zoomaus ja tekstin valitseminen:

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

Määritä canvasin koko sen näyttökoosta kerrottuna arvolla `devicePixelRatio` ja piirrä uudelleen `resize`-tapahtumassa; ikkunoiden koko muuttuu tietokoneilla, tableteilla ja taittuvilla laitteilla sekä puhelimen kääntyessä. Taustakuvat ja pelialue ulottuvat kaikkialle, myös lovien ja isännän säätimien alle. Vain interaktiivisten ja luettavien HUD-elementtien pitää väistää niitä. Et tarvitse omaa koko näytön painiketta.

## Pidä HUD vapaana

Kaksi asiaa voi peittää reunoja:

- **Laitteiston turva-alueet**, kuten lovi tai kotipalkki, CSS-arvoista `env(safe-area-inset-top|right|bottom|left)`.
- **Isännän säätimet**, arvosta `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }`, CSS-pikseleinä mitattuna pelin näyttöalueen vasemmasta ja oikeasta yläkulmasta.

Väistä näiden kahden yhdistettyä aluetta, älä koskaan niiden summaa. Vasemman yläkulman HUD-elementti voi olla kulman suorakulmion alapuolella tai sen vieressä; kummassakin tapauksessa käytä kunkin välin suurempaa arvoa:

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

- Jos leveys ja korkeus ovat nolla, mikään ei peitä kyseistä kulmaa, esimerkiksi verkkosivustolla tietokoneella, jossa säätimet ovat pelin ulkopuolella.
- `null` tarkoittaa vanhempaa isäntää, joka ei ilmoita kulmia: säilytä nykyinen asettelusi turva-alueineen.
- Arvot tulevat näytöllä oikeasti olevista säätimistä, kuten puhelinten vähintään 44 pisteen kosketusalueista, ja muuttuvat kierron, koon muutoksen ja ryhmien myötä. Lue ne; älä koskaan kovakoodaa kokoa äläkä varaa koko levyistä yläkaistaa.

Peru tilaus palautetulla funktiolla, kun purat pelin.

## Suunta ja näkymät

Ilmoita tiedostossa [catalogue.json](https://www.playdrop.ai/fi/create/learn/catalogue-json), missä peli toimii: `surfaceTargets` luettelee `desktop`, `mobileLandscape` ja `mobilePortrait`, ja `primarySurface` nimeää sen, jolle peli on suunniteltu. Ota käyttöön vain se, minkä olet testannut. Leveällä näytöllä näytettävän pystysuuntaisen pelin pitää silti täyttää näyttö yhtenäisellä taustalla mustien palkkien sijaan, ja [Instant](https://www.playdrop.ai/fi/create/learn/instant-games)-pelin on oltava ensisijaisesti pystysuuntainen.

## Syöte kosketusnäytöillä

Tee säätimistä peukaloille mukavia: vähintään 44 CSS-pikseliä, kaukana varatuista kulmista ja näytön reunoista, joista järjestelmäeleet alkavat. Käytä osoitintapahtumia, kutsu `preventDefault()` pelin kosketuksille ja tue tietokoneella näppäimistöä ja hiirtä. Ohjaimet käsitellään sivulla [paikalliset ryhmät ja ohjaimet](https://www.playdrop.ai/fi/create/learn/local-party).

## Liittyvät oppaat

- [Lataus, tauko ja ääni](https://www.playdrop.ai/fi/create/learn/lifecycle): Alusta SDK, ilmoita valmiudesta ensimmäisellä pelattavalla ruudulla, hoida tauko ja jatko, noudata äänikäytäntöä ja esilataa tiedostot offline-käyttöön.
- [Paikalliset ryhmät ja ohjaimet](https://www.playdrop.ai/fi/create/learn/local-party): Lue peliohjaimia ja PlayDropin puhelinohjaimia sdk.device-rajapinnalla, seuraa paikallisten pelaajien paikkoja ja ilmoita ohjaintuki ja paikalliset ryhmäkoot.
- [Client SDK](https://www.playdrop.ai/fi/create/learn/sdk): Selain-SDK:n viite: elinkaari, identiteetti ja tallennukset, ohjaimet, sosiaaliset toiminnot, moninpeli, kauppa, mainokset, tulostaulut, resurssit ja tekoäly.