Pelikokemus

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.

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:

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