게임 경험

PlayDrop 게임의 전체 화면, 안전 영역, HUD 모서리

PlayDrop 게임이 화면을 꽉 채우게 하고, SDK가 측정한 reservedCorners로 HUD를 CSS 안전 영역 안에 두고 호스트 컨트롤과 겹치지 않게 하세요.

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>

캔버스 크기는 표시 크기에 devicePixelRatio를 곱해 정하고, resize가 발생하면 다시 그리세요. 데스크톱, 태블릿, 폴더블 기기에서는 창 크기가 바뀌고, 휴대폰을 회전할 때도 바뀝니다. 배경 아트와 플레이 영역은 노치와 호스트 컨트롤 아래를 포함해 어디든 그려도 됩니다. 조작하거나 읽어야 하는 HUD 요소만 이를 피하면 됩니다. 별도의 전체 화면 버튼은 필요 없습니다.

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

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

너비와 높이가 0이면 그 모서리를 가리는 것이 없다는 뜻입니다. 예를 들어 컨트롤이 게임 밖에 있는 데스크톱 웹사이트가 그렇습니다.
null은 모서리 정보를 알려 주지 않는 이전 호스트라는 뜻입니다. 안전 영역을 쓰는 기존 레이아웃을 유지하세요.
값은 휴대폰에서 최소 44포인트인 터치 영역처럼 실제로 화면에 있는 컨트롤에서 나오며, 회전, 크기 변경, 파티에 따라 바뀝니다. 값을 읽어서 쓰고, 크기를 하드코딩하거나 위쪽에 전체 너비의 띠를 예약하지 마세요.

게임을 정리할 때는 반환된 함수로 구독을 해제하세요.

화면 방향과 화면 유형

catalogue.json에 게임이 작동하는 곳을 선언하세요. surfaceTargets에는 desktop, mobileLandscape, mobilePortrait를 나열하고, primarySurface에는 게임이 맞춰 설계된 화면을 지정합니다. 테스트한 것만 켜세요. 넓은 화면에 표시되는 세로 게임도 검은 띠 대신 어울리는 배경으로 화면을 채워야 하며, 인스턴트 게임은 세로 우선이어야 합니다.

터치 화면 입력

조작 버튼은 엄지로 편하게 누를 수 있게 하세요. 최소 44 CSS 픽셀 크기로 만들고, 예약된 모서리와 시스템 제스처가 시작되는 화면 가장자리에서 떨어뜨려 두세요. 포인터 이벤트를 사용하고, 게임 터치에는 preventDefault()를 호출하고, 데스크톱에서는 키보드와 마우스를 지원하세요. 컨트롤러는 로컬 파티와 컨트롤러에서 다룹니다.