Llevar un juego de ratón al móvil

La mayoría de la gente que abre un juego de navegador lo hace en el móvil. Lo sabíamos, y aun así Salt & Stone, un juego de construir una ciudad en una isla de roca pelada y comerciar a través de un mar interior, se hizo para ratón. La cámara, colocar un edificio y seleccionarlo dependían de los eventos del ratón.

En un móvil no se movía nada. No podías desplazar el mapa, ni colocar nada, ni seleccionar nada. Un juego de gestión no da ninguna pista de cómo se controla, así que un jugador que no puede mover el mapa simplemente lo cierra.

La línea sin la cual nada más funciona

El juego usa ahora eventos de puntero, un único camino para ratón, lápiz y dedo. Eso solo, en un móvil, no cambia nada, por culpa del navegador.

Por defecto, el navegador se queda el arrastre con un dedo para desplazar la página, y el arrastre con dos dedos para hacer zoom en ella. El canvas del juego recibe un aviso de que el gesto se ha cancelado y nada más. El arreglo es una línea de CSS en el canvas que le dice al navegador que los toques ahí son cosa de la página: touch-action: none. Tiene que estar en la hoja de estilos, no ponerse desde un script a posteriori.

Tres cosas que un dedo no tiene

Cada una necesita su propia respuesta. Traducirlas una a una a acciones de ratón no funciona.

No hay hover. Con ratón, un «fantasma» del edificio sigue al puntero antes de hacer clic y muestra si el sitio es válido. Un dedo no está en ninguna parte hasta que toca. Así que, con un edificio seleccionado, arrastras el fantasma y levantas el dedo para colocarlo: ves el edificio, y si cabe, antes de comprometerte. Es lo más parecido al hover que existe sobre un cristal.

Un dedo no puede desplazar y apuntar a la vez. Un ratón mueve el puntero y el mapa por separado. Con un edificio en la mano, un dedo apunta y dos dedos desplazan y hacen zoom. Con la mano vacía, un dedo mueve el mapa, que es lo primero que la gente intenta.

No hay rueda ni botón derecho. Eran girar el edificio y soltarlo. En táctil son dos botones de 56 píxeles que solo aparecen mientras sostienes algo, para no llenar la pantalla el resto del tiempo.

Pregunta qué dispositivo es, no cuánto mide de ancho

Los botones también tenían que crecer. Lo habitual es una media query sobre el ancho de la pantalla, y aquí se equivoca en los dos casos: una tableta mide 1024 píxeles de ancho y necesita controles del tamaño de un dedo, mientras que una ventana de navegador estrecha en un ordenador no.

Así que el cambio de tamaño pregunta si el puntero principal es grueso (un dedo) en vez de cuánto mide la ventana. En un dispositivo táctil, los botones de la barra pasan de 28 a 46 píxeles y las tarjetas de edificios de 56 a 84.

Una regla más, específica del móvil: en horizontal, un móvil es bajito. Si la pantalla mide menos de 520 píxeles de alto, la bandeja de edificios no se abre sola, porque abierta tapa más de media pantalla, incluida la parte de la ciudad en la que intentas elegir sitio.

La misma lección en un juego de acción

Husktide tenía otro problema. Se dibujaba en una caja fija de 16:9 y escalaba esa caja para que cupiera en la pantalla. En un móvil en vertical eso dejaba una franja en medio de la pantalla, con negro arriba y abajo: el juego usaba el 26% de la pantalla.

El arreglo fue elegir la forma de la caja del juego a partir de la forma de la pantalla antes de que arranque el juego, manteniendo el mismo número total de píxeles, para que todas las medidas de la interfaz sigan valiendo. En un móvil en vertical ahora usa el 99,9%.

Eso destapó un segundo problema. Todo se dibuja en las unidades propias del juego y luego se reduce para que quepa, así que un botón de 52 unidades de alto puede llegar a un móvil en horizontal como 27 píxeles reales: demasiado pequeño para acertarle con seguridad. Ahora cada objetivo táctil se dimensiona a partir de un único número calculado con la escala real, de modo que siempre sale de al menos 44 píxeles sobre el cristal.

La lección general

Un esquema de control construido alrededor de un puntero que flota, una rueda y un segundo botón hay que rediseñarlo para un dedo, y eso es más fácil al principio que al final. La primera prueba es también la más aburrida: abre el juego en un móvil e intenta hacer lo primero que haría un jugador.

Juega a Salt & Stone en lo que tengas en la mano.