El hilo del pixel art

[Fede]

Tipos de pixel-art

La mayoría de los artistas del pixel-art lo dividen en dos grupos:

-Isométricos.
  Son gráficos en perspectiva isométrica.

-No isométricos.
  El resto de los gráficos.

Aunque parezca una simpleza esta división es  debido a la gran cantidad de personas  que utilizan la vista isométrica. Posiblemente la más fácil de usar en el mundo del pixel.

Veamos algo de la vista isométrica.

El cubo.

Nuestro primer elemento en cualquier gráfico isométrico. Muy útil como ejemplo básico  y a partir del cual mediante el 'tallado' se pueden generar el resto de los gráficos.


(Cubo a tamaño natural)


(Cubo multiplicado X 4)

Como podéis imaginar existen varios modos de dibujar un cubo.
Particularmente he elegido este porque es el que más me gusta.

Observar  que en esta perspectiva podemos ver 3 de las caras del cubo.

Si imaginamos un supuesto foco de luz en la parte superior derecha, debemos de iluminar cada cara teniendo en cuenta dicho foco. Más adelante hablaremos de la iluminación en el pixel-art.

Es por esto que tenemos la cara superior más clara, que es la que le da directamente la luz, la inferior derecha la siguiente en tonalidad, y la inferior izquierda la más oscura.

Adelanto que la elección de los colores es bastante crítica en el pixel-art y que debemos de elegirlos de acuerdo a una idea de 'contraste' de la figura. En un sucesivo tema estudiaremos también el contraste.

Observad como se han aclarado las aristas. Técnica con la cual conseguimos un cubo menos 'puntiagudo' y algo más 'suave'.

Todo esto se analizará en profundidad más adelante.

...Sigamos con nuestro ejemplo.

Ahora que tenemos nuestro cubo preparado, una de las técnicas más sencillas es crear un mega sprite a base de cubos.


(Tamaño real)

Cogemos nuestro sprite y lo ampliamos un 100% por cada pixel que mide de altura. En nuestro caso un 1000% ya que nuestro cubo mide 10 píxeles.

Conseguimos así un megasprite donde cada píxel tiene el tamaño de un cubo.

Al resultado le aplicamos una técnica que se llama 'slope' que consiste en 'tumbar' el gráfico, quedando así (está técnica la suelen tener implementada algunos programas como el GraphicsGale o el Paint):


(Tamaño real)

Guiándonos con el megasprite en una capa trasparente vamos poniendo los cubos:



Y por último quitamos la capa de guía.



Si queremos le podemos dar distintos tipos de textura al cubo, con lo que obtendremos efectos bastante buenos.

Lo adornamos un poco y nos puede quedar algo tal que así:



Las sombras no son del todo correctas, pero nos valen como muestra.


Preguntas, comentarios y sugerencias son bien recibidas.

[SplinterGU]

kama fede!

creo que amerita poner una seccion de tutoriales dentro de recursos.

voy a ver si la creo y vamos moviendo las cosas.

[DCelso]

pero eso no sirve para sprites para juegos, es mas bien para darse un vacile con los colegas, ¿no ? fede. :D

[SplinterGU]

quien dice que no sirve?

[JaViS]

que bueno ver un tema dedicado al pixelart! a mi me gusta mucho :D

tengo mucho pixelart hecho, sobretodo con Graphic Gale, que es, para mi, el mejor programa para eso.

Un saludo!

[Fede]

pero eso no sirve para sprites para juegos, es mas bien para darse un vacile con los colegas, ¿no ? fede. :D

¿Que pasa? ¿Nunca has hecho/planteado un juego isométrico? :D

[Futu-block]

si, y me encantan; el monster max de game boy es la caña...

and no te digo ná del head over hels

[SplinterGU]

El que mas jugue en mi vida fue el "Alien 8", aunque debo confesar que nunca lo entendi, pero como me divertia visitando las salas... eso pasa por comprar copias piratas sin manuales.

[DCelso]

quien dice que no sirve?

Una imagen así to cuadrada en 400x400 y viéndose los cubos ya me vas a decir tu para qué juego vale, como no sea de intro ... :D

[DCelso]

pero eso no sirve para sprites para juegos, es mas bien para darse un vacile con los colegas, ¿no ? fede. :D

¿Que pasa? ¿Nunca has hecho/planteado un juego isométrico? :D

Hombre si fuese un sprite en isométrico 40x40 o así valdría pero así con cubos y eso para poco, como no sea un juego así to retro de 1500x1500 enseñando cubos como pareciendo antiguo pero a lo gigante ...

[Fede]

Mira, pequeño saltamontes.  ;D

Es la primera vez que hago de profesor, si es que esto es hacer de profesor.

Me invento el curso sobre la marcha, y lo único que tengo planificado es una escueta descripción de lo que va a contener el curso.

Todo esto me sirve de práctica a mí también.

Los dos primeros artículos han sido un poco 'plastas' y me tocaba hablar de la isometría.

Como sabrás, el ejemplo más básico lo podemos considerar como un cubo isométrico.

¿Qué quieres? ¿Qué ponga un cubo y ya está?

Incrustando algún gráfico conseguí que el artículo fuera más llamativo y original. Y creé un foco de atención.

Además el ejemplo, más sencillo no puede ser.

Y no es para que hagas un juego de pixelacos tan grandes como los cubos. Es sólo un ejemplo. Y aparte de la práctica sirve como fuente de inspiración.

¿Qué tal si al cubo le añadimos una textura de piedra y lo metemos como mega imagen en el trasfondo de una pirámide? Por ejemplo.

Practicar, practicar, practicar. En eso consiste el entrenamiento de cualquier tarea.

Y deja de compilar tanto y ponte a dibujar, que los gráficos de los juegos que sacamos son de pena. :D

PD. A lo mejor es que como profesor me explico de puta pena.  :'(

[Futu-block]

no te preocupes fede, yo voy a hacer un videojuego de un cubo para que dilley celso se quede tranquilo
lol

[DCelso]

:D, ahh, ahora veo la luz, el tuto era el cubo, joee, que no lo vi desde ese aspecto, ah pues genial, entonces es un gran tuto.
Karma mas mas por ello ;), y no te vengas abajo por nada que te diga nadie, sigue adelante que necesitamos más grafiteros en el foro :)

[Fede]

:D, ahh, ahora veo la luz, el tuto era el cubo, joee, que no lo vi desde ese aspecto, ah pues genial, entonces es un gran tuto.
Karma mas mas por ello ;), y no te vengas abajo por nada que te diga nadie, sigue adelante que necesitamos más grafiteros en el foro :)

Por fin se me entendió. :D

Gracias Dcelso y gracias a todos por los ánimos.


JaVis:

Si eres pixel-artista, pon algo hombre. Pero sobre todo pon el método constructivo, no pongas el gráfico y ya está. Que yo no tengo ni pajotera idea y me estoy partiendo los cuernos para explicar cualquier cosa.  ;D

¿Conoces el Cosmigo ProMotion?

Estoy echandole un vistazo pero me echa para atrás que sólo sea para paletas de 256 colores.

Es por si tienes alguna razón para no perder el tiempo mirándolo. :D

El Graphics Gale también es mi preferido por ahora.

[Drumpi]

Genial el tuto de la semana (o la que sea la velocidad a la que vayas subiendo cosas ^^U), a ver si así me animo yo también y aprendo a hacer cosas decentes.
Karma up.

PD: al final te voy a tener que dar una sección en el otro foro :D