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

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

<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 ที่โต้ตอบได้และต้องอ่านเท่านั้นที่ต้องหลบ คุณไม่จำเป็นต้องมีปุ่มเต็มหน้าจอของตัวเอง

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

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

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

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

• ความกว้างและความสูงเป็นศูนย์หมายความว่าไม่มีอะไรบังมุมนั้น เช่น บนเว็บไซต์บนคอมพิวเตอร์ ซึ่งปุ่มควบคุมอยู่นอกเกม
• null หมายถึงโฮสต์รุ่นเก่าที่ไม่รายงานมุม: คงเลย์เอาต์เดิมที่ใช้พื้นที่ปลอดภัยไว้
• ค่าเหล่านี้มาจากปุ่มควบคุมที่อยู่บนหน้าจอจริง เช่น พื้นที่แตะอย่างน้อย 44 พอยต์บนโทรศัพท์ และเปลี่ยนตามการหมุน การปรับขนาด และปาร์ตี้ ให้อ่านค่าเสมอ ห้ามกำหนดขนาดตายตัวหรือกันแถบด้านบนเต็มความกว้างไว้เด็ดขาด

ยกเลิกการสมัครรับด้วยฟังก์ชันที่ได้รับคืนเมื่อปิดเกม

ประกาศว่าเกมใช้ได้ที่ไหนใน catalogue.json: surfaceTargets ระบุ desktop, mobileLandscape และ mobilePortrait และ primarySurface ระบุหน้าจอที่เกมออกแบบมา เปิดเฉพาะแบบที่คุณทดสอบแล้ว เกมแนวตั้งที่แสดงบนจอกว้างควรเติมจอด้วยพื้นหลังที่กลมกลืนแทนแถบสีดำ และเกม Instant ต้องเน้นแนวตั้งเป็นหลัก

ทำปุ่มควบคุมให้ใช้นิ้วโป้งได้สะดวก: อย่างน้อย 44 พิกเซล CSS ห่างจากมุมที่สงวนไว้และขอบจอที่ท่าทางของระบบเริ่มต้น ใช้ pointer event เรียก preventDefault() กับการสัมผัสในเกม และรองรับคีย์บอร์ดและเมาส์บนคอมพิวเตอร์ คอนโทรลเลอร์อธิบายไว้ในปาร์ตี้ในเครื่องและคอนโทรลเลอร์