Creando sprites para un juego

He visto algunos de los más magníficos artistas, capaces de crear imágenes bellízimas con sus herramientas digitales, intentar crear sprites para un juego, y fracasar en esta tarea.

No es que realmente fracasen, pero a la hora de crear sprites, todos sus conocimientos resultan inútiles en este nuevo micro-mundo de detalles a nivel pixel. Y resulta que crear imágenes tan pequeñas es radicalmente opuesta a crear esas magníficas obras de arte tan coloridas y llenas de detalle.

Muchos creen erróneamente que por tratarse de imágenes tan pequeñas, crear sprites es una tarea fácil. Pero contrario a ello, saber acomodar una imagen en un espacio tan pequeño, y lograr que se vea bien, es todo un arte que se debe ir perfeccionando con la práctica.

Si bien no soy un experto en la materia, he adquirido en mi experiencia con otros artistas algunos conocimientos básicos que ayudarán a romper una enorme pared en la curva de aprendizaje de esta técnica, para que los artistas puedan desarrollar pronto sprites y se apoyen de los programadores para sacar mas rápido un producto de calidad.

Comenzamos entonces con la pregunta más frecuente de los artistas que nunca han hecho un sprite:

¿Cómo puedo crear un personaje completo en un espacio tan pequeño?

Los artistas en general están acostumbrados en trabajar en lienzos de miles de pixeles de ancho y alto para expresar un dibujo en todo su potencial. Cuando les digo que quiero un personaje en un área de 16 pixeles, sus ojos salen de sus órbitas y me lanzan una mirada como si hubiera perdido un tornillo.

He visto personas que pueden abrir un área de pocos pixeles, agarrar la herramienta de lápiz y, poniendo pixel por pixel en el lienzo, crean un personaje de alta calidad en minutos. Este no es el caso de la mayoría, y no les pediré que hagan este proceso hasta que mágicamente consigan dominar la técnica. Por el contrario, iremos por un camino más familiar.

Toma tu editor de gráficos, y en el tamaño que te sientas mas cómodo, diseña un borrador de como quieres que se vea tu personaje en el juego. Para el juego que ahora tengo en mente, el personaje será un pingüino, así que dibujaré los sprites que necesitaré para la animación de caminata:

Al hacer este diseño, es importante tomar en cuenta dos factores:

1. Todos los detalles del personaje (Ojos, boca, manos, pies, armas, accesorios) hazlos en proporciones grandes, o se perderán cuando hagas el sprite, y tu tiempo invertido en ello será en vano.
2. Asegúrate de usar trazos gruesos.

¿Por qué trazos gruesos? Bueno, esta imagen será nuestra guía para hacer el sprite, y la escalaremos al tamaño necesario para guiarnos al hacerlo. En este momento es importante saber de qué tamaño serán los sprites del videojuego.

Tradicionalmente lo ideal, es que el tamaño sea alguna potencia de 2 (1, 2, 4, 8, 16, 32, 64...), esto por la forma en que las computadoras manejan la información, y en tiempos cuando el uso de memoria era limitado y optimizarlo era crucial, se usaron estas medidas como estándar para los gráficos, tradición que es respetada por muchos videojuegos de estilo clásico hasta nuestros días.

Tomando en cuenta esto, usaré las medidas 16x32, que es una de las medidas más usadas en los videojuegos tradicionales. Así, escalamos nuestro pingüino a esta medida, cubriendo lo mayor posible toda el área, aunque se deforme un poco. Más adelante explicaré por qué es importante cubrir toda el área del gráfico.

Para fines prácticos, he escalado todos los sprites en esta entrada a 4 veces su tamaño original para que se puedan apreciar mejor. El gráfico quedará de esta forma:

Yo se, no ha quedado perfecto, pero no te preocupes por ello, pues la intención no era que este fuera nuestro gráfico final al dibujarlo en grande, si no que nos sirviera como guía para dibujar nuestro sprite. Ahora ya con esta referencia, podemos dibujar encima el delineado para nuestro pingüino:

Habrá partes que deberás re-diseñar o completar con algo de creatividad, pero esta guía te ayudará bastante a dibujar el sprite sin tener que hacer el diseño de cero en esta área pequeña. Una vez que tenemos el delineado, rellenamos las áreas del personaje con su color base:

Una alternativa popular a los gráficos de los sprites, es no usar delineado en lo absoluto. Si tomas esta alternativa, tu gráfico quedará algo así:

He puesto un color diferente en las zonas donde termina un área y empieza otra. Este contraste se verá mejor definido cuando agreguemos las sombras, que es el toque final para nuestros sprites.

Tradicionalmente, los sprites son dibujados con un color base, un tono para iluminación y dos para sombras, creando gráficos de gran riqueza visual para estas pequeñas áreas, conservando a la vez sus tamaños optimizados en memoria. Dependiendo si usaste delineado o no, tu gráfico final quedará como uno de estos dos ejemplos:

 

Se repite los mismos pasos para cada uno de los sprites necesarios para el juego. En el caso de la otra parte de la animación de la caminata, la evolución del sprite resultará de la siguiente forma:

