Entendiendo el diseño gráfico para juegos 2D Multidispositivo

Uno de los principales quebraderos de cabeza en la creación de un juego 2D "mobile", es la decisión de si lo quieres hacer multi-dispositivo. Para aquellos que no sepáis de qué hablo, me refiero a programar el juego una única vez y que funcione en los diferentes tipos de teléfonos móviles y tablets existentes.

Dos de las cosas a tener en cuenta en esta decisión son:

Necesito una tecnología/framework que me permita generar mi código para las diferentes plataformas (iOS, Android, etc)
El diseño gráfico y la programación tiene que estar preparado para todas las resoluciones

En este post me quiero centrar en el segundo punto, ya que es una cosa que parece fácil pero que es un todo un mundo. Y digo todo un mundo, porque personalmente nunca he sabido concretar con los diseñadores cómo tienen que hacer sus gráficos para conseguir la ansiada "caja de pandora", sin que tu vida como programador se convierta en un continuo: if (iphone) else if (ipad) else if (nexus) .... Afortunadamente ¡eso se ha acabado!

A día de hoy, son varias cosas las que hay que tener en cuenta para llegar a buen puerto:

Como diseñador, diseña las pantallas a máxima resolución y luego genera las imágenes para esa resolución
Como programador, programa las pantallas pensando un dispositivo concreto, en la resolución de ese dispositivo, y deja que las herramientas hagan el resto

Tengo que aclarar que cuando hablo de resolución como diseñador, hablo en píxeles, y cuando lo hago como programador, hablo en puntos. En la mayoría de dispositivos un píxel es un punto, pero en los iphone4 e ipadretina no. En estos últimos, por cada punto hay 2 y 4 píxeles respectivamente.

DISEÑO A MÁXIMA RESOLUCIÓN
Puesto que existen diferentes relaciones de aspecto (ancho de pantalla dividido por alto de pantalla) y diferentes tamaños de pantalla (smartphone o tablet) necesitamos un diseño que cubra todo eso. A día de hoy, una resolución de 1536x2384 cubre todos los dispositivos (en modo 'portrait'). Pero no te engañes, no todo el área de ese tamaño es zona "jugable", ya que dependerá del dispositivo. Por ejemplo, en un iphone, tan sólo será jugable un área de 1280x1920. Entonces ¿qué pasa con el resto de espacio de mi photoshop? El resto de espacio es para las zonas muertas que cubrirán los diferentes tamaños de pantalla.
Una vez tengas tu diseño, exporta las imágenes en esa resolución y no curres más de la cuenta... Las herramientas del programador le permitirán generar las típicas resoluciones que existen en la actualidad (actualmente con 3 es suficiente): ipadretina (ipadhd), ipad/iphone4 (hd), iphone (normal).

PROGRAMACIÓN A MÍNIMA RESOLUCIÓN
Como programador, lo primero a hacer es generar las imágenes en esas 3 resoluciones (ipadhd,hd,normal, con herramientas como SpriteHelper). Una vez generadas, lo siguiente es fijar un terminal y resolución. En este post voy a utilizar como referencia un iPhone (320x480, recordad que son puntos) y utilizaré CoronaSDK para explicar los diferentes conceptos. En Corona, la resolución se fija mediante el config.lua width = 320, height = 480, scale = "letterbox" A partir de aquí, todo sucede en 320x480 para cualquier iPhone. Pero, ¿y el resto de dispositivos? Aquí es donde está el kit de la cuestión y la clave para entenderlo todo: el escalado. Efectivamente todo se escala. Es similar a cuando vemos una película en modo "cinemascope 16x9" en la tele pero podemos elegir diferentes escalados. Según lo que elijamos, veréis que hay zonas de la película que desaparecen de la pantalla o que quedan bandas negras alrededor (zonas muertas de las que hablábamos antes). En un juego pasa lo mismo: puedes elegir, principalmente, escalar hacia abajo ("letterbox") o escalar hacia arriba ("zoomEven"). Según lo que elijas, así se verá en el terminal diferente para el que se diseñó. Uno de los principales errores es utilizar la relación de aspecto como factor de escalado, ya que provoca deformaciones y no genera el ansiado "pixel perfect". El factor de escala depende del tipo de escalado que elijamos:

Hacia abajo escalan las anchuras, manteniendo toda la imágen en pantalla. En nuestro caso sería 320 entre XXX, donde XXX es el ancho de la resolución del dispositivo en el que queremos desplegar nuestro juego.
Hacia arriba escalan las alturas, provocando que puedan desaparecer imágenes de nuestra pantalla. En nuestro caso sería 480 entre YYY, donde YYY es el alto de la resolución del dispositivo en el que queremos desplegar nuestro juego.

A modo de ilustración, os pongo una figura de nuestro diseño de iPhone comparado con un NexusOne: