Source: https://www.html5gamemakers.com/juego-html5-soporte-varios-tipos-pantalla
Timestamp: 2019-02-21 06:45:17+00:00

Document:
Haz que tu juego soporte varios tipos de pantalla - HTML 5 Game Makers
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.
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.
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.
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.
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.
Cortar campo de visualización
Etiquetado en:aspect ratio resolución
Genaut octubre 11, 2017 octubre 11, 2017 Game Design, Posts Técnicos, Random No hay comentarios
← Cómo añadir sonido en juegos HTML5
[GDL] Game Dev Log HTML5 Space Shooter – Introducción →

References: resolución 
 Resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución