# PlayDrop ゲームの全画面表示、セーフエリア、HUD の角

PlayDrop ゲームを画面いっぱいに表示し、SDK が計測した reservedCorners を使って、HUD を CSS のセーフエリア内に収め、ホストのボタンと重ならないようにします。

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

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 要素は、角の長方形の下にも横にも置けます。どちらの場合も、それぞれの余白の大きいほうを使ってください。

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

- 幅と高さが0なら、その角を覆うものはありません。たとえば、ボタンがゲームの外にあるパソコン版のウェブサイトがそうです。
- `null` は、角を報告しない古いホストです。セーフエリアを使った既存のレイアウトをそのまま使ってください。
- 値は、スマホでの最低44ポイントのタッチ領域など、実際に画面に表示されているボタンから得られ、回転、サイズ変更、パーティーによって変わります。値は読み取って使い、サイズを決め打ちしたり、上部に横幅いっぱいの帯を確保したりするのは絶対にやめてください。

ゲームを終了するときは、返された関数で購読を解除してください。

## 画面の向きと表示環境

ゲームが動く環境を [catalogue.json](https://www.playdrop.ai/ja/create/learn/catalogue-json) で宣言します。`surfaceTargets` には `desktop`、`mobileLandscape`、`mobilePortrait` を指定し、`primarySurface` にはゲームが想定している表示環境を指定します。有効にするのはテスト済みのものだけにしてください。縦向きのゲームを横長の画面に表示するときも、黒い帯ではなく、まとまりのある背景で画面を埋めてください。[インスタント](https://www.playdrop.ai/ja/create/learn/instant-games)ゲームは縦向きを基本にする必要があります。

## タッチ画面での入力

操作ボタンは親指で押しやすくしましょう。最低44 CSS ピクセルの大きさにし、予約された角や、システムのジェスチャーが始まる画面の端から離します。ポインターイベントを使い、ゲームのタッチでは `preventDefault()` を呼び出し、パソコンではキーボードとマウスにも対応してください。コントローラーについては[ローカルパーティーとコントローラー](https://www.playdrop.ai/ja/create/learn/local-party)で説明しています。

## 関連ガイド

- [読み込み、一時停止、オーディオ](https://www.playdrop.ai/ja/create/learn/lifecycle): PlayDrop SDK を初期化し、最初の遊べるフレームで準備完了を伝え、きれいに一時停止・再開し、ホストのオーディオポリシーに従い、アプリとオフライン用にファイルを事前読み込みします。
- [ローカルパーティーとコントローラー](https://www.playdrop.ai/ja/create/learn/local-party): sdk.device で物理ゲームパッドと PlayDrop のスマホコントローラーを読み取り、ローカルプレイヤーの枠を追跡し、コントローラー対応とローカルパーティーの人数を宣言します。
- [クライアント SDK](https://www.playdrop.ai/ja/create/learn/sdk): PlayDrop ブラウザ SDK のリファレンス：初期化、ホストのライフサイクル、プレイヤー情報とセーブ、デバイスとコントローラー、ソーシャル、マルチプレイヤー、ショップ、広告、ランキング、実績、アセット、AI。