Tutorial de pixel art y animación casera (I)

El dibujo al píxel es un coñazo de cojones, hay que tener eso claro. Lo que en un principio era la única forma de realizar gráficos resultones utilizando los limitados recursos de los ordenadores y consolas de hace años ha acabado convirtiéndose en el sumun de la añoranza de unos tiempos mejores. Muestra de ello es la cantidad de juegos que salen últimamente y que utilizan esta vertiente artística de forma premedita y con alevosía con la intención de atraer al público haciendo uso tan solo con el tufillo old school que desprenden.

Por motivos que no vienen al caso he realizado una pequeña animación artesanal de un señor corriendo, y he pensado en compartir con vosotros mis humildes conocimientos en la materia para que respetéis a esos artistas de la baja resolución y os compadezcáis de esos problemas de túnel carpiano que han afectado a tantos animadores en su agotador cometido..

No hace falta ser un artista del copón ni un dibujante nato para embarcarnos en estas historias. Un poco de sentido común y algo de inventiva, amén de una paciencia de santo, son las pocas herramientas que vamos a necesitar para realizar unos monigotes dignos. Hago especial hincapié en lo de la paciencia. Realizar varios fotogramas y encadenarlos de forma coherente pintando contornos prácticamente píxel a píxel no está al alcance de todo el mundo. Siempre hay triquiñuelas para agilizar un poco algunas tareas repetitivas usando trozos de sprites de aquí y allá o utilizando referencias de otros trabajos, pero el concepto de “frankensprite” que cuño propio lo dejo para otro momento.

En mi caso, he realizado una animación de un monigote corriendo. Lo primero que hemos de tener en cuenta es la resolución a la que pretendemos hacerlo. Es un verdadero arte lograr que con unos pocos píxeles se puedan reconocer los pequeños detalles del cuerpo, cosa que se consigue con la práctica a la hora de realizar los coloreados y sombreados. Unos 50 píxeles de alto es lo que he calculado de altura, o lo que es lo mismo, algo relativamente pequeñajo aunque manejable, como la minga de un chimpancé. Para que hagáis el cálculo, por ejemplo la altura de Ryu en el Street Fighter Alpha es de unos 75 más o menos.

El esbozo:

Si poseéis una tableta gráfica, la suficiente visión de conjunto, o simplemente lo que tenéis entre manos es una animación muy simple, podéis saltaros este paso. He dibujado sobre papel los frames que he considerado necesarios para que la animación sea medianamente fluida, lo cual determinará en gran medida la calidad del acabado final y la sensación de movimiento. No es lo mismo ver correr a Megaman en la Nes que a Alucard en Symphony of the Night, por decir algo, aunque aquí la cosa va más por las necesidades de cada plataforma en concreto más que otra cosa, pero ya me entendéis.

Con seis fotogramas va que chuta la cosa. Más adelante veréis que han acabado siendo ocho, pero esos dos de más no son más que mínimas modificaciones en los ya realizados. Tened en cuenta que en el primer boceto no vamos a aplicar apenas detalle, por lo que no hace falta esmerarse. Sin ir más lejos, he obviado directamente el hacer la cabeza ya que esta se la pongo a posteriori, ya que no la modifico durante toda la animación y no es más que un copypaste del mismo. Tan poco detalle hace falta, que me ha bastado con pasar al ordenador la imagen haciéndole una foto con el móvil. No es necesario más, pues su única función es la de servir de plantilla orientativa. Tenía un amiguete que se hacía la picha un lío con el tema de representar movimientos humanos medianamente realistas y se compró un maniquí de madera de estos que cuando los ves no puedes evitar ponerles los brazos haciendo un corte de manga. Pues con eso el tío hacía maravillas. Y si tampoco os vale, os ponéis delante de un espejo y os ponéis a haceros fotos como un gilipollas haciendo por partes el movimiento que necesitéis.

Contornos:

