Tela cheia, áreas seguras e cantos do HUD em jogos do PlayDrop

Desenhe de ponta a ponta e impeça que a página role, dê zoom ou selecione texto:

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

Defina o tamanho do canvas a partir do tamanho exibido multiplicado por devicePixelRatio e redesenhe no resize; as janelas mudam de tamanho em computadores, tablets e dobráveis, e quando o celular gira. A arte de fundo e o campo de jogo vão para todo lugar, inclusive sob os entalhes e os controles do host. Só os elementos interativos e de leitura do HUD precisam evitá-los. Você não precisa de um botão de tela cheia próprio.

Duas coisas podem cobrir as bordas:

• As áreas seguras do hardware, como um entalhe ou o indicador de início, obtidas pelo CSS env(safe-area-inset-top|right|bottom|left).
• Os controles do host, obtidos de sdk.host.reservedCorners: { topLeft: { width, height }, topRight: { width, height } }, em pixels CSS medidos a partir dos cantos superior esquerdo e superior direito da área de exibição do jogo.

Evite a união das duas, nunca a soma delas. Um elemento do HUD no canto superior esquerdo pode ficar abaixo do retângulo do canto ou ao lado dele; nos dois casos, use a maior de cada distância:

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

• Largura e altura zero significam que nada cobre aquele canto, por exemplo no site em computadores, onde os controles ficam fora do jogo.
• null indica um host antigo que não informa os cantos: mantenha seu layout atual com as áreas seguras.
• Os valores vêm dos controles que estão realmente na tela, como áreas de toque de pelo menos 44 pontos nos celulares, e mudam com a rotação, o redimensionamento e os grupos. Leia esses valores; nunca fixe um tamanho no código nem reserve uma faixa superior de largura total.

Cancele a inscrição com a função retornada quando desmontar o jogo.

Declare onde o jogo funciona no catalogue.json: surfaceTargets lista desktop, mobileLandscape e mobilePortrait, e primarySurface indica aquela para a qual o jogo foi pensado. Ative só o que você testou. Um jogo vertical exibido em uma tela larga ainda deve preenchê-la com um fundo coerente em vez de barras pretas, e um jogo Instantâneo precisa ser pensado primeiro para a vertical.

Deixe os controles confortáveis para os polegares: pelo menos 44 pixels CSS, longe dos cantos reservados e das bordas da tela, onde começam os gestos do sistema. Use eventos de ponteiro, chame preventDefault() nos toques do jogo e ofereça suporte a teclado e mouse no computador. Os controles físicos e de celular são abordados em grupos locais e controles.