devices

Cómo crear juegos PixelArt para diferentes tamaños de pantalla.

A día de hoy la gran diversidad de dispositivos sobre los que realizar juegos supone grandes quebraderos de cabeza para los desarrolladores en cuanto a homogeneizar las características de sus creaciones para adaptarlos a cada uno de ellos. Sobre todo para los que desarrollamos en 2D, no ocurriendo lo mismo para aquellos que trabajan en 3D, donde es mucho más sencillo ajustar las resoluciones y la proporción de aspecto a los distintos dispositivos. Por lo tanto, éste artículo, lo voy a basar en ajustar la resolución y el Aspect Ratio de nuestro proyecto para aquellos que creamos juegos estilo PixelArt.

Según la plataforma para la que vayamos a publicar, tenemos decenas de resoluciones distintas. Incluso dentro de un mismo modelo como por ejemplo Android, el abanico de tamaños de pantalla es tan basto, que a los desarrolladores caseros nos abruma sólo de pensarlo.

Es por ello que dediqué bastante tiempo a investigar sobre éste asunto para tratar de dar con una clave a la hora de diseñar mis juegos y lograr ajustar mis desarrollos a la multitud de pantallas existente, tratando de evitar las famosas “barras negras” y sin tener que “deformar” los gráficos para ello. A continuación voy a explicaros cuáles son los puntos más importantes:

 

ASPECT RATIO

La primera cuestión a tener en cuenta es, ¿Cuantas resoluciones y qué tipos de Aspect Ratio tenemos ahora mismo en el mercado? ¿Y qué diablos es el Aspect Ratio?

El Aspect Ratio, también llamado en nuestro idioma “proporción de aspecto”, significa la proporción de tamaño existente entre la anchura y altura de una imagen, que se calcula dividiéndolas en ese orden. Pongamos un ejemplo sobre una captura de imagen de Isaac’s Oddyssey, juego diseñado a 320×180 Pixels:

anchura_alturaAspect Ratio = Anchura / Altura = 320 / 180 = 1,7777

Si buscamos la división irreducible y equivalente a 320:180, obtenemos como resultado 16:9, que es algo que nos suena mucho más claro. Para comprobar la equivalencia de ambas fracciones, si dividimos 16 entre 9, obtenemos el mismo resultado, 1,7777.

RESOLUCIÓN

Ahora que tenemos más claro lo que es el Aspect Ratio de una imagen, nuestro siguiente paso será tratar de desglosar en una tabla un pequeño resumen de las resoluciones de los diferentes tipos de dispositivos existentes en el mercado:

Aspect Ratio Resoluciones Dispositivo
4:3 320×240 Android
1024×768 iPad 1 y 2, PCs
2048×1536 iPad 3 o +
3:2 480×320 Android, iPhone 3 o –
960×640 iPhone 4 y 4s
16:10 840×480 Android, Windows Phone 7
1280×800 Tablets Android
(ej. Galaxy Tab 10.1)
17:10 1024×600 Tablets Android
(ej. Galaxy Tab 7)
16:9 854×480 Android
1136×640 iPhone 5 y +
1280×720 Galaxy Note 2, Sony Xperia S
1366×768 Portátiles Windows
1920×1080 TVs y Pcs sobremesa

Una vez tenemos un resumen de la mayoría de resoluciones de las diferentes plataformas podemos visitar una web de gran utilidad para el caso que nos acontece, que es gs.statcounter.com . Será de gran ayuda para conocer de primera mano cuales son las resoluciones más utilizadas en la actualidad por los usuarios que navegan por Internet en todo el mundo.

Como resumen general de los años 2014 y 2015, podemos observar las siguientes gráficas:

Equipos sobremesa y portátiles:

desktop2015

Dispositivos móviles y tablets:

mobile2015

 

Con lo cual el claro vencedor a día de hoy es el Aspect ratio de 16:9. Si hubiera que elegir forzosamente uno sólo para desarrollar nuestro juego, yo personalmente me decantaría por 16:9 debido al gran uso que tiene por parte de los usuarios tanto de sistemas PC, Mac o dispositivos móviles.

Pero lo que se trata en la medida de lo posible es de ajustar nuestro juego a toda esa variedad de resoluciones de pantalla disponibles en el mercado.

LETTERBOX

El método Letterboxing consiste en la transformación de una imagen con unas determinadas proporciones a otras resoluciones distintas mediante el uso de barras negras en la parte superior e inferior o en ambos lados, para evitar la deformación de su contenido al ajustarlo a la nueva pantalla.

Es algo que hemos visto en televisión toda la vida. A la hora de reproducir películas de cine en formato Panavision (12:5) en las antiguas pantallas cuadradas de nuestros salones(4:3), aparecían unas franjas negras en la parte superior e inferior de la pantalla para evitar la deformación de la proporción inicial.

Volviendo al mundo del videojuego, si tenemos una imagen con un Aspect Ratio de 3:2(480x320px por ejemplo) y quiero mostrarla en una pantalla de iPhone 5 (con Aspect Ratio de 16:9 y resolución 1136x640px), lo primero que haré para ajustar a la pantalla será escalar esa imagen a 2X, lo que la convertirá a una resolución de 960x640px. Por tanto, verticalmente la imagen cubrirá toda la pantalla del iPhone, pero no ocurrirá lo mismo con el eje horizontal, con lo cual o bien “estiramos” la imagen en su eje horizontal para cubrir los 176px que faltan, deformando la imagen original o bien lo más lógico será rellenar ese espacio con dos barras negras a los lados de 88px cada una para mantener esa proporción.

