Por lo general cuando estamos desarrollando un juego para móviles nos encontramos a menudo con el problema de la amplia gama de tamaños de pantalla que tenemos en el mercado, y ya no tanto con los tamaños de las pantallas sino realmente con los diferentes Aspect Ratios que estas tienen.

Conseguir que un desarrollo se vea perfectamente, o de manera similar en todos los dispositivos posibles es todo una odisea, teniendo en cuenta que hacer un desarrollo para cada dispositivo no suele ser una opción debido a la perdida de tiempo y esfuerzo, duplicidades, y un largo etcétera.

Personalmente el lidiar con este tema se me hace bastante pesado, sobre todo cuando nuestro juego ha de verse correctamente en las gamas bajas y altas de android, los diferentes iphone y los nuevos ipad (retina); vamos lo que vendría a ser lo ideal, que se vea bien en todo.

Para que te hagas una idea, un Samsung Galaxy s4 tiene un aspect ratio de 16:9, mientras que un Ipad Air tiene un aspect ratio de 4:3, como te podrás imaginar, tu juego no se va a ver perfecto en ambos tan fácilmente, si todo fuera tan fácil la vida sería aburrida :P.

Tenemos diferentes formas de afrontar este tema, y cada maestrillo tiene su librillo, como en todo, pero hay 3 formas que suelen ser las más usadas, el escalado, el cropping, y el letterboxing o pillarboxing.

El Escalado

Imagina que has diseñado tu juego pensando en un Aspect Ratio de 16:9, existen muchos modelos de móviles que comparten este aspect ratio y tu decides tomar la opción más sencilla para que se adapte a todas las pantallas, que es escalar toda la capa visible de nuestro juego para que ocupe todo el espacio de la pantalla que lo muestra, pero esto implica que cuando la pantalla no comparta el mismo aspect ratio que para el que fue diseñado, la imagen se verá deformada, ya que escalara el Eje X y el Eje Y por separado. Si la diferencia de ratios no es mucha, como, quizás un 16:10, podría pasar inadvertido (que ningún diseñador me apuñale por favor!), pero si es algo más extrema, por ejemplo un ipad, en ese caso si notaremos el cambio. Esto hace que la opción más sencilla quizás no sea la más adecuada en la mayoría de los casos.

El Cropping

Sigue manteniendo en tu imaginación que has diseñado tu juego para nuestro (mi) aspect ratio favorito, 16:9, y que has probado el sistema de escalado pero no te ha terminado de convencer debido a la deformación que puede provocar al cambiar de dispositivo.  Así que decides optar por el sistema de cropping.

cropping 1:9 a 4:3

Cropping no es otra cosa que recortar la escena manteniendo el foco en lo que nos importa. Por ejemplo, si nuestro juego es landscape (apaisado), podemos usar la altura de nuestra escena como referencia, esta escalaría hasta adaptarse a la pantalla (manteniendo siempre la proporción del aspect ratio), y de esta forma nuestra escena no se vería deformada, ya que el espacio sobrante están situados fuera de la pantalla.

El principal problema de este sistema, es que nuestra GUI (interfaz de usuario) y el contenido de nuestra escena ha de ser bastante flexible, de manera que permita recolocar los elementos que necesitamos a nuestro antojo dependiendo de la pantalla a la que nos adaptamos para no dejar fuera de la vista nada importante, y esto tampoco es posible en todos los tipos de juegos.

Letterboxing o pillarboxing

En este punto ya hemos probado los sistemas anteriores, pero no terminan de encajar con la forma en la que hemos diseñado/pensado ese juego que nos hará retirarnos al caribe, así que buscamos más opciones.

El letterboxing y el pillarboxing básicamente son lo mismo, simplemente debemos de mantener inamovible nuestro aspect ratio y adaptar uno de nuestros tamaños (ancho o alto) a el tamaño de la pantalla. De esta manera dejamos dos franjas negras en los bordes, si ajustamos a lo alto quedarán dos franjas negras por los laterales (pillarboxing) y si ajustamos a lo ancho nos quedarán dos franjas negras por arriba y por debajo de nuestra escena (letterboxing).

Seguro que esto lo has visto mucho en el cine, y también en algunos juegos, principalmente en los juegos de PC; pero en los juegos móviles normalmente se intenta evitar esto, ya que da la impresión de que se está desaprovechando esa gran pantalla por la que el usuario ha pagado una pasta, así que en vez de dos franjas negras se suelen mostrar adornos de algún tipo, de manera que se entienda que son una parte más de la escena.

Un ejemplo de juego que recurre al pillarboxing puede ser el juego The Sandbox:

The Sandbox pillarboxing

Si nos fijamos podemos ver como la escena de juego, donde transcurre la acción, se ha adaptado a la pantalla usando el alto como referencia a seguir, y al ser la pantalla de un aspect ratio con un ancho mayor a como fue diseñado el juego, se ha optado mostrar dos pilares de piedra a los laterales. De esta forma todo el espacio de la pantalla queda cubierta y tu mantienes la proporción de tu juego intacta y no te complicas alterando la escena sobre la marcha ni nada por estilo.

Como ejemplo de letterboxing podemos mirar el juego Jetpack Joyride:

Jetpack Joyride letterboxing

Al contrario que en The Sandbox, el Jetpack Joyride se adapta a la pantalla usando el ancho como referencia, en este caso cuando el aspect ratio no es el mismo que con el que el juego fue diseñado se muestran dos franjas en la parte superior e inferior del juego, que serían las que están afuera de las lineas rojas.

Hay que resaltar en este caso, que la integración visual es tan buena que he tenido que marcar con lineas rojas lo que no pertenece al núcleo del juego para que se pueda apreciar correctamente.

Extra

En Ludei he aprendido otro método para gestionar la forma en la que los juegos se han de adaptar a las pantallas, principalmente gracias a motores como CAAT que permiten gestionar los objetos como contenedores de otros trasmitiendoles posiciones y escalas a sus hijos de manera transparente para el programador. Básicamente es una combinación de los métodos anteriormente nombrados. Se utiliza un background sencillo que se adapta al tamaño total de la pantalla, y de manera separada se sitúa encima de este un contenedor que contiene todos los elementos del juego; mientras que el background se adapta (escalado), el contenedor junto a todos sus hijos mantiene siempre el aspecto y la proporción con la que fueron diseñados (letterboxing o pillarboxing), de esta forma ocupamos toda la pantalla, no alteramos el diseño original, y el mismo desarrollo sirve para todos los tipos de pantallas.

Conclusión

La única conclusión que puedo sacar de todos estos métodos es que no hay ninguno perfecto, como ya he mencionado cada desarrollo requerirá que uses uno u otro, con mejor o peor suerte en tu elección, pero sin duda es un aspecto que hay que tener pensado y solucionado antes de empezar con la lógica del juego si quieres evitar dolores de cabeza. También hay que pensar que el motor con el que desarrollemos es un condicionante importante en muchos sentidos, y que la forma en la que podemos adaptar el juego a los diferentes dispositivos puede estar entonces condicionada también, cada motor es un mundo.

En lo personal creo que la técnica que nunca usaré por si sola es la del escalado, no me gusta nada que un juego se vea “encogido”, “estirado” o simplemente deformado al cambiar de dispositivo.

Te animas a contarnos que problemas te has encontrado al portar a diferentes dispositivos, y ¿como lo has solucionado?


PD: La imagen de ejemplo con el paisaje la saqué de aquí, he intentado buscar de donde proviene pero no he encontrado nada.