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

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

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

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é :

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

• 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.

Déclarez où le jeu fonctionne dans 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é doit être conçu d’abord pour le portrait.

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.