Helskärm, säkra områden och HUD-hörn för PlayDrop-spel

Rita från kant till kant och hindra sidan från att rulla, zooma eller markera text:

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

Ange canvasens storlek som den visade storleken gånger devicePixelRatio och rita om vid resize; fönster byter storlek på datorer, surfplattor och vikbara telefoner och när telefonen vrids. Bakgrundsbilder och spelplanen går överallt, även under kamerahack och värdens kontroller. Bara interaktiva och läsbara HUD-element behöver undvika dem. Du behöver ingen egen helskärmsknapp.

Två saker kan täcka kanterna:

• Maskinvarans säkra områden, som ett kamerahack eller hemindikatorn, från CSS env(safe-area-inset-top|right|bottom|left).
• Värdens kontroller, från sdk.host.reservedCorners: { topLeft: { width, height }, topRight: { width, height } }, i CSS-pixlar mätta från det övre vänstra och det övre högra hörnet av spelets visningsyta.

Undvik unionen av de två, aldrig deras summa. Ett HUD-element uppe till vänster kan ligga under hörnrektangeln eller bredvid den; använd i båda fallen det största av varje avstånd:

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

• Noll i bredd och höjd betyder att inget täcker det hörnet, till exempel på webbplatsen på en dator, där kontrollerna ligger utanför spelet.
• null betyder en äldre värd som inte rapporterar hörn: behåll din befintliga layout med säkra områden.
• Värdena kommer från de kontroller som faktiskt finns på skärmen, som tryckytor på minst 44 punkter på telefoner, och ändras vid vridning, storleksändring och grupper. Läs dem; hårdkoda aldrig en storlek och reservera aldrig ett band över hela bredden upptill.

Avsluta prenumerationen med den returnerade funktionen när du stänger ner spelet.

Deklarera var spelet fungerar i catalogue.json: surfaceTargets listar desktop, mobileLandscape och mobilePortrait, och primarySurface anger den yta som spelet är gjort för. Aktivera bara det du har testat. Ett spel i stående format som visas på en bred skärm ska ändå fylla den med en sammanhängande bakgrund i stället för svarta kanter, och ett Instant-spel måste vara gjort för stående format i första hand.

Gör kontrollerna bekväma för tummar: minst 44 CSS-pixlar, på avstånd från de reserverade hörnen och från skärmkanterna där systemgester börjar. Använd pekarhändelser, anropa preventDefault() för spelets touchhändelser och stöd tangentbord och mus på datorer. Handkontroller beskrivs i lokala grupper och handkontroller.