El hilo del pixel art

[Fede]

Hola otra vez. :D

Buscando información para el siguiente artículo he encontrado un programita para rotar pixel-art.

Habrá que estudiarlo, pero a simple vista tiene buena pinta.

http://info.sonicretro.org/RotSprite

[blostec]

Sniif que recuerdos el MicroAngelo hace años lo descubrí en un cd de la revista Programación Actual y iba de maravilla para crear iconos.  8)

[shaoo]

Hola, yo tambien soy un aficionado al pixelart, queria hablar sobre el programa este que rota los sprites, bueno eso ya lo hace el graphics gale, solo tienes que seleccionar lo que quieres rotar y en medio de la seleccion te sale una barra larga con un cuadradito en un extremo, si pinchas en el cuadradito se rota la seleccion, que hay de especial en este programa que dices? no lo he probado.

[Fede]

Hola Shaoo.

Pues mira, no lo he probado a fondo, pero según pone utiliza un algoritmo de rotación un 'poco especial' para el pixel-art.

He entendido que, amplia la imagen, luego la rota y al volverla a reducir realiza una comprobación de cada pixel respecto a los adyacentes.

Todo ello sin usar el antialiasing ni inventarse colores nuevos.

En las pocas pruebas que he hecho el resultado es mejor que en el graphics gale.

Aquí está el enlace donde se explica un poco el algoritmo.

http://en.wikipedia.org/wiki/Pixel_art_scaling_algorithms

EDITO:

Acabo de probar el ejemplo de la wiki y con él rota mejor el algoritmo que el graphics gale.

Posteo directamente la imagen de la wiki porque mis resulados han sido muy similares.

Sería, de izquierda a derecha: imagen original, rotada por el graphics gale, y rotada por el algoritmo.



Nunca podrá ser perfecto, pero te facilita bastante la labor si sólo necesita unos pequeños retoques.

[shaoo]

Es cierto, los resultados saltan a la vista!
bueno, aunque el que esta en el centro puede servir para una situacion en la que se recibe un calambrazo.
:)

[JaViS]

muy bueno che, habria que ver si esta el codigo fuente e implementar el mismo algoritmo de rotacion en Bennu. (Juan no me odies) XD

[Fede]

No he querido proponerlo porque no sé si consumirá demasiados recursos.

Además de que el algoritmo no está muy bien explicado.

[Fede]

Los colores.

Salvo que estemos trabajando para un dispositivo antiguo, o por algún motivo queramos hacer sprites con paletas de 8 bits, (menos consumo de memoria y potencia de máquina), veo innecesario y engorroso limitarse sólo a 256 colores.

Para mí esos tiempos ya pasaron. Pero entonces, ¿de qué va este tema?
Pues básicamente de la elección de los colores.

Pecamos mucho de una mala elección de colores.

Veamos la famosa rueda de color.



En ella tenemos colores cálidos: rojos, amarillos y naranjas, y colores fríos: azules y verdes.

Comentario especial se llevan los violetas.

Tendríamos el violeta-rojizo, que tendería a color cálido. Y el violeta-azulado que tendería  a la zona de colores fríos.

Los colores cálidos se deben de usar para las zonas de luz y los fríos para las de sombra.

Esto no quita que en nuestros sprites utilicemos unos u otros colores.

Pongamos el ejemplo del paisaje árido, formado sobre todo por rojizos y el del paisaje nevado, formado por tonos azulados. Difícilmente introduciremos colores opuestos en la rueda de color en este tipo de paisajes.

Otro error es la no elección a priori de los colores que vamos a usar en el sprite, así como su mala elección si lo hacemos.

Aunque pensemos que tenemos todos los colores del mundo, en un sprite de pequeño tamaño, como suele ser lo normal, no es conveniente que lo saturemos con una amplia variación de tonos.

Al tratarse de sprites pequeños debemos incrementar el contraste lo suficiente para facilitar su fácil interpretación así como su atractivo.

Un ejemplo.



(Tamaño natural)



(Ampliado un 300%)

En pequeños sprites los degradados se suelen hacer con pocos colores, pongamos 5 ó 6.

Tengamos en cuenta que si el degradado va de un color cálido a uno frío deberíamos pasar por los colores intermedios. Si no lo hacemos podríamos obtener el gris en alguno de ellos, afeando bastante nuestro trabajo.

Con esto obtendremos que la imagen gane sobre todo en contraste y 'textura' visual.

La primera bola está realizada con el degradado del PhotoShop y tenemos el típico gráfico 'foto realista' de ordenador.

Esto no es lo que buscamos y si aplicamos está técnica a sprites de pequeño tamaño, obtendremos una amalgama de colores difícil de interpretar por el ojo.

La siguiente es la típica mala elección de los colores.

Se han elegido una gama de colores muy difíciles de distinguir. Al estar tan próximos unos colores de otros no obtenemos contraste, y la imagen se nos asemeja  'plana' y sin vida.

La tercena elección de colores es la elección donde ya se siente que la imagen tiene que tener contraste, pero no se llega. El tono más claro no es lo suficientemente claro, y nos quedamos 'cortos'.

