Cuando se desarrolla un juego en HTML5, existen diferentes detalles que se deben tener en cuenta para brindar una excelente experiencia al usuario. Actualmente los usuarios cuentan con diferentes dispositivos para jugar, si has desarrollado un juego responsive, que se puede visualizar en diferentes tamaños de pantalla y puede trabajar con diferentes dispositivos, habrás hecho un excelente trabajo.

Si sigues ciertos consejos, puedes desarrollar un juego en HTML5 responsive, con el cual brindaras una mejor experiencia para el usuario, por lo que tu juego puede terminar siendo popular 😉 A continuación encontraras algunos consejos para que tu juego en HTML5 sea responsive.

1.  Tamaño De La Pantalla

Existen diferentes tamaños de pantalla actualmente, con lo que tendrás que preguntarte, ¿Mi juego se verá perfectamente en los diferentes tamaños de pantalla? Antes de adaptar el diseño a las diferentes pantallas, debes comenzar desde el tamaño mas grande, luego ir escalando hasta llegar a la resolución mas pequeña de los dispositivos móviles. Además, tienes que decidir la orientación en la que mejor se adapte el juego, es decir, si luce mejor de forma horizontal o vertical. No se recomienda trabajar con tamaños fijos en píxeles, ya que no es adaptable a las diferentes resoluciones.

Es importante elegir un tamaño de referencia que identifica el tamaño real de la pantalla. En particular, se recomienda utilizar window.innerWidth y window.innerHeight ya que proporcionan el tamaño de la pantalla real.

Firefox cuenta con una excelente herramienta que puedes usar, esta se llama Vista de diseño adaptable, la cual puedes sacar Ctrl + Shift + M en Windows y Ubuntu, en Mac OS X la usas con Command + alt + M. Acá puedes ver si lo que has desarrollado se adapta a las diferentes resoluciones.

2. Gestos

Cuando se desarrollan juegos, es importante desactivar aquellos gestos o eventos que no sean necesarios en el juego. Cuando se disfruta un juego, es muy fácil activar el gesto de zoom por accidente, por ejemplo.

Para desactivar el zoom se puede utilizar user-scalable=no en el para dispositivos iOS y Android, y -ms-touch-action: none para Windows Phone.

3. Rotación

Un último aspecto a cuidar es la gestión de la rotación. Si está utilizando un Framework como c2 es posible y probable que esta función sea gestionada por el mismo. En el caso de la codificación manual, o en cualquier caso sin la ayuda de un Framework, debe capturar la rotación mediante el uso de window.resize en lugar de un evento.

Mediante el uso de la función window.resize, el dispositivo comparará el innerWidth y innerHeight y nos dirá si el dispositivo está de forma horizontal o vertical. Esta función ofrece una mejor compatibilidad, pero tiene el inconveniente de que puede tomar un segundo en tomar la orientación, si estás jugando en un dispositivo antiguo con poco rendimiento en el procesador, tendrás problema en usar esta función.

Finalmente

Adaptando su juego a diferentes dispositivos, actualmente es mucho más fácil de lo que era hace unos años y no necesitas métodos complicados para hacerlo. Pero todavía hay que mirar una gran cantidad de detalles y pensar en la manera que se está codificando. Estos son algunos consejos, no pretendo que sea una guía completa, o una guía para realizar la mejor aplicación, pero si son algunos detalles que casi nadie tiene en cuenta, o por lo menos al inicio del desarrollo.