Por poder usar, os sirve hasta el Paint, pero como uno es casposo hasta cierto punto, he utilizado el auténtico y genuino Photoshop 7. Ediciones posteriores tan solo tienen añadidos que no me sirven para nada en este campo concreto, además que me dan fallos al emularlos en Linux. Decid no al Gimp amigos, no necesitáis pasar ese mal trago de usabilidad nula en un programa.

Doy por sentado que tenéis unos mínimos conocimientos sobre el uso de capas y tal. Para pintorrajear, se usa la herramienta lápiz a un píxel de tamaño, y el bote de pintura para rellenar huecos. Sanseacabó, a lo sumo, en las opciones de herramientas cambiad el tipo de entrelazado al redimensionar imágenes del modo bilineal a aproximación rápida para que los dibujos no se difuminen y jodan la marrana.

Una vez introducida la imagen anterior y redimensionada a un tamaño que cuadre con esos 50 píxeles de altura para el personaje, se coge un color chillón y hala, a pintar todos los contornos principales. La clave para que todo quede bonito es la “regla de la ele”. Me explico. Si hacéis zoom a las imágenes adjuntas, veréis que a la hora de trazar el recorrido de un contorno, el grosor es mínimo y no hay cuñas o picos formadas por tres píxeles, ya que ese efecto afea el conjunto al quedar demasiado marcado el borde. Ejemplo al canto.

Hombre, si no hay más remedio al unirse varias líneas entre sí, pues qué le vamos a hacer, luego lo arreglamos usando una paleta de colores apañada. Recordad utilizar un color fuerte y que sepáis que no se encuentra cerca de ninguna tonalidad que vayáis a usar para evitar engorros a la hora de colorear en profundidad. Por el momento basta con rellenar los huecos con un solo color base para poder trabajar con la animación.

Una vez que esté lista esta tarea de chinos y antes de ponernos a dar detalle al conjunto, habría que ir comprobando que los fotogramas cuadran al visionarlos como animación. Para eso, recortamos cada frame y los ponemos todos como capas en un solo proyecto, de forma que podamos ir moviéndolas de forma independiente y haciendo semitransparente la capa superior, podamos ir viendo cada fotograma paso por paso y así realizar las correcciones pertinentes. Una de las razones por las que he realizado todos los sprites puestos en horizontal en una sola imagen es precisamente para evitar sorpresas de última hora, pues teniéndolos todos de seguido se pueden calcular mejor las alturas y tamaños.

Paleta y sombreado:

Otra de las limitaciones además de la resolución era la cantidad de colores a usar en pantalla. Por ejemplo, un ZX Spectrum poseía 16 colores amén de un montón de limitaciones de cara a poner varios de estos en una misma línea en pantalla, por lo que había que hacer malabares para que algo tuviera cierto colorido. Hoy en día prácticamente no existe restricción alguna, por lo que podemos dotar a un sprite de una paleta con la que podamos hacer prácticamente degradados realistas. Pero claro, estamos haciendo sprites “old-school”. Si cogiéramos un dibujo y directamente lo escaneáramos haciendo mínimos retoques, lo cual es trampa fullera. Como aquí somos masocas, os voy a explicar cómo realizar un sombreado simplón utilizando una paleta limitada.

Lo ideal a medida que vamos seleccionando colores es crearnos una referencia de color para no volvernos majaras eligiendo las tonalidades. En una esquinita de la propia imagen os hacéis una paletilla auxiliar. También es útil a la hora de comparar las gamas cromáticas. Yo suelo utilizar para cada “color principal” 4 o 5 colores como mucho. Es decir, para la camisa elijo 5 tonos de azul, para los pantalones 4 de marrón y así con el resto de tonos principales. De todas formas, si una vez terminado todo no nos convence cómo ha quedado, siempre podemos usar la herramienta “reemplazar color” de Photoshop para modificar alguno en concreto.