Con esto has aprendido las bases para comenzar a crear los sprites para tu juego.

¿Qué otras limitantes debo tomar en cuenta para dibujar sprites?

Si estás haciendo sprites al estilo clásico, hay algunas limitantes que querrás tomar en cuenta, como el no usar ningún nivel de transparencia (alpha) en los pixeles. Si bien hoy día los pixeles semi-transparentes son perfectamente soportados por las computadoras actuales, y usarlos en las esquinas de los dibujos ayudan a hacer una mejor mezcla con el ambiente, tradicionalmente estos pixeles con transparencia no eran soportados, y computarlos era muy costoso para la memoria de las máquinas de aquel entonces, así que si tu intención es hacer gráficos de este estilo clásico, hay que cuidar este detalle.

Otro punto que la gente se pregunta al hacer sprites, es cuantos colores pueden ser utilizados en la paleta del sprite. Esto depende enteramente del estilo que se quiera simular.

Por ejemplo, las consolas de primera generación tenían grandes limitantes gráficas, y normalmente solo cuatro colores eran representados en toda la pantalla por eso, dejando un solo color entero para representar al personaje principal, y poder diferenciarlo en la pantalla.

Ya las consolas de segunda generación manejaban mejor estas limitantes, y podían dibujar hasta cuatro colores cada sprite, creando escenarios mucho más coloridos. Para este estilo, nuestro pingüino en colores base podría quedar perfecto.

Si quieres ya simular consolas de terceras generación, que es lo que hoy día apuntan la mayoría de los juegos "retro", sus limitantes eran mucho menores, y permitían desplegar graficos con muchos colores, permitiendo múltiples colores en un solo sprite, que normalmente eran aprovechados en luces y sombras de distintas tonalidades en los personajes. Aun así, el pequeño tamaño que podían desplegar en pantalla, y las aun limitantes gráficas que aun quedaban en la época, crearon aquel estilo "pixel-art" que aun hoy es muy usado por artistas que quieren aludir a esta época.

Si quieres conocer más detalles técnicos gráficos sobre las distintas plataformas de videojuegos antiguas y sus respectivas limitantes, que llevaron a crear los particulares estilos para cada una, puedes ver esta entrada informativa en Wikipedia (en ingles): http://en.wikipedia.org/wiki/List_of_video_game_console_palettes

Cuidado con el efecto "Bala Perdida"

Anteriormente recalqué la suma importancia de llenar el área completa del dibujo con el sprite, dejando pendiente la explicación para ello. Esto es de suma importancia, debido a que dejar espacios en blanco en el sprite, puede provocar durante el juego un efecto no deseado al que yo llamo "el efecto bala perdida".

¿Por qué le he bautizado con ese nombre? Bueno, si llegaste a jugar estos juegos clásicos, quizá te hayas topado con el siguiente escenario: Estás jugando contra tu hermano menor, y él te lanza un proyectil que pasa rozando "por encima" de tu personaje. Sin embargo, el proyectil marca que te ha impactado y pierdes la partida, mientras tú enojado exclamas "¡Pero si ni me tocó!".

Como podemos ver en la siguiente imagen, si tenemos un sprite que es más pequeño que su área de colisión (Representado en verde), aun cuando el proyectil parezca que no te está tocando, este sí está impactando tu área de colisión, haciendo daño al personaje, aunque aparentemente no debería estarlo haciendo:

Por el contrario, el caso opuesto puede ocurrir también. Podrías tu estar disparando al personaje de tu hermano, y los proyectiles atraviesan su personaje sin hacerle daño. Entonces enojado gritas "¡Eso es trampa!", avientas el control al suelo y corres a tu cuarto a hacer berrinche...

El ejemplo siguiente muestra ese caso, en que el sprite es mayor al área de colisión, y aun cuando los proyectiles parecieran que deberían hacer daño al personaje, estos lo atraviesan sin provocar efecto alguno sobre él.

Es por ello, que es de SUMA IMPORTANCIA que cuando hagas un sprite para un juego, siempre cubras en la mayor medida posible, toda el área del personaje.

Por supuesto, existen de vez en cuando situaciones específicas donde no querrás que todo el sprite esté dentro del área de colisión. Existen técnicas especiales avanzadas para dibujar sprites con una distancia de separación mayor al área de colisión del sprite, y esto permite crear efectos visuales interesantes en muchos juegos.

Por ejemplo, si tu personaje fuera un pingüino afro montando de lado un velociraptor, es posible que no quieras recibir daño si un proyectil toca tu esponjado cabello, o la larga cola o cabeza de tu transporte. Es en casos como este, donde querremos aprovechar un área de colisión menor al sprite completo:

Estas son técnicas avanzadas en las que no entraremos a detalle por ahora, pero podrías querer tomar en cuenta para futuros desarrollos. Por el momento, ya tienes mucho material de inicio para que comiences a practicar el diseño de sprites, y no olvides llenar el área de colisión de tu personaje siempre.

¡Es tiempo de trabajar en equipo, artista y programador, para que saquen adelante esos nuevos videojuegos de alta calidad! ¡Mucha suerte! Y felices trazos.