¿Qué es el lineart?

Entendemos lineart como la base de cualquier dibujo o sprite. No tiene porque ser exclusivamente una “línea” sino que puedes utilizar manchas de color, bosquejos, formas… todo lo que te sea viable para tener una base en la que trabajar. Tener una base consistente es esencial para empezar a trabajar.

A menudo cuando dibujamos a mano alzada en programas pixel tipo Aseprite, las herramientas de dibujo (brush) no nos hacen una linea perfecta sino que nos crean ciertas “irregularidades” en el trazo. Si nos fijamos, podemos ver como el trazo tiene diferentes “grosores” y píxeles que chirrían. A esta irregularidad se le llama Jagging. Según los cánones del Pixelart, esto no está bien. No es un lineart cuidado y denota “dejadez” en el acabado. Normalmente los grafistas solemos solucionar esas imperfecciones eliminando los píxeles muertos. Pero esto lo trataremos más adelante en el apartado correspondiente.

                                                                                                                                                                                                Pixel Art Dark Enchantress Portrait / Steem Monsters Fan Art by Heraclio

En la imagen que tenemos justo encima podemos ver un par de linearts con distintos acabados. Uno basado en sketch-colouring (formas y colores) y otro un poco más detallado que mezcla SC y línea pura. Ambos son estilos totalmente viables.

Sketch-colouring

La técnica del sketch-colouring como su nombre indica, es una técnica que nos servirá para crear y separar elementos/volúmenes de una pieza en pixelart.

Hay dos variantes de esta técnica muy comunes, una de ellas consiste en hacer los volúmenes y formas con los colores correspondientes al sprite (como en la imagen de la bruja de arriba) y otra variante se realiza con colores de alto contraste diferenciados entre si.

Veamos unos ejemplos:

En la figura de la izquierda hemos creado una figura humanoide basándonos solamente en colores vibrantes para separar los objetos pertenecientes al personaje. De esta forma vemos de un vistazo rápido las partes que necesitaremos recrear y además nos servirá para poder distinguir entre capas si tuviéramos que animar. Así que matamos dos pájaros de un tiro.

En la figura de la derecha la cabeza del dragón está diferenciada a través de los colores que forman los volúmenes. De esta forma podemos ver la mandíbula, lengua, dientes, morro, ojo incluso…

Puedes utilizar cualquiera de las dos variantes e incluso combinar ambas, todo depende de ti, tus necesidades y de lo cómodo que te sientas.

Jagging

Como hemos comentado anteriormente, cuando dibujamos a mano alzada con la herramienta de pincel o brush, las líneas no suelen quedar perfectas, si no que aparecen imperfecciones extrañas que hacen que nuestros sprites se vean poco pulidos o su lectura empeorada. A este “fenómeno” se le denomina Jagging y según los cánones del pixel art, esto debe solucionarse No es un lineart cuidado y denota “dejadez” en el acabado. Normalmente los grafistas solemos solucionar esas imperfecciones eliminando los píxeles muertos. 

Si nos fijamos en la siguiente imagen veremos como la línea azul tiene ciertas irregularidades, y en la imagen de la derecha marcado en rojo hemos resaltado los píxeles que creemos que sobran a la hora de hacer una línea limpia y bonita.

Eliminando esos píxeles marcados conseguiremos que la línea sea igual de fina en todos sus ángulos y estaremos un paso más cerca de limpiar el Jagging.

Ahora tenemos que hacer que las curvas y resto de ángulos sean bonitos, no solo el hecho de haber quitado los píxeles sobrantes nos ayudan a tener un lineart correcto sino que además tenemos que “recolocar” los píxeles que están mal. Pero… ¿Cómo sé cuales son los píxeles que debo mover?

Facil, utilizaremos una matemática sencilla. No te asustes… no hay que hacer ninguna operación matemática, simplemente tendremos que contar la cantidad de píxeles mas altos e ir disminuyendo su cantidad, para luego aumentarla nuevamente.

