# Toàn màn hình, vùng an toàn và góc HUD cho game PlayDrop

Cho game PlayDrop lấp đầy màn hình, giữ HUD trong vùng an toàn CSS và tránh nút điều khiển của host bằng reservedCorners do SDK đo.

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

PlayDrop dành cho game của bạn toàn bộ màn hình: trang game trên web có nút toàn màn hình riêng và các ứng dụng chạy game toàn màn hình. Trên điện thoại, PlayDrop đặt các nút Tạm dừng và Âm thanh nhỏ (cùng một nút thoại khi đang trong nhóm chơi) đè lên các góc trên của game. SDK cho bạn biết chính xác vị trí của chúng, để HUD tránh được chúng mà không lãng phí không gian.

## Lấp đầy khung hiển thị

Vẽ tràn viền và ngăn trang cuộn, phóng to hoặc chọn văn bản:

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

Đặt kích thước canvas theo kích thước hiển thị nhân với `devicePixelRatio`, và vẽ lại khi có `resize`; cửa sổ đổi kích thước trên máy tính, máy tính bảng, thiết bị gập và khi điện thoại xoay. Hình nền và khu vực chơi trải khắp màn hình, kể cả dưới tai thỏ và nút điều khiển của host. Chỉ các phần tử HUD tương tác được và cần đọc được mới phải tránh chúng. Bạn không cần nút toàn màn hình của riêng mình.

## Giữ HUD không bị che

Có hai thứ có thể che các cạnh:

- **Vùng an toàn phần cứng**, như tai thỏ hoặc thanh điều hướng Home, lấy từ CSS `env(safe-area-inset-top|right|bottom|left)`.
- **Nút điều khiển của host**, lấy từ `sdk.host.reservedCorners`: `{ topLeft: { width, height }, topRight: { width, height } }`, tính bằng pixel CSS đo từ góc trên bên trái và góc trên bên phải của khung hiển thị game.

Hãy tránh phần hợp của hai vùng, không bao giờ cộng chúng lại. Một phần tử HUD ở góc trên bên trái có thể nằm bên dưới hoặc bên cạnh hình chữ nhật ở góc; dù theo cách nào, hãy dùng giá trị lớn hơn của mỗi khoảng cách:

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

- Chiều rộng và chiều cao bằng 0 nghĩa là không có gì che góc đó, ví dụ trên trang web dành cho máy tính, nơi các nút điều khiển nằm bên ngoài game.
- `null` nghĩa là một host cũ không báo các góc: hãy giữ bố cục hiện có của bạn với vùng an toàn.
- Các giá trị đến từ nút điều khiển thực sự có trên màn hình, như vùng chạm tối thiểu 44 point trên điện thoại, và thay đổi khi xoay, đổi kích thước và khi có nhóm chơi. Hãy đọc chúng; không bao giờ cố định một kích thước hay chừa một dải ngang toàn chiều rộng ở phía trên.

Hủy đăng ký bằng hàm được trả về khi bạn gỡ bỏ game.

## Hướng màn hình và loại màn hình

Khai báo nơi game hoạt động trong [catalogue.json](https://www.playdrop.ai/vi/create/learn/catalogue-json): `surfaceTargets` liệt kê `desktop`, `mobileLandscape` và `mobilePortrait`, còn `primarySurface` nêu loại màn hình chính mà game được thiết kế để chơi. Chỉ bật những gì bạn đã thử. Một game dọc hiển thị trên màn hình rộng vẫn nên lấp đầy nó bằng một hình nền hài hòa thay vì các dải đen, và một game [Instant](https://www.playdrop.ai/vi/create/learn/instant-games) phải ưu tiên màn hình dọc.

## Đầu vào trên màn hình cảm ứng

Làm cho các nút điều khiển dễ dùng bằng ngón cái: tối thiểu 44 pixel CSS, cách xa các góc đã dành riêng và các cạnh màn hình nơi cử chỉ hệ thống bắt đầu. Dùng sự kiện pointer, gọi `preventDefault()` cho các thao tác chạm trong game, và hỗ trợ bàn phím, chuột trên máy tính. Tay cầm được trình bày trong [nhóm chơi cục bộ và tay cầm](https://www.playdrop.ai/vi/create/learn/local-party).

## Hướng dẫn liên quan

- [Tải, tạm dừng và âm thanh](https://www.playdrop.ai/vi/create/learn/lifecycle): Khởi tạo SDK PlayDrop, báo sẵn sàng ở khung hình chơi được đầu tiên, tạm dừng và tiếp tục gọn gàng, theo chính sách âm thanh và tải trước tệp để chơi ngoại tuyến.
- [Nhóm chơi cục bộ và tay cầm](https://www.playdrop.ai/vi/create/learn/local-party): Đọc tay cầm vật lý và tay cầm điện thoại PlayDrop qua sdk.device, theo dõi ô người chơi cục bộ, khai báo hỗ trợ tay cầm và quy mô nhóm chơi cục bộ.
- [SDK client](https://www.playdrop.ai/vi/create/learn/sdk): Tài liệu tham khảo SDK trình duyệt PlayDrop: vòng đời host, danh tính và lưu game, tay cầm, xã hội, nhiều người chơi, cửa hàng, quảng cáo, bảng xếp hạng, tài nguyên, AI.