La última es la correcta. Se diferencia claramente entre el tono más claro y el más oscuro.

En el perfilado utilizaremos el negro con precaución. En el ejemplo de la bola se ha utilizado el negro para remarcar las sombras y se ha usado el color más oscuro en la zona de luces.

Un ejemplo práctico:





Aquí tenemos el proceso constructivo de una vasija.

Primero creamos el line-art. (Lo estudiaremos en el siguiente capítulo).

Elegimos la paleta de colores.

Damos el tono principal.

Luego vamos añadiendo sombras y luces.

Y por último añadimos detalles y perfilamos.


Comentarios a la vasija:

Como en todos los trabajos, no existe una única forma de realizarlo.

Al estar compuesto por un número tan reducidos de píxeles no queda mucho juego a la improvisación, y es altamente probable que los sprites se parezcan mucho unos a otros.

Los autores más consagrados saben reconocer si un punto está mal puesto o es susceptible de mejora. No es este mi caso.

Lo que se ha pretendido representar aquí es una vasija con sus imperfecciones en el barniz.

Si alguien quiere representarla con las sombras 'correctas' respecto al volumen deberá de reformatear ciertas líneas de sombras que han sido acortadas adrede.

Con esto quiero decir que a veces un posible fallo en el gráfico no es más que una mala interpretación de lo que el artista ha querido plasmar.
En resumen esta vasija no es más que 'mi interpretación' de una vasija.



Y aquí otro ejemplo de lo 'interpreta' el ProMotion con su gradiente de contorno.





Aunque reconozco que igualmente habría que retocarla, sobre todo los detalles y el contorno, no me ha gustado nada el resultado. Pero para gustos los colores.

[shaoo]

muy bueno, yo tengo un cacao con los colores "que pa que", me hago un lio y normalmente siempre me salen sin mucho contraste por que cuando le doy mayor contraste no termina de convencerme y luego me digo joer le tenia que haber dado mas, se lo doy y digo joer no me convence en fin me queda un poco que aprender sobre los colores pero esto que has explicado me sirve.

hace un tiempo hice este:


modelo


no se si tiene los colores correctos o el contraste pero a mi me parecio que estaba bien.

[Fede]

Joder. Muy buena interpretación de la foto. ¿Es para un juego de terror o así? Porque me da una grima que te cagas. Sobre todo al ver que se movía.

Ahora te voy a comentar un poco el trabajo. No te me enojes. :D

Y te recuerdo que soy el tuerto en el país de los ciegos. :D

Lo primero. Este sprite es muuuuy grande. Cuanto más grande, es más difícil, y te puedes permitir mayores fallos. Por lo menos yo lo veo así.

Utilizas 39 colores. ¿Bueno, y qué? :D

Pues me parecen muchos, pero puedes utilizar todos los que te dé la gana. :D
(Este comentario es personal), :D

El problema es que la imagen se ve 'plana'.

He analizados los colores con el GraphicsGale y me ha dado lo siguiente:

- Color más oscuro: 18. (Quitando el outline).

Este lo veo bien.

- Color más claro sobre el lomo: 48.

Aquí tienes el problema.

Salvo que quieras hacerlo así a conciencia, al hacerte la paleta utiliza como mínimo un 80 para las luces.
Guarda del 80 para adelante para los cosas verdaderamente brillantes, como las hogueras,  metales y cristales.

Dibújalo primero así. Y si quieres, luego juega con el brillo, contraste, gamma y lo que quieras, para ver como quedaría.

Siempre tienes tiempo de ajustarlo si inicialmente lo dibujas de esa manera. Pero si de entrada lo haces como lo has hecho, al intentar ajustarlo veras que no se puede.

Los ajustes empiezan a comerse los colores más cercanos y sale un churro.
(Te lo digo porque lo acabo de intentar). :D

Se me acaba de ocurrir que este cerdo está iluminado como si estuviera colgado bajo un tejado, en zona sombría y con luz indirecta.

Ahí si quedaría bien un dibujo tan plano, porque ese tipo de luz mata el contraste.

De todas formas el cerdo te quedó fetén.  :D :D :D

[La momia que fuma]

Salvo que estemos trabajando para un dispositivo antiguo, o por algún motivo queramos hacer sprites con paletas de 8 bits, (menos consumo de memoria y potencia de máquina), veo innecesario y engorroso limitarse sólo a 256 colores.

Hombre, yo tambien....pero puntualizando en el caso de bennu :P

Al poderse usar fpgs de 8 bits con paletas independientes en modo 16 bits, ahorramos memoria (Poco importante en Pc, pero algo que me ayudo a ahorrar bastante ram con el Eeek en Wiz :P) y además podemos modificar las paletas, lo que puede ser bastante útil (vease los tipicos colores alternativos de ropa en los juegos de lucha 2D), para un solo personaje y todas sus animaciones creo que estamos de acuerdo que 256 colores son mas de los que necesitaremos nunca :P

Muy bueno el hilo, karma!

Me ha gustado la utilidad de rotar sprites, hace un buen trabajo guarreando el sprite lo minimo, esta muy bien...sería ideal implementarlo en Bennu como se sugiere, pero viendo como tarda una fracción de segundo en hacer el trabajo imagino que usar el algoritmo en tiempo real sera inviable...lastima :P