Si nos fijamos en la figura de la izquierda, empezamos con 4 píxeles, luego siguen 3, luego 2 y luego 1. Pero de pronto pasamos de 1 píxel a 2 y luego a 1, para volver a 3… así no conseguiremos en la vida que esa curva sea bonita y veremos que tiene “bultos” o irregularidades.

Para que esto se vea correctamente tendremos que hacer la secuencia de la derecha. 4-3-2-1. Fíjate como no tiene porque ser paulatino, ya que empezamos de 4-1 pasando por todos los números pero en la parte superior pasamos del 4 al 8 sin problemas.

Para eliminar el Jagging pasaremos de más pixeles a menos y de menos a más. Esta solución es aplicable no solo a lineart exterior sino a los contornos y formas descritas en la figura pixelart.

Evitar el Jagging no es cosa solo de los contornos o lineas, en la siguiente figura verás que una forma con su color interior debe también mantener estas proporciones de lineart:

Character by derekyu

Fijate en la figura de más a la derecha. El pectoral del personaje sigue la misma estética matemática que hemos comentado. Pasamos de 4-3-2-1 píxeles y luego retoma. De esta manera conseguiremos que nuestros sprites sean claros, límpios y legibles.

El jagging es algo INEVITABLE, así que no te preocupes porque siempre tengas que ir arreglando este “problema”. Hay programas que minimizan este problema. En Aseprite por ejemplo cuando utilices la herramienta Brush puedes activar la opción “pixel-perfect” y a pesar de que no es tan perfect como dice, te ayudará a no estar tanto rato a la hora de limpiar el jagging.

Aquí os muestro la mayoría de estilos de lineart para pixelart que usaréis en vuestra (espero) fructuosa carrera como pixelartist:

• No Outline: Como su nombre indica, no existe outline. Eso no significa que el jagging no haya sido rectificado.
• Sel-out: El outline del sprite mantiene un punto de luz con respecto a la figura. Allí donde haya luz, la linea será mas clara y donde haya sombra más oscura.
• Colour: Es un lineart simple donde cada parte del sprite tiene un outline de color correspondiete.
• Black out: Uno de los linearts más comunes, donde se resalta el contorno de la figura exclusivamente.
• Black in: A diferencia de Blackout, aquí también usaremos lineas internas de color negro como si de un dibujo a lapiz se tratara.

Antialiasing

¿Qué es el Antialiasing (AA)?

El AA es una técnica que se utiliza en Pixelart para hacer que las lineas, rellenos y formas no tengan un contraste tan duro entre colores. En otras palabras, el AA sirve para difuminar los colores. El problema de esta técnica es que NO sirve para todo tipo de sprites. A continuación veremos unas muestras de sprites con AA y sin AA para que nos entendamos:

En este ejemplo, el Onigiri de la izquierda NO tiene AA, en cambio el de la derecha sí. Como podemos apreciar, el Onigiri de la derecha está más difuminado entre sus colores, lo que hace que la transición entre ellos no sea tan dura como en el onigiri de la izquierda. Con el AA conseguimos suavizar las esquinas y cantos del sprite. También sirve para fundir areas claras con areas oscuras.

Bien, ahora que sabemos mínimamente que es el AA y para que sirve, averiguaremos cuando y porqué usar esta técnica.

Pasemos a ver un caso de estudio. En la imagen de abajo podemos ver a Metaknight en dos versiones. Una con AA y otra sin AA (puedes ver la diferencia y saber cual de los dos tiene AA?)

Ok, ahora que hemos visto cual de las dos tiene AA, podemos observar que tanto con AA como sin ella, el sprite apenas tiene cambios significativos. De hecho sin AA no pierde apenas calidad.

A diferencia de este siguiente sprite, podemos ver como a King Dedede cuando le quitamos el AA pierde todos los detalles posibles:

¿Porqué sucede esto? Es consecuencia del estilo del diseño del personaje. Este se basa en formas muy suaves, con lo que si quitamos todo el AA perdemos los detalles.

