Tutorial de Pixel Art
Crear un sprite de pelea y animarlo:
En este tutorial no revisaremos las tecnicicidades del pixel art, mas bien iremos directo al grano, si quieren saber mas de esta técnica visiten este link: http://es.wikipedia.org/wiki/Pixel_art
Este tutorial solo muestra una forma personal de cómo crear un sprite para un juego de pelea estilo Street Fighter () o The King of Fighters ().
Inicialmente cuando creamos un sprite nuevo es mejor dibujarlo en papel, principalmente para así ahorrar tiempo ya que el proceso puede llegar a ser tedioso o frustrante si se dan cuenta que el personaje no está bien o no es lo que querían.
Las herramientas que necesitaremos para este manual:
1. Lápiz y papel.
2. Scanner o una cámara
3. Un programa que funcione en base a bitmaps o pixeles y que tenga capas y una interfaz de animación cuadro por cuadro. ( PhotoShop, GraphicsGale, ProMotion…)
4. Paciencia y ganas de aprender.
Iremos por pasos:
1º
Bosquejar un dibujo en papel no tan elaborado, mas que nada con una posición inicial que queramos o con un estilo en particular, aquí deciden si lo quieren delgado, musculoso, gordo, pequeño o lo que ustedes se les ocurra.
Yo decidí hacerlo grande y musculoso.
Este dibujo nos servirá como base para nuestro Sprite.
// Si no tienen scanner pueden ocupar una cámara, no importa si es de mala calidad ya que luego escalaremos la imagen
2º
Seleccionamos nuestro bosquejo y lo importamos o lo abrimos en nuestro programa seleccionado, puede ser graphicsgale, photoshop, promotion o el que les sirva.
Luego lo escalamos a un tamaño que nosotros deseemos.
Como vemos ya tiene una especie de apariencia de lo que vamos a ver como producto final pero muy a lo lejos.
3º
Hay personas que después de este paso deciden trazar un las líneas o outlines, eso puede servir para cuando nuestro personaje es estático o no tiene animación.
Yo en este caso voy a colorear las diferentes partes del cuerpo con un color.
En nuestro programa seleccionado creamos una capa nueva, si lo desean pueden ponerle un nombre como esqueleto o base, y empezamos a pintar sobre nuestro bosquejo escalado.
Ahora nos ha quedado la posición inicial que nosotros queremos para nuestro personaje, además le arreglamos un par de detalles para que se viese en una posición más fluida y cómoda.
4º
Ahora es el momento de animar nuestra masa de colores. Para eso en nuestro programa crearemos una capa por cada frame que hagamos. Yo recomiendo utilizar transparencias para entender mejor la fluidez del movimiento como se ve acá.
Nuestro segundo frame es levantando la pierna:
El Tercer frame es el Golpe
Acá podemos ver la unión de los frames:
Algo se entiende de esto. ¿O no?
Ahora iremos agregando frames que van entre nuestros key frames para hacer una animación mucho mas fluida.
Por ejemplo uno que va entre el frame inicial y el golpe cuando el pie esta a punto de dejar de tocar el piso:
Para ahorrar tiempo podemos reutilizar frames, en este caso lo podemos ocupar de esta forma:
FRAME_INICIAL
>
frame_1
>
FRAME_GOLPE
>
frame_1
>
FRAME_INICIAL
Y así quedaría nuestra animación después de ese combo:
Un poco mas fluida, ¿cierto? Pero aun no lo suficiente.
Iremos agregando nuevos cuadros hasta que nuestra sprite quede animado como nosotros queramos.
5º
Cuando tengamos nuestra base lista y animada haremos el delineado de nuestro personaje, esto le dará más carácter, y definición a sus rasgos.
Definimos el primer frame básico, y luego continuamos con cada uno de los cuadros hasta que estén todos delineados, no tiene que ser perfecto, luego limpiaremos las líneas y definiremos ropa y cara.
Así queda nuestro sprite después de terminada esta fase, como vemos aun no esta 100% definido:
Ahora empezamos a definir más los rasgos de este sprite, comenzamos por darle un rostro y definiendo la musculatura:
Ciertos rasgos en esta etapa no tienen que ser necesariamente definitivos, pueden servir como guías para futuros cambios.
Ahora le pondremos pantalones y bototos, es simplemente hacer una línea en la cintura y otra en las canillas.
Ahora llego el momento de pintar a nuestro personaje, le daremos un aspecto algo militar:
Ahora destaca mas y esta agarrando buena pinta, pero los pantalones no parecen mucho pantalones, sino pantys. Le agregaremos algo de textura:
Ahora si, pero quiero darle un rostro mas de malo, el actual parece un niño o huevo, así que le hago una frente mas prominente y unas cejas.
6º
Ahora toca darle volumen, esto lo haremos con sombras. La luz vendrá desde un punto arriba de el, como si fuese la luz de un ring de pelea. Esto nos ayudara a definir mucho más las facciones y músculos.
Ahora no se ve tan plano como antes, al menos no el torso.
Ahora toca darle sombras a los pantalones, recuerden que para dar un buen efecto traten de calcular una sombra proyectada, por ejemplo acá la sombra de sus brazos se proyectan en sus pantalones:
Esta casi completo pero falta algo, el color de piel se ve muy poco vivo, aplicaremos una transición de color con un tono más saturado que el resto del cuerpo:
Esto le da un poco mas de vida, además borre el delineado para quitar la sensación de imagen plana, como si de verdad le llegase luz.
Hacemos el mismo paso con los pantalones:
Nuestro personaje esta listo para salir a patear cabezas.
Aunque si tienen tiempo pueden seguir agregándole detalles y mas colores, arreglando cosas que no les guste, etc.
Yo decidí para el producto final agregarle dos colores para suavizarlo aun mas:
Espero ayude en algo.
Saludos..
Crear un sprite de pelea y animarlo:
En este tutorial no revisaremos las tecnicicidades del pixel art, mas bien iremos directo al grano, si quieren saber mas de esta técnica visiten este link: http://es.wikipedia.org/wiki/Pixel_art
Este tutorial solo muestra una forma personal de cómo crear un sprite para un juego de pelea estilo Street Fighter () o The King of Fighters ().
Inicialmente cuando creamos un sprite nuevo es mejor dibujarlo en papel, principalmente para así ahorrar tiempo ya que el proceso puede llegar a ser tedioso o frustrante si se dan cuenta que el personaje no está bien o no es lo que querían.
Las herramientas que necesitaremos para este manual:
1. Lápiz y papel.
2. Scanner o una cámara
3. Un programa que funcione en base a bitmaps o pixeles y que tenga capas y una interfaz de animación cuadro por cuadro. ( PhotoShop, GraphicsGale, ProMotion…)
4. Paciencia y ganas de aprender.
Iremos por pasos:
1º
Bosquejar un dibujo en papel no tan elaborado, mas que nada con una posición inicial que queramos o con un estilo en particular, aquí deciden si lo quieren delgado, musculoso, gordo, pequeño o lo que ustedes se les ocurra.
Yo decidí hacerlo grande y musculoso.
Este dibujo nos servirá como base para nuestro Sprite.
// Si no tienen scanner pueden ocupar una cámara, no importa si es de mala calidad ya que luego escalaremos la imagen
2º
Seleccionamos nuestro bosquejo y lo importamos o lo abrimos en nuestro programa seleccionado, puede ser graphicsgale, photoshop, promotion o el que les sirva.
Luego lo escalamos a un tamaño que nosotros deseemos.
Como vemos ya tiene una especie de apariencia de lo que vamos a ver como producto final pero muy a lo lejos.
3º
Hay personas que después de este paso deciden trazar un las líneas o outlines, eso puede servir para cuando nuestro personaje es estático o no tiene animación.
Yo en este caso voy a colorear las diferentes partes del cuerpo con un color.
En nuestro programa seleccionado creamos una capa nueva, si lo desean pueden ponerle un nombre como esqueleto o base, y empezamos a pintar sobre nuestro bosquejo escalado.
Ahora nos ha quedado la posición inicial que nosotros queremos para nuestro personaje, además le arreglamos un par de detalles para que se viese en una posición más fluida y cómoda.
4º
Ahora es el momento de animar nuestra masa de colores. Para eso en nuestro programa crearemos una capa por cada frame que hagamos. Yo recomiendo utilizar transparencias para entender mejor la fluidez del movimiento como se ve acá.
Nuestro segundo frame es levantando la pierna:
El Tercer frame es el Golpe
Acá podemos ver la unión de los frames:
Algo se entiende de esto. ¿O no?
Ahora iremos agregando frames que van entre nuestros key frames para hacer una animación mucho mas fluida.
Por ejemplo uno que va entre el frame inicial y el golpe cuando el pie esta a punto de dejar de tocar el piso:
Para ahorrar tiempo podemos reutilizar frames, en este caso lo podemos ocupar de esta forma:
FRAME_INICIAL
>
frame_1
>
FRAME_GOLPE
>
frame_1
>
FRAME_INICIAL
Y así quedaría nuestra animación después de ese combo:
Un poco mas fluida, ¿cierto? Pero aun no lo suficiente.
Iremos agregando nuevos cuadros hasta que nuestra sprite quede animado como nosotros queramos.
5º
Cuando tengamos nuestra base lista y animada haremos el delineado de nuestro personaje, esto le dará más carácter, y definición a sus rasgos.
Definimos el primer frame básico, y luego continuamos con cada uno de los cuadros hasta que estén todos delineados, no tiene que ser perfecto, luego limpiaremos las líneas y definiremos ropa y cara.
Así queda nuestro sprite después de terminada esta fase, como vemos aun no esta 100% definido:
Ahora empezamos a definir más los rasgos de este sprite, comenzamos por darle un rostro y definiendo la musculatura:
Ciertos rasgos en esta etapa no tienen que ser necesariamente definitivos, pueden servir como guías para futuros cambios.
Ahora le pondremos pantalones y bototos, es simplemente hacer una línea en la cintura y otra en las canillas.
Ahora llego el momento de pintar a nuestro personaje, le daremos un aspecto algo militar:
Ahora destaca mas y esta agarrando buena pinta, pero los pantalones no parecen mucho pantalones, sino pantys. Le agregaremos algo de textura:
Ahora si, pero quiero darle un rostro mas de malo, el actual parece un niño o huevo, así que le hago una frente mas prominente y unas cejas.
6º
Ahora toca darle volumen, esto lo haremos con sombras. La luz vendrá desde un punto arriba de el, como si fuese la luz de un ring de pelea. Esto nos ayudara a definir mucho más las facciones y músculos.
Ahora no se ve tan plano como antes, al menos no el torso.
Ahora toca darle sombras a los pantalones, recuerden que para dar un buen efecto traten de calcular una sombra proyectada, por ejemplo acá la sombra de sus brazos se proyectan en sus pantalones:
Esta casi completo pero falta algo, el color de piel se ve muy poco vivo, aplicaremos una transición de color con un tono más saturado que el resto del cuerpo:
Esto le da un poco mas de vida, además borre el delineado para quitar la sensación de imagen plana, como si de verdad le llegase luz.
Hacemos el mismo paso con los pantalones:
Nuestro personaje esta listo para salir a patear cabezas.
Aunque si tienen tiempo pueden seguir agregándole detalles y mas colores, arreglando cosas que no les guste, etc.
Yo decidí para el producto final agregarle dos colores para suavizarlo aun mas:
Espero ayude en algo.
Saludos..
Recomendar no cuesta nada ...