[shaoo]

Joder. Muy buena interpretación de la foto. ¿Es para un juego de terror o así? Porque me da una grima que te cagas. Sobre todo al ver que se movía.

Ahora te voy a comentar un poco el trabajo. No te me enojes. :D

Y te recuerdo que soy el tuerto en el país de los ciegos. :D

Lo primero. Este sprite es muuuuy grande. Cuanto más grande, es más difícil, y te puedes permitir mayores fallos. Por lo menos yo lo veo así.

Utilizas 39 colores. ¿Bueno, y qué? :D

Pues me parecen muchos, pero puedes utilizar todos los que te dé la gana. :D
(Este comentario es personal), :D

El problema es que la imagen se ve 'plana'.

He analizados los colores con el GraphicsGale y me ha dado lo siguiente:

- Color más oscuro: 18. (Quitando el outline).

Este lo veo bien.

- Color más claro sobre el lomo: 48.

Aquí tienes el problema.

Salvo que quieras hacerlo así a conciencia, al hacerte la paleta utiliza como mínimo un 80 para las luces.
Guarda del 80 para adelante para los cosas verdaderamente brillantes, como las hogueras,  metales y cristales.

Dibújalo primero así. Y si quieres, luego juega con el brillo, contraste, gamma y lo que quieras, para ver como quedaría.

Siempre tienes tiempo de ajustarlo si inicialmente lo dibujas de esa manera. Pero si de entrada lo haces como lo has hecho, al intentar ajustarlo veras que no se puede.

Los ajustes empiezan a comerse los colores más cercanos y sale un churro.
(Te lo digo porque lo acabo de intentar). :D

Se me acaba de ocurrir que este cerdo está iluminado como si estuviera colgado bajo un tejado, en zona sombría y con luz indirecta.

Ahí si quedaría bien un dibujo tan plano, porque ese tipo de luz mata el contraste.

De todas formas el cerdo te quedó fetén.  :D :D :D

pues el cerdo supuestamente esta en una habitacion y la luz le vendria desde la izquierda, creo que donde va situado y con la iluminacion que le hice no quedara mal, y es cierto, es un poco plano pero de mo mento no supe como darle mas profundidad, respecto a los colores la mayoria de las veces ni me hago paleta, si no que voy cogiendo colores sobre la marcha (como en este caso) sin llevar la cuenta de cuantos llevo y al final me pasa como me ha pasado aqui, que quiza hay demasiados colores, la cuestion es que cuando miras el sprite no lo parece desde luego. a ver si para el proximo consigo ceñirme a los de una paleta de 8 o 16 sin necesitar mas y aplicando lo de los valores que me has dicho a ver que consigo. un saludo!

[Fede]

Salvo que estemos trabajando para un dispositivo antiguo, o por algún motivo queramos hacer sprites con paletas de 8 bits, (menos consumo de memoria y potencia de máquina), veo innecesario y engorroso limitarse sólo a 256 colores.

Hombre, yo tambien....pero puntualizando en el caso de bennu :P

Al poderse usar fpgs de 8 bits con paletas independientes en modo 16 bits, ahorramos memoria (Poco importante en Pc, pero algo que me ayudo a ahorrar bastante ram con el Eeek en Wiz :P) y además podemos modificar las paletas, lo que puede ser bastante útil (vease los tipicos colores alternativos de ropa en los juegos de lucha 2D), para un solo personaje y todas sus animaciones creo que estamos de acuerdo que 256 colores son mas de los que necesitaremos nunca :P

¡Hola Momia! Muy honrado con tu visita.   :D

Precisamente escribí ese comentario pensando en la Wiz. Una consola con grandes recursos gráficos, pero cortita de memoria.  ;D

Se que con 256 colores vamos bien servidos, lo que pasa es que soy un vago y no tengo ganas de andar trasteando con las paletas. Ya me pasó en el Screen Break Time con el modo 7 que tiene que ir forzosamente a 8 bits. En cuanto me descuidaba me salian colores raros.



- Shoo, a mandar, que para eso estamos. :D

Y te repito mi enhorabuena por tu cerdo.

[Drumpi]

Lo cierto es que el comentario sobre el contraste de colores me llamó la atención, porque ya noté anteriormente en algún gráfico que me mandaste tú para el SBTime la falta de dicho contraste (me viene a la cabeza los disparos enemigos del nivel 2, sprites pequeños y un naranja demasiado apagado). Eso es algo que se termina aprendiendo :)

Por lo general, en los juegos se suele exagerar el contraste, para realzar la sensación de relieve, y que se vean mejor las cosas, aun en juegos de guerra en HD, siempre se exageran un poco los tonos para que se vean las cosas.

Aunque tampoco hay que exagerar ;D
Por cierto, de nuevo, felicidades por los escenarios del tercer nivel de SBTime, chapeau :D

[Fede]

Ejem, ejem. Ya te dije cuando haciamos el SBT que no sabía dibujar.  ;D

Ahora por lo menos me sé la teoría. :D