Uno de los temas más peliagudos en el mundo de desarrollo de juegos para dispositivo móvil. Cómo hacer que mi juego html5 soporte varios tipos de pantalla. ¿Que pasa si manolito quiere jugar a mi juego en su iPad? Y si ¿Irene quiere jugar en su Galaxy S6?. Haz que tu juego soporte varios tipos de pantalla con estos consejos. Aquí vamos a ver los puntos fuertes y flojos de trabajar para una resolución y los métodos que se suelen usar para ello.

soporte varios tipos de pantalla
Cómo hacer que tu juego html5 soporte varios tipos de pantalla

Lo primero que debemos tener claro son dos conceptos: Resolución y Relación de Aspecto (Aspect ratio).

Resolución: Con esto nos referimos a la resolución del dispositivo, y no es más que la cantidad de píxeles de ancho y de alto del que dispone, mientras más píxeles, más sitio para dibujar nuestro juego.

Relación de aspecto: Dada una posible resolución, tenemos una relación de aspecto, que se calcula dividiendo (lo siento) el ancho y el alto de la resolución de un dispositivo. Por ejemplo si tenemos una pantalla cuadrada, cuya resolución es 1024×1024, nuestra relación de aspecto sería 1:1. Algo más familiar es 1920×1080, cuya relación de aspecto es 16:9 (1920/1080 = 1,77..) Esto quiere decir, que es 1.77 veces más ancho que alto. Este aspect ratio se representa como 16:9 porqué se ha simplificado al menor número posible que represente este aspect ratio, para facilitar el recordarlo (16/9 = 1,77..).

Una vez asimilemos esto, veremos que la mejor manera de hacer que tu juego html5 soporte varios tipos de pantalla no es cogiendo una resolución común en muchos tipos de dispositivos, sino elegir una de las relaciones de aspecto más usadas y trabajar con ella. La manera más efectiva sería elegir una resolución alta con la que trabajar que pertenezca a nuestra relación de aspecto seleccionada, de manera que cualquier otra resolución de la “familia” podría adaptarse sin problema y el tamaño de las imágenes que usemos no se vea estirado (esto en algunos motores no es problema, dependiendo del formato de imagen que usen o si usan distintas versiones de imagen para cada caso)

Ahora, nuestro juego sería totalmente funcional en la familia de dispositivos con nuestra relación de aspecto seleccionada. Pero en las demás, que podemos hacer para “solventarlo”? Se usan varias formas.

Haz que tu juego soporte varios tipos de pantalla

Estirar la imagen

No recomendable, ya que deformaríamos la imagen, aunque en algunos casos muy poco y no se aprecie, habrá dispositivos donde totalmente sea una falta de respeto para el jugador.

soporte varios tipos pantalla
Aspect Ratios – Estirar imagen

Autoajustar la imagen

Podemos autoajustar la imagen, de manera que se vea nuestra relación de aspecto completa y se añada el vacío en forma de “barra negra” a los laterales.

soporte varios tipos pantalla
Auto Ajustar Imagen

soporte varios tipos pantalla
Auto Ajustar Imagen

Cortar el campo de visualización

Acortar el campo de visualización de manera que se adapte al tamaño del usuario, normalmente no se suele cortar mucho y lo que se corta suele ser “zona segura” de manera que no afecte al gameplay. Por ejemplo, en Clash Royale, tienen una forma muy elegante de recortar (o rellenar) el ancho excedente que pueda haber dependiendo del dispositivo. Esta es sin duda la opción acertaza y más efectiva, debido a que con un simple calculo del tamaño de la cámara de nuestro juego podríamos mostrar tanta imagen como de pantalla disponga el dispositivo.

soporte varios tipos pantalla
Cortar campo de visualización

 

 

Haz que tu juego soporte varios tipos de pantalla
Etiquetado en:    

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *