Como hacer diferentes resoluciones de tu juegos

Últimamente estoy recibiendo algunos mails de como hacer algunas cosas en Game Maker. Una de las dudas que se suelen repetir es como hacer tu juego compatible en diferentes resoluciones o, lo que es lo mismo, en diferentes tipos de pantallas. Este problema se enfrentan sobretodo los desarrolladores que quieren hacer juegos para Android, ya que la variedad de dispositivos, pantallas y resoluciones puede ser un verdadero quebradero de cabeza.

La pega es que la respuesta es: depende. Depende de como hayas creado tu juego, depende de si has creado o no views, etc. Voy a intentar explicar un poco todas las posibilidades y ofrecer distintas soluciones, desde la más sencilla hasta la más avanzada (seguro que podrás aprovechar el código para tu proyecto).

Información relacionada desde YoYoGames

Como ya he dicho, este es un problema común al que se enfrentan los desarrolladores. Desde la opción de tutorial de Game Maker Studio está el proyecto de HTML5_Scaling, que intenta ayudar a entender un poco como resolverlo. Además, desde el Blog tecnológico de su web hicieron dos artículos hablando del tema: en uno comentaba cómo utilizar la capa visual, por llamarlo de alguna manera a la GUI layer, para cambiar el tamaño de tu juego, y en otro enseñaba como jugar con las vistas. Si se os da bien el inglés, tenéis los artículos aquí y aquí. Yo los usaré como referencia para aportar mi propia solución.

Qué es el aspect ratio y como afecta a tu juego

Cuando creamos nuestro juego, lo hacemos con un tamaño en píxeles en la room. Es importante saber que la referencia del tamaño final de la ventana, o del dispositivo final, es de la primera room del juego (o de su view configurada): si luego tienes una room el doble de grande, tu ventana de juego no cambiará de tamaño. Es un aspecto importante a tener en cuenta.

Entonces, ¿qué es la relación de aspecto (aspect ratio)? No deja de ser la proporción entre el ancho que hemos definido y su altura. Es decir, dividimos el ancho por el alto y sabemos su relación, aunque para facilitar un poco cual es se utiliza una expresión de A:B. En la siguiente imagen (extraída de la Wikipedia), tenemos tres aspect ratio diferentes:

Ejemplo de diferentes aspect ratio

El rectángulo rojo equivale a un aspect ratio de 4:3, por ejemplo la de un iPad, el recuadro azul es de 12:5 y la verde se acerca a los 16:9 que podemos estar acostumbrados en algunos móviles. Quedaros con esta imagen porque será importante cuando definamos las views.

Diferente tamaño, mismo aspect ratio

Así que ya sabemos que es la proporción de aspecto, pero eso no implica con el tamaño definido en la room. Por ejemplo, ¿que aspect ratio tiene una room de 640X480? ¿Y una de 1024×768? Pues el mismo, 4:3, pero su tamaño es diferente. Es importante saber con qué tamaño vamos a trabajar, para saber cómo vamos a ver nuestro juego en los diferentes dispositivos.

Ejemplo de diferentes tamaños o resoluciones de pantalla. Si os fijáis, tiene la misma relación de aspecto (aspect ratio)

La opción por defecto de Game Maker

Si vamos al árbol de recursos, en Game Global Settings, tendremos una pestaña de configuración por cada módulo de exportación que hayamos pagado. Si tenemos la versión gratuita, solo podremos acceder a la de Windows, si hemos pagado el módulo de Android, aparecerá su pestaña correspondiente, y si tenemos la versión Master Collection, tendremos varias pestañas diferentes. En todas las exportaciones vemos una pestaña de Graphics, desde donde podemos configurar, entre otras cosas, el grupo de texturas o el escalado. Vamos a fijarnos en esta última opción, que es la que nos permite ampliar o disminuir nuestro juego dependiendo de la resolución desde donde se ejecuta.
En Scaling tenemos dos opciones, keep aspect ratio y Full scale. En Full Scale escalará nuestro juego ocupando toda la pantalla del dispositivo. Si estamos en Windows, Mac o Linux, ocuparía toda la ventana, o toda la pantalla si estamos jugando maximizado. Si es en una tablet o móvil, ocupará toda la pantalla. Si no hemos creado nuestro juego con el mismo aspect ratio, este se adaptará y podemos ver nuestro juego “deformado”. Compara las dos imágenes

Tal y como vemos nuestro juego al ejecutarlo

No queremos verlo de esta manera, ¿verdad?

Si marcamos Keep aspect ratio, mantendrá la proporción de nuestro juego, pero si nuestro dispositivo tiene un aspect ratio diferente, veremos unas bandas negras, puede ser en los laterales izquierdo/derecho o arriba/abajo, para rellenar.

Solución estándar que ofrece Game Maker

Esta es una solución automática que nos ofrece Game Maker, solemos verlo en juegos de ordenador. Pero en juegos de móviles o tablets no solemos ver estas bandas, siempre vemos la pantalla completa y sin deformar. ¿Cómo se hace?

Conclusión

En el post siguiente, vemos el código para hacer diferentes resoluciones en tu juego. Si tenéis dudas podéis dejarla en los comentarios. Y recordad que si tenéis preguntas o estáis atascados con vuestro juego, preguntad desde la sección de contacto y así podré resolverlas o crear posts relacionados, al fin y al cabo ¡los lectores sois vosotros!