# เต็มหน้าจอ พื้นที่ปลอดภัย และมุม HUD สำหรับเกม PlayDrop

ทำให้เกม PlayDrop เต็มหน้าจอ เก็บ HUD ไว้ในพื้นที่ปลอดภัยของ CSS และไม่ทับปุ่มควบคุมของโฮสต์ด้วย reservedCorners ที่ SDK วัดให้

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

PlayDrop ให้เกมของคุณใช้ทั้งหน้าจอ: หน้าเกมบนเว็บไซต์มีปุ่มเต็มหน้าจอของตัวเอง และแอปเล่นเกมแบบเต็มหน้าจอ บนโทรศัพท์ PlayDrop วางปุ่มหยุดชั่วคราวและปุ่มเสียงขนาดเล็ก (และปุ่มแชทเสียงระหว่างอยู่ในปาร์ตี้) ไว้บนมุมด้านบนของเกม SDK บอกตำแหน่งที่แน่ชัดของปุ่มเหล่านี้ เพื่อให้ HUD หลบได้โดยไม่เสียพื้นที่

## เติมพื้นที่แสดงผลให้เต็ม

วาดให้เต็มขอบจอ และป้องกันไม่ให้หน้าเลื่อน ซูม หรือเลือกข้อความได้:

```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` หน้าต่างเปลี่ยนขนาดได้บนคอมพิวเตอร์ แท็บเล็ต อุปกรณ์จอพับ และเมื่อหมุนโทรศัพท์ ภาพพื้นหลังและพื้นที่เล่นวางได้ทุกที่ รวมถึงใต้รอยบากและปุ่มควบคุมของโฮสต์ เฉพาะองค์ประกอบ HUD ที่โต้ตอบได้และต้องอ่านเท่านั้นที่ต้องหลบ คุณไม่จำเป็นต้องมีปุ่มเต็มหน้าจอของตัวเอง

## ไม่ให้ HUD ถูกบัง

สิ่งที่อาจบังขอบจอมีสองอย่าง:

- **พื้นที่ปลอดภัยของฮาร์ดแวร์** เช่น รอยบากหรือแถบโฮม จาก CSS `env(safe-area-inset-top|right|bottom|left)`
- **ปุ่มควบคุมของโฮสต์** จาก `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }` เป็นพิกเซล CSS ที่วัดจากมุมบนซ้ายและมุมบนขวาของพื้นที่แสดงผลของเกม

หลบพื้นที่รวมของทั้งสองอย่าง ห้ามนำมาบวกกันเด็ดขาด องค์ประกอบ HUD ด้านบนซ้ายวางใต้สี่เหลี่ยมของมุมหรือข้างๆ ก็ได้ ไม่ว่าแบบไหน ให้ใช้ระยะห่างที่มากกว่าในแต่ละด้าน:

```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/th/create/learn/catalogue-json): `surfaceTargets` ระบุ `desktop`, `mobileLandscape` และ `mobilePortrait` และ `primarySurface` ระบุหน้าจอที่เกมออกแบบมา เปิดเฉพาะแบบที่คุณทดสอบแล้ว เกมแนวตั้งที่แสดงบนจอกว้างควรเติมจอด้วยพื้นหลังที่กลมกลืนแทนแถบสีดำ และเกม [Instant](https://www.playdrop.ai/th/create/learn/instant-games) ต้องเน้นแนวตั้งเป็นหลัก

## อินพุตบนหน้าจอสัมผัส

ทำปุ่มควบคุมให้ใช้นิ้วโป้งได้สะดวก: อย่างน้อย 44 พิกเซล CSS ห่างจากมุมที่สงวนไว้และขอบจอที่ท่าทางของระบบเริ่มต้น ใช้ pointer event เรียก `preventDefault()` กับการสัมผัสในเกม และรองรับคีย์บอร์ดและเมาส์บนคอมพิวเตอร์ คอนโทรลเลอร์อธิบายไว้ใน[ปาร์ตี้ในเครื่องและคอนโทรลเลอร์](https://www.playdrop.ai/th/create/learn/local-party)

## คู่มือที่เกี่ยวข้อง

- [การโหลด การหยุดชั่วคราว และเสียง](https://www.playdrop.ai/th/create/learn/lifecycle): เริ่มต้น PlayDrop SDK ส่งสัญญาณ ready ที่เฟรมแรกที่เล่นได้ หยุดชั่วคราวและเล่นต่ออย่างเรียบร้อย ทำตามนโยบายเสียง และโหลดไฟล์ล่วงหน้าเพื่อเล่นออฟไลน์
- [ปาร์ตี้ในเครื่องและคอนโทรลเลอร์](https://www.playdrop.ai/th/create/learn/local-party): อ่านเกมแพดจริงและคอนโทรลเลอร์บนโทรศัพท์ของ PlayDrop ผ่าน sdk.device ติดตามช่องผู้เล่นในเครื่อง ประกาศการรองรับคอนโทรลเลอร์และขนาดปาร์ตี้ในเครื่อง
- [SDK ฝั่งไคลเอนต์](https://www.playdrop.ai/th/create/learn/sdk): เอกสารอ้างอิง SDK บนเบราว์เซอร์ของ PlayDrop: วงจรชีวิตของโฮสต์ ตัวตนและการบันทึก คอนโทรลเลอร์ โซเชียล ผู้เล่นหลายคน ร้านค้า โฆษณา ลีดเดอร์บอร์ด แอสเซ็ต และ AI