En estos sprites de Fatal Fury, podemos ver que el personaje sin AA se lee mucho mejor. Pero con un coste,los detalles son más confusos.

Estos sprites de Disgaea no están hechos con pixelart. De hecho son dibujos escalados y editados con pixelart para que encaje con el estilo del juego. Si quitamos todo el AA perdemos toda la personalidad del sprite, con lo que necesariamente necesitamos que haya AA para suavizar el estilo.

En definitiva, el AA es una técnica de facil ejecución pero de complejo entendimiento, aún así vamos a hacer un repaso de los PRO y CONTRA de usar AA:

ANTIALIAS:

PRO:

• Curvas y colores más suaves en sprites pequeños
• Necesario en sprites grandes

CONTRA:

• Es una técnica tediosa
• Desenfoca sprites pequeños

NO-ANTIALIAS

PRO:

• Los sprites pequeños son más legibles
• Puedes limitar tu paleta
• Más rapidez

CONTRA:

• Creas lineas con Jaggin que tienes que modificar
• Dureza y rigidez en el sprite.

Dithering

El Dithering es una técnica que se utiliza para hacer degradados utilizando colores limitados. Combinando dos colores entrelazados puedes conseguir un tercer color.

El dithering está comúnmente asociado a las primeras etapas del pixelart. Los ordenadores más antiguos solo podían mostrar paletas limitadas de colores. En ese caso los artistas empezaron a utilizar el dithering como solución para simular y engañar al ojo para que pareciera que habían más colores de los que en pantalla se mostraban.

Abusar del Dithering puede provocar que tu pieza en pixelart parezca sucia y granulada. No puedes aplicar esta técnica siempre que quieras por doquier, hay una serie de pautas y condiciones en las cuales funcionará mejor.

A pesar de que el Dithering es algo que a día de hoy se utiliza poco gracias a que las máquinas actuales son capaces de mover millones de colores, hay gente que los sigue usando y por eso nosotros estamos en la obligación de explicarlo.

Estos son los tipos de Dithering más utilizados. Como puedes ver, van desde puntos, a cruces. Cuanto más juntos sean los patrones más posibilidad de oscurecer hay. Normalmente se hacen mezclas de patrones para generar diferentes tipos de degradado.

Puedes elegir cuantos niveles de Dithering vas a utilizar. Cuantos más utilices, más posibilidad hay de crear un degradado suave.

En este caso se han llegado a utilizar hasta 8 tipos de dithering para conseguir un degradado suave.

¿Dónde debería utilizar Dithering?

• Degradados: es una forma fácil de generar degradados sin tener que hacerlo “manualmente”.
• Cosas que no vayan a animarse: Si tienes un objeto animado y este utiliza dithering piensa que vas a tener que animar esa cantidad de pixeles en cada fotograma. En cambio si no está animado… 
• Texturas: Sucede lo mismo que con las imágenes no animadas.
• Limitaciones de color: Si tu proyecto está limitado por colores, posiblemente debas tener en cuenta añadir Dithering.
• Fondos (Backgrounds) Cielos, espacios y otro tipo de espacios abiertos para que no parezcan vacios.

PRO:

• Bueno para limitaciones de color
• Genial para cielos y espacios vacios

CONTRA:

• Sensación de suciedad y granulado
• Tedioso a la hora de trabajar
• Texturas innecesarias
• Innecesario cuando hay muchos colores
• Dificil de animar.

Utiliza el Dithering sabiamente. Cuando estamos ante un proyecto sin limitación de color pero quieres utilizar esta técnica, asegúrate de que lo haces entre colores que no tienen un alto contraste entre ellos.

                                                                                                                                                                                                                                       Pokemon Mistery Dungeon

Si nos fijamos en esta imagen veremos como el contraste en la arena hace que haya un degradado más leve y bonito. Lo mismo sucede con la espuma del mar.

Así que trata de hacer dithering en zonas donde pueda haber una transición suave y donde los colores tengan un contraste parecido.