Spritesheets con inkscape mediante layers

Cómo extrañaba programar!!! y cómo extrañaba usar linux!!!!! y ahora que tengo linux y quiero acelarar mi proceso de producción de spritesheets, encuentro la escusa perfecta para programar y usar linux XD

Este pequeño script genera un spritesheet a partir de un archivo svg que tenga los sprites tirados por todas partes en capas!

demo.png

#!/bin/bash

filename="$(echo "$1" | awk -F. '{print $1}')"
h="+"

# ¯\_(ツ)_/¯
if [[ $* == *-v* ]]
then
  h="-"
fi

# readibility counts -python zen
layerList="$(inkscape --query-all $1 | grep layer | awk -F, '{print $1}')"

echo "$layerList" |
  awk -v file="$filename" -v h="$h" '
    {system("inkscape " file ".svg -i " $1 " -j -C --export-png /tmp/" file "-" $1 ".png")} 

    END{system("convert " h "append /tmp/" file "-*.png " file ".png")}

    END{system("rm /tmp/" file "-*.png")}'

Primero, consigue el id de los layers de inkscape,  y los pone en una lista. Itera sobre esta lista, para generar imágenes temporales de cada una de las capas, y luego, usando imagemagick, las concatena, horizontal o verticalmente.

Hice un repo donde voy a ir colando scripts de bash para game development… tal vez lo abandone igual que el resto de mis proyectos lol XD pero… tal vez no o__O igual, si alguien quiere descargar el código, pueden clonarlo desde aquí: https://github.com/VengadoraVG/bash-for-gamedevs

Advertisements

Bump Map desde Inkscape

Qué es un Bump Map?

Es una textura que indica qué tan elevadas o qué tan profundas están ciertas áreas de un objeto en 3D. Dentro de más blanco, más elevado, y dentro de más negro, más profundo.

Es otra forma de calcular cómo rebota la luz en un objeto, y es diferente del mapa normal, que utiliza los valores RGB como si fuera un vector unitario XYZ que indica la dirección hacia la que la luz debería rebotar.

Bump Map vs Normal Map

El normal map es muucho mejor que el bump map, porque permite un espectro más grande de profundidades, pero el bump map es más fácil de pintar a mano :) y esa es la gran ventaja de hacer bump maps. Si tienes un bump map, puedes “bakear” un mapa normal.

Bump Map en Inkscape!! :D

Por desgracia, no basta con pintar áreas blancas y áreas negras, porque cuando el cambio de alturas es muy paralelo, la profundidad no es muy notoria (al menos, cuando usas mapas normales o bump maps). Abajo, está una caja hecha con bump maps desde inkscape, pero sin gradientes…

sin-gradientes

Bump map hecho en inkscape :D

sin-gradientes-3d

Texturizado

Gradientes

Para que las profundidades resalten más, necesitamos poner “gradientes” de colores, estas gradientes se ven como diagonales al renderizarlas.

Los gradientes de inkscape son un desastre D: una de las razones es porque son muy difíciles de usar y personalizar, por eso, en vez de añadir gradientes, le pondremos algo de “blur”

blur-demo.png

Dentro de menos paralela la diferencia de altura, más blur debería tener

Pero esto nos lleva a otro problema: esa transparencia! las ranuras de la madera se pueden ver a través de los bordes de la X de metal, y eso se va a interpretar en blender como un glitch medio raro…

blur-3d.png

Para arreglar este problema, a cada objeto, debemos ponerle de fondo otro objeto de un color de acuerdo a la elevación en la que queremos que termine la diagonal, y asegurarnos que el “blur” no se sale del fondo que le pusimos.

blur-corrected.png

Ahora ya no hay “transparencias”, así que el renderizado no va a tener esos extraños glitches :D

fixed-bump-3d.png

Sombras

Últimamente he estado dibujando en 2D bastante seguido… se ha convertido tan natural, que ahora siento como si fuera un proceso de compilación: tengo una idea, y mis manos la compilan en inkscape (claro, el proceso de compilación es bastante lento x__x).

