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

PlayDrop oyununun ekranı doldurmasını sağla, HUD’u CSS güvenli alanlarında ve SDK’nın ölçtüğü reservedCorners ile ana uygulama kontrollerinden uzak tut.

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

PlayDrop oyununa ekranın tamamını verir: web sitesindeki oyun sayfasının kendi tam ekran kontrolü vardır ve uygulamalar oyunları tam ekran oynatır. Telefonlarda PlayDrop, oyunun üst köşelerine küçük Duraklat ve Ses kontrolleri (parti sırasında da bir sesli sohbet kontrolü) yerleştirir. SDK sana bunların tam olarak nerede olduğunu söyler; böylece HUD yer israf etmeden onlardan uzak durabilir.

## Görüntü alanını doldur

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

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

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.

## HUD’u açıkta tut

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:

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

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

## Yön ve yüzeyler

Oyunun nerede çalıştığını [catalogue.json](https://www.playdrop.ai/tr/create/learn/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](https://www.playdrop.ai/tr/create/learn/instant-games) oyun önce dikey olmalıdır.

## Dokunmatik ekranlarda girdi

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](https://www.playdrop.ai/tr/create/learn/local-party) kılavuzunda ele alınır.

## İlgili kılavuzlar

- [Yükleme, duraklatma ve ses](https://www.playdrop.ai/tr/create/learn/lifecycle): SDK’yı başlat, ilk oynanabilir karede hazır sinyali ver, duraklat ve sürdür, ses politikasına uy ve çevrimdışı oyun için dosyaları önceden yükle.
- [Yerel partiler ve kumandalar](https://www.playdrop.ai/tr/create/learn/local-party): Fiziksel kumandaları ve PlayDrop telefon kumandalarını sdk.device ile oku, yerel oyuncu yuvalarını izle, kumanda desteğini ve yerel parti boyutlarını bildir.
- [İstemci SDK’sı](https://www.playdrop.ai/tr/create/learn/sdk): PlayDrop tarayıcı SDK’sı: yaşam döngüsü, kimlik ve kayıtlar, kumandalar, sosyal, çok oyunculu, mağaza, reklamlar, liderlik tabloları, asset’ler ve yapay zeka.