Tutorial de pixel art y animación casera

El dibujo al pixel 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 máquinas de otra época ha acabado convirtiéndose en una perversión mal entendida de unos tiempos supuestamente 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 del tufillo old school que desprenden. Y porque resulta más asequible para el dibujante novato.

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 los 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 embarcarse 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 mentes inquietas. 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” de 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 arcade 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 básica, 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 una aceptable 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 más que otra cosa, pero ya me entendéis.

Con seis fotogramas va más que sobrada la zancada. Más adelante veréis que han acabado siendo ocho, los añadidos 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, pues no la modificaré durante toda la animación y no es más que un copypaste del mismo segmento. Si acaso algún detallito para que los pelos ondéen al viento. 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. Y si tampoco os vale, os ponéis delante de un espejo y os ponéis a haceros fotos a vosotros mismos como un gilipollas haciendo por partes el movimiento que necesitéis. Y luego las subís al Tuenti.

Contornos

Por poder usar, os sirve hasta el Paint, pero como para sufrir ya tenemos MundoReal(TM), 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 GIPMP amigos: no necesitáis pasar ese mal trago que podría dejaros secuelas de por vida a causa de una nula usabilidad.

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 pixel de tamaño, y el bote de pintura para rellenar huecos. Sanseacabó, tan solo un apunte: 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. Para lectores con visibilidad reducida, el de la derecha es el güeno.

Hombre, si no hay más remedio que pintar mucho contorno junto al unirse varias líneas entre sí (véase sobaco del brazo que queda atrá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.

Anuncios

22 comentarios

  1. Qué pasada! Me ha encantado el tutorial! Ya te digo ahora que, por favor, hagas más tutoriales del estilo! A mi el personaje me recuerda a Tom Cruise en Mission Impossible, no sé!
    Un saludo y sigue así!

  2. Aquí tienes a uno al que siempre le van a interesar este tipo de artículos prácticos :) Este es realmente genial. Solo que ni idea de quien es tu personaje :D

    Se te agradecerá si continúas con cosas como esta, son muy interesantes y de mucha utilidad. Un saludo y gracias de nuevo!!

  3. RoSSo, por si te sirve de consuelo quiero que sepas que yo sí había intuido que era Ash, aunque llegue un poco tarde… xD

    Muy bueno el tuto, tío. Si me animo intentaré hacer algún monigote esta tarde, que me ha gustado el asunto este. Por supuesto, espero segunda entrega.

  4. Muy bien ilustrado todo……….aver si me animo y te envío el Sprite que te devía de Vash la Estampida (TRIGUN), aqui a quedado tomo mejor plasmado que en el tutorial de “el banquito”, aunque aqui no le acompañe un bocadillo te tortilla papa XD.
    Empecé aunque no te lo dije en su día a hacer el primer sprite pero con demasiada resolución, ahora lo de los 50 pixeles lo veo mucho más claro. Un saludo.

  5. PD: Averle puesto la motosierra en la mano hombreeeeee XD, eso es como si hago yo un sprite de Spiderman pero pinto al Peter Parker de camino a la universidad. Sorry no me lo he podío aguantar.

  6. Dios santo, cuanto tiempo invertiste en ello, la verdad que es un trabajo artesanal, pero que hay ahora de los programas como flash que permiten hacer animaciones con movimiento en cuestión de segundos, de todas formas te felicito y que bueno que valores a los artistas que como tu se han esforzado cuando no había la tecnología disponible para hacer cosas como estas.

  7. A favoritos va del tirón, ya se me quedaba pequeño el pivot para estas cosas, se agradecen posts de este tipo :)

    PD: A mi me recordó al actor que interpreta a Shane en la serie “the Walking Dead”

  8. No sabes lo bien que me vienen este tutorial, en un principio decidí usar el modelo de Madotsuki de Yume nikki

    Trabaje sobre este personaje y decidi usar en el paint(no veo el photoshop como la herramienta adecuada, aunque se sobre las capas) Al final acabo siendo una horrible aberración porque decidí usar un solo cuadrado y por culpa de los detalles el aspecto era horrible.
    Ahora uso pixeles cuadrados de 4 en el paint, al final hice una una tabla de diferencia de 16×27

    ¿Cual es el problema al intentar proceder sobre esto? Que acabas mareado y no te guías por lo que acabas haciendo desencuadres por los malditos efectos ópticos.
    Otra cosa que he hecho y que me parece bastante interesante es coger algo tan estúpido como una piedra grande y borrar por la mitad para al final crear 2 piedras

  9. Ahora solo te falta volver al mugen y crear algun personaje para poder mostrar aqui :p, el proximo tutorial el frankensprite compadre ;)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s