# ملء الشاشة والمناطق الآمنة وزوايا واجهة اللعب في ألعاب PlayDrop

اجعل لعبة PlayDrop تملأ الشاشة، وأبقِ واجهة اللعب داخل مناطق CSS الآمنة وبعيدًا عن أدوات تحكم المضيف باستخدام reservedCorners المقيسة من SDK.

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

يمنح PlayDrop لعبتك الشاشة كلها: لصفحة اللعبة على الموقع زر خاص لملء الشاشة، وتُلعب الألعاب في التطبيقات بملء الشاشة. وعلى الهواتف، يضع PlayDrop زرّي تحكم صغيرين للإيقاف المؤقت والصوت (وزرًا للدردشة الصوتية أثناء المجموعة) فوق الزاويتين العلويتين للعبة. ويخبرك SDK بمكانها بالضبط، لتبقى واجهة اللعب بعيدة عنها دون إهدار المساحة.

## املأ منطقة العرض

ارسم من حافة إلى حافة، وامنع الصفحة من التمرير والتكبير وتحديد النص:

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

احسب حجم عنصر canvas من حجمه المعروض مضروبًا في `devicePixelRatio`، وأعد الرسم عند `resize`؛ فالنوافذ يتغير حجمها على أجهزة الكمبيوتر والأجهزة اللوحية والأجهزة القابلة للطي وعند تدوير الهاتف. تمتد صور الخلفية وساحة اللعب إلى كل مكان، بما في ذلك تحت نتوءات الشاشة وأدوات تحكم المضيف. ولا تحتاج إلى تجنبها إلا عناصر واجهة اللعب التفاعلية والمقروءة. ولا تحتاج إلى زر خاص بك لملء الشاشة.

## أبقِ واجهة اللعب مكشوفة

يمكن لشيئين أن يغطيا الحواف:

- **المناطق الآمنة للجهاز**، مثل نتوء الشاشة أو مؤشر الشاشة الرئيسية، من CSS `env(safe-area-inset-top|right|bottom|left)`.
- **أدوات تحكم المضيف**، من `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }`، بوحدات بكسل CSS مقيسة من الزاويتين العلويتين اليسرى واليمنى لمنطقة عرض اللعبة.

تجنّب المساحة التي يغطيها أيٌّ منهما، ولا تجمع المسافتين أبدًا. يمكن لعنصر واجهة لعب في أعلى اليسار أن يقع أسفل مستطيل الزاوية أو بجانبه؛ وفي الحالتين استخدم الأكبر من كل مسافة:

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

- العرض والارتفاع الصفريان يعنيان أن لا شيء يغطي تلك الزاوية، كما على موقع الكمبيوتر، حيث تقع أدوات التحكم خارج اللعبة.
- تعني `null` مضيفًا أقدم لا يبلّغ عن الزوايا: احتفظ بتخطيطك الحالي مع المناطق الآمنة.
- تأتي القيم من أدوات التحكم الظاهرة فعلًا على الشاشة، مثل مناطق اللمس التي لا تقل عن 44 نقطة على الهواتف، وتتغير مع التدوير وتغيير الحجم والمجموعات. اقرأها؛ ولا تثبّت حجمًا في الكود أبدًا ولا تحجز شريطًا علويًا بعرض الشاشة كله.

ألغِ الاشتراك باستخدام الدالة المعادة عندما تُنهي اللعبة.

## الاتجاه والواجهات

صرّح بالأماكن التي تعمل فيها اللعبة في [catalogue.json](https://www.playdrop.ai/ar/create/learn/catalogue-json): تسرد `surfaceTargets` القيم `desktop` و`mobileLandscape` و`mobilePortrait`، ويحدد `primarySurface` الواجهة التي صُممت لها اللعبة. لا تفعّل إلا ما اختبرته. واللعبة العمودية المعروضة على شاشة عريضة يجب أن تملأها مع ذلك بخلفية متناسقة بدل الأشرطة السوداء، ويجب أن تكون لعبة [Instant](https://www.playdrop.ai/ar/create/learn/instant-games) عمودية أولًا.

## الإدخال على شاشات اللمس

اجعل أدوات التحكم مريحة للإبهام: 44 بكسل CSS على الأقل، بعيدًا عن الزوايا المحجوزة وحواف الشاشة حيث تبدأ إيماءات النظام. استخدم أحداث المؤشر، واستدعِ `preventDefault()` على لمسات اللعبة، وادعم لوحة المفاتيح والفأرة على الكمبيوتر. وتجد وحدات التحكم في [المجموعات المحلية ووحدات التحكم](https://www.playdrop.ai/ar/create/learn/local-party).

## أدلة ذات صلة

- [التحميل والإيقاف المؤقت والصوت](https://www.playdrop.ai/ar/create/learn/lifecycle): هيّئ PlayDrop SDK، وأعلن الجاهزية عند أول إطار قابل للعب، وأوقف مؤقتًا واستأنف بسلاسة، واتبع سياسة الصوت، وحمّل الملفات مسبقًا للعب دون اتصال.
- [المجموعات المحلية ووحدات التحكم](https://www.playdrop.ai/ar/create/learn/local-party): اقرأ وحدات التحكم الفعلية ووحدات تحكم الهاتف من PlayDrop عبر sdk.device، وتابع خانات اللاعبين المحليين، وصرّح بدعم وحدات التحكم وأحجام المجموعات المحلية.
- [SDK للعميل](https://www.playdrop.ai/ar/create/learn/sdk): مرجع PlayDrop SDK للمتصفح: دورة حياة المضيف والهوية والحفظ ووحدات التحكم والتواصل واللعب الجماعي والمتجر والإعلانات ولوحات المتصدرين والأصول والذكاء الاصطناعي.