PlayDrop oyunları için tam ekran, güvenli alanlar ve HUD köşeleri

Kenardan kenara çiz ve sayfanın kaymasını, yakınlaşmasını ya da metin seçmesini engelle:

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

Tuvali, görüntülenen boyutunun devicePixelRatio ile çarpımına göre boyutlandır ve resize olayında yeniden çiz; pencereler masaüstlerinde, tabletlerde, katlanabilir cihazlarda ve telefon döndüğünde boyut değiştirir. Arka plan görselleri ve oyun alanı, çentiklerin ve ana uygulama kontrollerinin altı dahil her yere uzanır. Yalnızca etkileşimli ve okunması gereken HUD öğelerinin onlardan kaçınması gerekir. Kendi tam ekran düğmene ihtiyacın yok.

Kenarları iki şey kapatabilir:

• Donanım güvenli alanları: çentik ya da ana ekran göstergesi gibi; CSS env(safe-area-inset-top|right|bottom|left) ile alınır.
• Ana uygulamanın kontrolleri: sdk.host.reservedCorners ile alınır: oyunun görüntü alanının sol üst ve sağ üst köşelerinden ölçülen, CSS pikseli cinsinden { topLeft: { width, height }, topRight: { width, height } }.

İkisinin toplamından değil, birleşiminden kaçın. Sol üstteki bir HUD öğesi köşe dikdörtgeninin altında ya da yanında durabilir; her iki durumda da her boşluğun büyük olanını kullan:

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

• Sıfır genişlik ve yükseklik, o köşeyi hiçbir şeyin kapatmadığı anlamına gelir; örneğin kontrollerin oyunun dışında durduğu masaüstü web sitesinde.
• null, köşeleri bildirmeyen eski bir ana uygulama demektir: güvenli alanlarla mevcut düzenini koru.
• Değerler, telefonlarda en az 44 noktalık dokunma hedefleri gibi ekranda gerçekten bulunan kontrollerden gelir ve döndürme, yeniden boyutlandırma ve partilerle değişir. Onları oku; asla bir boyutu sabit kodlama ya da tam genişlikte bir üst bant ayırma.

Oyunu kapatırken döndürülen fonksiyonla aboneliği iptal et.

Oyunun nerede çalıştığını catalogue.json içinde bildir: surfaceTargets; desktop, mobileLandscape ve mobilePortrait değerlerini listeler, primarySurface ise oyunun tasarlandığı yüzeyi belirtir. Yalnızca test ettiklerini etkinleştir. Geniş bir ekranda gösterilen dikey bir oyun yine de ekranı siyah şeritler yerine tutarlı bir arka planla doldurmalıdır ve bir Instant oyun önce dikey olmalıdır.

Kontrolleri başparmaklar için rahat yap: en az 44 CSS pikseli, ayrılmış köşelerden ve sistem hareketlerinin başladığı ekran kenarlarından uzakta. İşaretçi olaylarını kullan, oyun dokunuşlarında preventDefault() çağır ve masaüstünde klavye ile fareyi destekle. Kumandalar yerel partiler ve kumandalar kılavuzunda ele alınır.