ゲーム体験

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>

canvas のサイズは、表示サイズに devicePixelRatio を掛けて決め、resize のたびに描き直します。パソコン、タブレット、折りたたみ端末ではウィンドウのサイズが変わり、スマホを回転させたときも変わります。背景のアートとプレイフィールドは、ノッチやホストのボタンの下も含めて全体に広げます。それらを避ける必要があるのは、操作する HUD 要素と読む必要がある HUD 要素だけです。独自の全画面ボタンは必要ありません。

HUD を重ならないようにする

画面の端を覆う可能性があるものは2つあります。

ハードウェアのセーフエリア：ノッチやホームインジケーターなど。CSS の env(safe-area-inset-top|right|bottom|left) で取得します。
ホストのボタン：sdk.host.reservedCorners で取得します。{ topLeft: { width, height }, topRight: { width, height } } の形で、ゲームの表示領域の左上と右上の角から測った CSS ピクセル単位の値です。

避けるのは2つの和集合で、2つを足し合わせた値ではありません。左上の 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() を呼び出し、パソコンではキーボードとマウスにも対応してください。コントローラーについてはローカルパーティーとコントローラーで説明しています。