Mis primeros dibujos eran bien sencillos, sin sombras, sin muchos detalles… me gustaba dejar que la imaginación del observador se inventara el resto :) y esto es bueno, pero… conforme tus ideas van haciéndose más complicadas, necesitas nuevas herramientas para “compilar” tu idea…

noob-showdown

Las sombras son una de las herramientas más poderosas en mi “librería de compilación” lol.

Con las sombras, puedes enfatizar la forma de un objeto! cuando dibujas en 2D, todo es plano, pero con las sombras, puedes darle pistas a la imaginación de los observadores para que asimilen la forma en 3D de tu dibujo.

01

Nunca me han gustado los gradientes, por eso, mis sombras siempre son colores definidos. Así mismo, procuro mantener el conteo de colores bajo, porque… no sé XD siento que así se ve más profesional. Si las sombras de tus dibujos tienen demasiados tonos, cuando quieras dar una pista sutil, es más probable que el observador la ignore.

Iluminación

02

Esa sutileza en el cambio de color que lleva al observador a especular sobre el lugar en el que está nuestro dibujo, es muy complicada de lograr…

hue-iluminacion.png

Recuerdas el vestido blanco y dorado que en realidad era azul y negro? algunos han especulado que esa confusión se debió a que, un trozo “A” de la foto le daba la información a nuestro cerebro de que el entorno en el que se tomó la foto era muy brillante, por lo que concluíamos que el vestido era azul y negro.

Otro trozo “B” de la foto, le daba la información a nuestro cerebro de que el entorno carecía de luz, por lo que concluía que el vestido era blanco y dorado (un dorado muy brillante).

dress.png

Algunos veían el trozo “A”, e ignoraban (involuntariamente) el trozo “B”, mientras que otros veían el trozo “B” e ignoraban (involuntariamente) el trozo “A”.

Bueno, así de poderoso es ese sutil cambio de colores… pero tenemos que ser muy cuidadosos con el “entorno”, porque si nuestro entorno (entorno: el fondo, el ambiente, otros bichitos que también estén en la escena) no está acorde a la iluminación plasmada en el dibujo, la imaginación del observador se confundirá, y concluirá que nuestro dibujo es de un color diferente al que queríamos plasmar.

Estilos

Cuando estaba comenzando a dibujar, leí la regla de oro de la iluminación: Si subes la iluminación, también subes la saturación; si bajas la iluminación, también bajas la saturación.

Entonces, la iluminación y la saturación son directamente proporcionales, qué tanto bajar/subir la saturación en comparación al brillo? eso depende del estilo del dibujo y del material que queremos dibujar.

Toon

He aprendido que, para las zonas iluminadas, subir la saturación para la iluminación, nos da un efecto más “toon”, así que si estamos dibujando algo caricaturezco, debemos subir la saturación bastante.

Luego, hay que ir subiendo gradualmente la iluminación, hasta que “parezca” que el área está más iluminada.

podemos aplicar ese mismo criterio en las áreas no iluminadas! :D

toon.png

Realista

Los cambios de tono deben ser sutiles (para un escenario con iluminación “normal”). Las sombras necesitan menos sutileza… si las hacemos muy sutiles, no se notarán ;)

realista.png

Metálico

En general, los materiales metálicos tienen el brillo y las sombras más fuertes y más definidos.

Por eso, los brillos de los metales deberían ser casi blancos, y más pequeños que los de los materiales suaves.

Lo malo es que, al poner los brillos más pequeños, estos aportan menos información sobre la forma 3D de nuestro dibujo, por eso, yo combino esta técnica con sombras grandes y un poco sutiles.

Como el objeto es metálico, procuro que, tanto la sombra como el brillo, tengan una saturación alta :)

metal

Bueno… esos son todos los estilos que sé hasta ahora XD.

Y bueno… esas son algunas cositas que he aprendido con el tiempo, dibujando en 2D, espero que les sirvan ^__^