aspectmovil

SAFE ZONE

Una vez examinado todo lo anterior, nuestro juego debería poder soportar los siguientes Aspect Ratio: 16:9, 4:3, 16;10 y 3:2 que abarcan la mayoría de dispositivos actuales del mercado.

Si nuestro juego es un estilo TopDown (como el famoso Hotline Miami por ejemplo), que dispone de Scroll en ambos ejes y de unos escenarios grandes, no tendremos más problema que configurar el tamaño de nuestra pantalla de visualización para ajustar al correcto según la resolución detectada en el dispositivo, así como posicionar de forma relativa nuestro menú flotante para que se ajuste automáticamente.

Pero en aquellos casos en los que los fondos ocupan exactamente el tamaño de la pantalla o bien sólo se realiza Scroll en un eje, lo que haremos para empezar a trabajar es elegir la proporción más restrictiva de las que hemos elegido y esa es la de 3:2. Ésta resolución tiene una ventaja y es que coincide en su eje vertical con la de 16:9 y en el horizontal con la de 4:3. Es decir, si superponemos las resoluciones de 16:9 y la de 4:3, el cuadro que se forma en su interior sería el de 3:2.

3res

Por lo tanto, es en ese espacio donde debe ocurrir la acción de nuestro juego así como los elementos o textos que se puedan mostrar en pantalla. A este espacio lo llamaremos Safe zone en nuestros diseños.

Podéis descargar éste Template para Photoshop cortesía de V-Play donde quedan delimitadas las áreas que acabamos de ver en el siguiente enlace:

· Photoshop Game Background template by V-Play.

TAMAÑO DE LOS FONDOS

Supongamos que tenemos un proyecto 2D de estética PixelArt para cuya resolución nos sirve casi cualquier terminal con Aspect Ratio de 3:2 y calidad SD.

A la hora de elegir una resolución para empezar a diseñar, soy bastante clásico y me gusta mucho la mítica VGA (en modo 320×240 de pixels cuadrados y Aspect Ratio de 4:3).

Partiendo de la base VGA(4:3), para calcular la Safe Zone haríamos lo siguiente:

Si recordamos lo explicado anteriormente, dijimos que la zona segura mantenía el mismo ancho que la resolución de 4:3. Por lo tanto para obtener la altura, simplemente dividiremos el ancho de la resolución elegida en 4:3, que era 320, entre el coeficiente del Aspect Ratio de 3:2 que es 1,5. Como resultado obtendremos una resolución de 320×213,3, pero como siempre se deben manejar resoluciones en múltiplo de 2 para facilitar el cálculo al procesador, nos quedaremos con 320×214 para nuestra zona segura.

Una vez tenemos bien delimitada la Safe Zone, debemos calcular a qué tamaño debemos diseñar los fondos para abarcar ese extra en las resoluciones más amplias.

En el caso del eje horizontal, las resoluciones más anchas son las de 16:10 y 16:9, por lo que teniendo en cuenta que la Safe zone era de 320×214, al pasar a 16:9 mantenemos el tamaño vertical, con lo que multiplicando la altura por la proporción de 16:9 que es 1,7777, nos resultaría un tamaño de 380×214 pixels aproximadamente.

Con lo cual, nuestro tamaño para los fondos debería ser 380×240 pixels para que pudiera abarcar todas las proporciones posibles sin mostrar las barras negras.

CONCLUSIONES

Una vez examinado todo lo anterior y sabiendo la manera en que hay que diseñar nuestros juegos para abarcar la mayor cantidad posible de resoluciones, habrá ocasiones en que por cuestiones de diseño de nuestro juego u otros motivos, sea inevitable usar el Letterbox para ajustar el proyecto a los distintos dispositivos. En ese caso, mi valoración personal es que, vista la estadística, el Aspect Ratio de 16:9 a día de hoy es el más usado con gran diferencia del resto, por lo que cuando tengo que elegir uno de ellos para mis proyectos, me quedo con éste y de ahí trato de ajustar al resto de proporciones de aspecto.

Falta decir que como se informó al inicio del artículo, éstas directrices están basadas para proyectos PixelArt, de resoluciones muy retro (VGA o incluso inferiores), ya que en otro tipo de juegos, no sólo tendríamos que tener en cuenta todo lo anterior, si no además la calidad de imagen de los dispositivos, que va desde el SD, pasando por HD hasta Ultra HD o Retina, con lo que tendríamos que tener en cuenta el realizar varios Atlases de texturas en función de la calidad del dispositivo y demás, pero eso serían asuntos a tratar en otro tipo distinto de desarrollos.


FUENTES

· V-Play.net

· Imagen de portada tomada de FlickR

· Capturas de imagen sobre estadísticas de resoluciones tomadas de StatCounter Global Stats.

· Imagen de muestra sobre el LetterBox tomada del juego Tales of Monkey Island

 

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>