El paso previo al sombreado es, evidentemente, quitar esas líneas chillonas de contorno y adaptarlas a la superficie que delimitan. Una vez listo el panorama y tomando como base la coloración de referencia hecha anteriormente, nos ponemos manos a la obra. Igual que se pueden usar referencias externas para currarse los dibujos y animaciones, no es mala idea fijarse en otros sprites o en imágenes reales para hacernos una idea de lo que necesitamos. No es lo mismo sombrear una superficie plástica que la piel humana. Ahí no voy a entrar en detalles, y es que como ya digo, la mejor forma de curtirse en la materia es patearse páginas de estas que recopilan rips de sprites.

Al dar color, debemos tener claro cual es la fuente de luz que supuestamente ilumina a nuestro monigote, o al menos, tener cierta coherencia a la hora de sombrear. Si damos por hecho que la iluminación viene de delante del mismo, tendríamos que ser consecuentes con el hecho de que los colores claros se irán tornando oscuros a medida que coloreemos las partes que están en el lado contrario. También podemos imaginar que la iluminación es global, es decir, que viene de todos lados, por lo que las sombras generadas serán producto de las propias extremidades o texturas del personaje. En mi caso, he optado por ese sistema, y como podéis ver, por ejemplo la camisa está iluminada en las partes prominentes, como la chepa o el pecho, mientras que se generan sombras en los pliegues y debajo de las extremidades.

Algunos trucos:

Como ya visteis, la cabeza la dejé para más adelante a propósito por varios motivos, estando el más importante relacionado con la representación del movimiento. En cada fotograma, levanto un píxel la meolla entera para luego bajarla en los siguientes de forma que se consiga cierta plasticidad en la animación. Si pusiera la cabeza fija en todos los fotogramas, el efecto sería horrible, os lo aseguro. Otro detalle insignificante pero efectivo es el de moverle una pizca el flequillo en el fotograma en el que da la zancada. Son tan solo dos míseros pixels, pero el resultado final gana mucho tanto con esto como con lo de moverla a diferentes alturas, y se adorna el hecho de que la cabeza sea un sprite totalmente estático.

También hablé antes sobre el hecho de que empecé planificando todo con 6 sprites y han acabado convirtiéndose en 8. He cogido los dos sprites clave en los que el personaje cambia de pie la zancada. Al pensar un poco en cómo corren algunos personajes de dibujos animados, existe un pequeño lapso de tiempo en ese instante de forma que la carrera no resulte monótona y parezca que susodicho esté esforzándose al pegarse la carrera. Teniendo esa idea como base, he cogido sendos sprites y los he modificado mínimamente, cambiando una pizca tan solo los brazos y las piernas por debajo de la rodilla.

Y por fin el resultado final.

Conclusiones y moralejas:

Para realizar todo el procedimiento al completo habré tardado unas 4 horas como mucho haciéndolo con calma y a pequeños ratos. Por supuesto esta cifra es variable, y dependerá tanto de nuestra pericia como de lo que estemos dibujando y el acabado que le queramos dar.

Existen muchísimas otras facetas en esto del pixel-art. El uso de tiles, encadenado de animaciones, fondos estáticos grandes, recursos y efectos… por lo que se podría hablar largo y tendido de la materia. Esto tan solo ha sido un picoteo por encima de los pasos a seguir para realizar una simple animación. Igualmente, cada maestro tiene su librillo, y los pasos que yo he realizado no son ni mucho menos los canónicos, pudiéndose hacer la tarea como a uno de venga en gana. De hecho, conozco a algunos que directamente se ponen a pintar con todo lujo de detalles el sprite desde el principio y por partes, aunque para eso ya hay que ser una máquina de pixelar.

Me gustaría que opinarais sobre el interés que os generan este tipo de artículos prácticos. Servidor no es ni mucho menos un profesional en la materia, pero este tipo de cacharreo me encanta y si tiene cierta aceptación, podría seguir hablando de historias similares. ¿Veo tomates volando hacia el escenario?

Minipunto para el que averigüe a qué personaje he querido representar, lo cual subiría mi autoestima unos cuantos enteros si verdaderamente lo reconocéis.

Filed under: General Tagged: animacion, pixel art, sprites