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

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

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

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:

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

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

Khai báo nơi game hoạt động trong 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 phải ưu tiên màn hình dọc.

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.