No celular, nosso jogo feito para mouse não respondia a nada

A maioria das pessoas que abre um jogo de navegador faz isso no celular. Sabíamos disso, e mesmo assim Salt & Stone (um jogo de construir cidade numa ilha de rocha nua, comerciando por um mar interior) foi feito para mouse. A câmera, posicionar um prédio e selecionar um dependiam todos de eventos de mouse.

No celular, o resultado não era "meio chato de usar". Nada se mexia. Não dava para arrastar o mapa, não dava para posicionar nada, não dava para selecionar nada. Um jogo de gestão não dá nenhuma pista de como é controlado, então um jogador que não consegue mover o mapa simplesmente fecha o jogo.

A linha sem a qual nada mais funciona

O jogo agora usa pointer events, um caminho único para mouse, caneta e dedo. Só isso não muda nada no celular, por causa do navegador.

Por padrão, o navegador guarda para si o arrasto com um dedo, como rolagem da página, e o arrasto com dois dedos, como zoom da página. O canvas do jogo recebe só um aviso de que o gesto foi cancelado e mais nada. A correção é uma linha de CSS no canvas, dizendo ao navegador que os toques ali pertencem à página: touch-action: none. Ela precisa estar na folha de estilos, não ser definida por script depois.

Três coisas que um dedo não tem

Cada uma delas precisa da sua própria resposta. Mapeá-las uma a uma em ações de mouse não funciona.

Não tem hover. Com mouse, um "fantasma" do prédio segue o ponteiro antes do clique, mostrando se o lugar é válido. Um dedo não está em lugar nenhum até tocar. Então, com um prédio selecionado, você arrasta o fantasma e solta para posicionar: você vê o prédio, e se ele cabe, antes de confirmar. É o mais perto de hover que existe numa tela de vidro.

Um dedo não consegue arrastar o mapa e mirar ao mesmo tempo. Um mouse move o ponteiro e o mapa separadamente. Com um prédio na mão, um dedo mira e dois dedos arrastam e dão zoom com pinça. Sem nada na mão, um dedo move o mapa, que é o que as pessoas tentam primeiro.

Não tem roda nem botão direito. Eles serviam para girar o prédio e para largá-lo. No toque, viraram dois botões de 56 pixels que só aparecem enquanto você está segurando alguma coisa, para não poluir a tela no resto do tempo.

Pergunte o que o aparelho é, não qual a largura dele

Os botões também precisavam crescer. O jeito comum de fazer isso é uma media query pela largura da tela, e aqui ela inverte os dois casos: um tablet tem 1024 pixels de largura e precisa de controles do tamanho de um dedo, enquanto uma janela estreita de navegador num desktop não precisa.

Então a troca de tamanho pergunta se o ponteiro principal é grosso (um dedo) em vez de perguntar a largura da janela. Num aparelho de toque, os botões da barra passam de 28 para 46 pixels e os cartões de prédio, de 56 para 84.

Mais uma regra específica de celular: deitado, um celular é baixo. Se a tela tem menos de 520 pixels de altura, a bandeja de prédios não abre sozinha, porque aberta ela cobre mais da metade da tela — inclusive a parte da cidade em que você está tentando escolher um lugar.

A mesma lição num jogo de ação

Husktide tinha outro problema. Ele se desenhava numa caixa fixa de 16:9 e escalava essa caixa para caber na tela. Num celular em pé, isso deixava uma faixa no meio da tela, com preto em cima e embaixo: o jogo usava 26% da tela.

A correção foi escolher o formato da caixa do jogo a partir do formato da tela antes de o jogo começar, mantendo o mesmo número total de pixels, para que todas as medidas de layout continuassem valendo. Num celular em pé, agora ele usa 99,9%.

Isso revelou um segundo problema. Tudo é desenhado nas unidades do próprio jogo e depois reduzido para caber, então um botão de 52 unidades de altura pode chegar a um celular deitado com 27 pixels reais — pequeno demais para acertar com confiança. Todo alvo de toque agora é dimensionado a partir de um único número calculado com a escala real, então sempre sai com pelo menos 44 pixels no vidro.

A lição geral

Não dá para deixar "funciona no celular" para o final. Um esquema de controle construído em torno de um ponteiro que paira, uma roda e um segundo botão precisa ser redesenhado para um dedo; remapear não basta. E o primeiro teste é o mais sem graça: abrir no celular e tentar fazer a primeira coisa que um jogador faria.

Jogue Salt & Stone no que você tiver na mão.