Layar penuh, area aman, dan sudut HUD untuk game PlayDrop

Tampilkan game dari tepi ke tepi dan cegah halaman bergulir, diperbesar, atau teksnya terpilih:

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

Tentukan ukuran canvas dari ukuran tampilannya dikali devicePixelRatio, dan gambar ulang saat resize; ukuran jendela berubah di desktop, tablet, perangkat lipat, dan saat ponsel diputar. Gambar latar dan area permainan boleh mengisi seluruh layar, termasuk di bawah notch dan kontrol host. Hanya elemen HUD yang interaktif dan perlu dibaca yang harus menghindarinya. Anda tidak memerlukan tombol layar penuh sendiri.

Ada dua hal yang bisa menutupi tepi layar:

• Area aman perangkat keras, seperti notch atau indikator beranda, dari CSS env(safe-area-inset-top|right|bottom|left).
• Kontrol host, dari sdk.host.reservedCorners: { topLeft: { width, height }, topRight: { width, height } }, dalam piksel CSS yang diukur dari sudut kiri atas dan kanan atas viewport game.

Hindari gabungan keduanya, jangan pernah jumlah keduanya. Elemen HUD di kiri atas bisa berada di bawah persegi panjang sudut atau di sampingnya; apa pun pilihannya, gunakan jarak bebas yang lebih besar dari masing-masing:

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

• Lebar dan tinggi nol berarti tidak ada yang menutupi sudut itu, misalnya di situs web desktop, tempat kontrol berada di luar game.
• null berarti host lama yang tidak melaporkan sudut: pertahankan tata letak Anda yang sudah ada dengan area aman.
• Nilainya berasal dari kontrol yang benar-benar ada di layar, seperti target sentuh minimal 44 poin di ponsel, dan berubah saat layar diputar, diubah ukurannya, dan saat ada grup. Bacalah nilainya; jangan pernah menetapkan ukuran secara tetap atau menyisihkan pita atas selebar layar.

Berhenti berlangganan dengan fungsi yang dikembalikan saat Anda menghentikan game.

Deklarasikan di mana game berfungsi di catalogue.json: surfaceTargets mencantumkan desktop, mobileLandscape, dan mobilePortrait, dan primarySurface menyebutkan permukaan yang menjadi rancangan game. Aktifkan hanya yang sudah Anda uji. Game potret yang ditampilkan di layar lebar tetap harus memenuhinya dengan latar yang serasi alih-alih bilah hitam, dan game Instan harus mengutamakan potret.

Buat kontrol nyaman untuk ibu jari: minimal 44 piksel CSS, jauh dari sudut yang disisihkan dan dari tepi layar tempat gestur sistem dimulai. Gunakan pointer event, panggil preventDefault() pada sentuhan game, dan dukung keyboard serta mouse di desktop. Pengontrol dibahas di grup lokal dan pengontrol.