# Plein écran, zones sûres et coins de l’interface des jeux PlayDrop

Un jeu PlayDrop en plein écran, avec une interface dans les zones sûres CSS et loin des commandes de l’hôte grâce aux reservedCorners mesurés par le SDK.

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

PlayDrop donne tout l’écran à votre jeu : la page du jeu sur le site web a sa propre commande plein écran, et les apps affichent les jeux en plein écran. Sur téléphone, PlayDrop place de petites commandes Pause et Audio (et une commande de voix pendant un groupe) par-dessus les coins supérieurs du jeu. Le SDK vous indique exactement où elles se trouvent, pour que l’interface du jeu puisse les éviter sans gaspiller d’espace.

## Remplissez la zone d’affichage

Dessinez bord à bord et empêchez la page de défiler, de zoomer ou de sélectionner du texte :

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

Dimensionnez le canvas à partir de sa taille affichée multipliée par `devicePixelRatio`, et redessinez-le à chaque `resize` : les fenêtres changent de taille sur ordinateur, sur tablette, sur les appareils pliables et quand le téléphone pivote. Les illustrations d’arrière-plan et l’aire de jeu vont partout, y compris sous les encoches et les commandes de l’hôte. Seuls les éléments d’interface interactifs ou destinés à être lus doivent les éviter. Vous n’avez pas besoin de votre propre bouton plein écran.

## Gardez l’interface dégagée

Deux éléments peuvent recouvrir les bords :

- **Les zones sûres matérielles**, comme une encoche ou la barre d’accueil, fournies par CSS `env(safe-area-inset-top|right|bottom|left)`.
- **Les commandes de l’hôte**, fournies par `sdk.host.reservedCorners` : `{ topLeft: { width, height }, topRight: { width, height } }`, en pixels CSS mesurés depuis les coins supérieurs gauche et droit de la zone d’affichage du jeu.

Évitez la réunion des deux, jamais leur somme. Un élément d’interface en haut à gauche peut se placer sous le rectangle du coin ou à côté ; dans les deux cas, utilisez la plus grande des deux marges de chaque côté :

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

- Une largeur et une hauteur nulles signifient que rien ne recouvre ce coin, par exemple sur le site web pour ordinateur, où les commandes sont placées hors du jeu.
- `null` signale un hôte plus ancien qui n’indique pas les coins : conservez votre mise en page existante avec les zones sûres.
- Les valeurs proviennent des commandes réellement affichées, comme des zones tactiles d’au moins 44 points sur téléphone, et changent avec la rotation, le redimensionnement et les groupes. Lisez-les ; ne codez jamais une taille en dur et ne réservez jamais de bande pleine largeur en haut de l’écran.

Désabonnez-vous avec la fonction renvoyée quand vous démontez le jeu.

## Orientation et surfaces

Déclarez où le jeu fonctionne dans [catalogue.json](https://www.playdrop.ai/fr/create/learn/catalogue-json) : `surfaceTargets` liste `desktop`, `mobileLandscape` et `mobilePortrait`, et `primarySurface` indique celle pour laquelle le jeu est conçu. N’activez que ce que vous avez testé. Un jeu en portrait affiché sur un écran large doit tout de même le remplir avec un arrière-plan cohérent plutôt qu’avec des bandes noires, et un [jeu instantané](https://www.playdrop.ai/fr/create/learn/instant-games) doit être conçu d’abord pour le portrait.

## Commandes sur écran tactile

Rendez les commandes confortables pour les pouces : au moins 44 pixels CSS, loin des coins réservés et des bords de l’écran où commencent les gestes du système. Utilisez les événements de pointeur, appelez `preventDefault()` sur les contacts tactiles du jeu et prenez en charge le clavier et la souris sur ordinateur. Les manettes sont traitées dans [groupes locaux et manettes](https://www.playdrop.ai/fr/create/learn/local-party).

## Guides associés

- [Chargement, pause et audio](https://www.playdrop.ai/fr/create/learn/lifecycle): Initialisez le SDK, signalez ready dès la première image jouable, gérez pause, reprise et audio de l’hôte, et préchargez pour les apps et le jeu hors ligne.
- [Groupes locaux et manettes](https://www.playdrop.ai/fr/create/learn/local-party): Lisez manettes physiques et manettes téléphone PlayDrop avec sdk.device, suivez les emplacements locaux, déclarez manettes et tailles de groupe local.
- [SDK client](https://www.playdrop.ai/fr/create/learn/sdk): SDK navigateur de PlayDrop : init, hôte, joueur et sauvegardes, manettes, social, multijoueur, boutique, publicités, classements, succès, ressources et IA.