Ce site utilise des cookies provenant de Google pour fournir ses services et analyser le trafic.

Votre adresse IP
et votre user-agent, ainsi que des statistiques relatives aux performances et à la sécurité, sont transmis à Google EN SAVOIR PLUS OK
afin d'assurer un service de qualité, de générer des statistiques d'utilisation, et de détecter et de résoudre les
problèmes d'abus.

BUSCA EN EL BLOG
domingo, 8 de abril de
2012
Buscar

Crear y animar un sprite (Tutorial paso a

paso) LARGA VIDA AL PIXEL
Hace lustros aprendimos en Pixels Mil a utilizar Comsigo Promotion para realizar una sencilla animación. El programa a
Pixels mil es un lugar dedicado al
escoger es indiferente pero las bases son siempre las mismas. Así que llega el momento de avanzar un poco más con retro gaming, a los desarrollos indie,
una animación más elaborada. al sonido chiptune y por supuesto, al
pixel art. Bienvenido!
En este post crearemos un sprite y crearemos una animación de carrera.

En el último número de Retromaniac expliqué lo mismo pero con un ejemplo más sencillo . Es la mejor manera de
Tweets por @PixelsMil
poder empezar así que os recomiendo el artículo para realizar algo como lo siguiente.

10 MÁS VISITADOS
Crear y animar un sprite (Tutorial paso
a paso)

Configurar Photoshop
En ese ejemplo, las piernas son muy cortas para facilitar el animado y no empezar demasiado fuerte, así que esta vez lo para Pixel Art : Tutorial
complicaremos un poco. Os animo a probarlo o simplemente curiosear en el proceso, después del salto.

Aprendiendo Pixel Art : Tutorial de

Antes de empezar quiero decir que hay cientos de maneras de trabajar y esta es solo la que uso. Cualquier paso puede introducción
realizarse de varias formas y pido disculpas con antelación por cualquier información que pudiera ser errónea.

Lo primero es crear a nuestro personaje. Vayamos a poner un ejemplo para que el proceso sea más natural.
Supongamos que queremos un protagonista para un plataformas futurista. Debemos pensar que es lo que buscamos y Penguin Adventure BSO
una buena manera de empezar es hacer un boceto con un color y definir así una silueta que nos pueda inspirar. (by Gryzor87)

Configurar Gimp para

Pixel art : Tutorial

Awesome en Pixelsmil !!!

(By Linfocito)

Impresiones: "250 Indie

Podemos empezar a definir esa sombra y tener a un personaje con colores base. Games you must play"

Ambia; Es Domingo!

La importancia de las
paletas de color (tutorial
básico)

Ya tenemos por donde empezar, así que es buen momento para darle unos tonos de luces y sombras. El sprite es muy Tus imágenes con
aspecto Game Boy
pequeño por lo que un color más oscuro para la sombra y uno más claro para las luces, bastarán.
(Tutorial)

Elegimos un punto de luz y nos ponemos a pintar.

BLOGS AMIGOS (primeros

5 más actualizados)
XTREME RETRO
SUPER NINTENDO VUELVE EN
SWITCH ONLINE

TENTÁCULO PÚRPURA
Preparando RetroBarcelona

RetroManiac | Revista de
videojuegos retro
|Videogames Magazine | Indie |
Games | Gratis
Impresiones con Roof Rage; un
Ya tiene mejor aspecto, pero lo cierto es que es demasiado sencillo y sería bueno darle algo más de
juego de lucha pixelado que
personalidad. No hay que dudar a la hora de inspirarse en algo existente. Digo 'inspirarse' no copiar.
disfrutarás en el sofá de casa

Puede parecer lo mismo, pero pienso que no pasa nada por coger ideas de cualquier fuente ya que probablemente esa
☆☆☆EL rincón de Adol3☆☆☆
fuente de la que cogemos la idea puede estar inspirada en otra cosa. La idea de crear algo nuevo e inexistente puede Listado de participaciones para el
acabar por frustrarnos o por crear algo demasiado extraño que al final no funcione. sorteo Sharp FamicomStation

Así que vamos a darle un aspecto más chulesco con unas gafas, una gorra y unas buenas patillas pelirrojas. Además Vicben Games
podemos ponerle algún miembro cibernético. Que tal un brazo biónico a lo megaman, por ejemplo? MEJOR CONSOLA PORTÁTIL
PARA EMULAR

Mostrar todo

RSS

Entradas

Comentarios

Archivo
Ya no es tan sencillo pero aún se puede hacer algo más. Vamos a remozar el brazo y a sustituir las gafas por unas tipo
Archivo
'aviador'. La chaqueta algo más cerrada y unas rodilleras y tendremos listo a nuestro personaje.
 DESTACADOS

Listo, tenemos a nuestro personaje . Por supuesto esto es solo un ejemplo, por lo que está en manos de cada uno el
lograr crear a un personaje carismático o molón.

Llegados a este punto os habréis dado cuenta que el personaje está creado con muy pocos pixels. Este tutorial sirve
para cualquier tipo de sprites sean del tamaño que sean, pero puesto que me gustan este tipo de gráficos y no he
encontrado un tutorial del estilo, me he decidido por hacerlo así (además que es más sencillo y requiere de menos
tiempo)

De todas formas, sé libre de complicar el dibujo tanto como quieras como en el siguiente ejemplo. Lo puedes hacer tan
grande y detallado como quieras pero ten en cuenta que a la hora de animar todo lo que hagamos de más se
nos puede volver en contra.

Crear animación

Ya tenemos a nuestro personaje así que ahora podemos ponernos a animarlo. Una buena manera es dibujar los
movimientos de manera esquemática para trabajar más rápido ya que siempre tendremos tiempo después para
poder detallarlo.

La animación escogida es la de carrera. Una buena manera de no empezar a ciegas es fijarse en el movimiento real ya
sea por un video o por uno de los cientos de tutoriales de animación que corren por la red.

Lo primero que debemos tener en cuenta es que cuando avanzamos una pierna, el hombro y el brazo contrario lo
echamos para atrás. Con esa premisa que parece tan evidente, tenemos la base de la animación.

Ahora hay que elegir cuandos frames (o pasos) queremos para nuestra animación. Lógicamente contra más frames,
más fluídos serán los movimientos. Con 8 frames conseguiremos una animación muy suave mientras que con 4 será
más brusca (pero se parecerá mucho a las animaciones de sistemas antiguos). En este ejemplo crearemos una
animación en 6 frames, aunque acabaremos usando un par más de apoyo.

Empezamos por el primer paso. La pierna izquierda está en el suelo y la derecha flexionada empieza a levantarse. Los
brazos flexionados. Como decía, empezaremos con unos bocetos.

El siguiente movimiento sigue teniendo contacto con el suelo. La pierna izquierda se queda atrás y la derecha pasa
hacia delante. El brazo izquierdo deja de verse.
En este punto los pies ya no tocan el suelo así que hay que levantar el sprite un par de píxeles hacia arriba . La
pierna derecha queda extendida casi por completo y el brazo izquierdo, como dije, queda echado para atrás. El exagerar
un poco este frame le irá bien para darle dinamismo.

Aquí recordamos el primer frame pero cambiamos el orden. Esta vez la pierna derecha es la que toca el suelo y la
izquierda está flexionada. Las rodillas convergen en el mismo punto y los brazos flexionados.

Aquí la pierna derecha se queda atrás y el brazo contrario empieza a asomar. Es buena idea pronunciar un poco el
movimiento de hombros y de cabeza para una animación más pulida. De todas formas cuando definamos el sprite
podremos corregir y definir el conjunto.

Aquí tenemos el frame final. La pierna izquierda extendida y los brazos también. Aquí tampoco toca el suelo por lo que
subiremos el sprite un par de píxeles hacia arriba.

Ya tenemos la animación.

Es momento de verlo en movimiento. Como dije, la animación está compuesta por 6 frames pero si repetimos los
que está en el aire, conseguiremos que parezca que pega unas zancadas más largas. Vamos a verlo.
Ahora podemos empezar a definir los frames. En este punto es importante acabar de pulir los detalles para que la
animación quede lo más limpia posible. Como se puede ver en la anterior animación, muchos de los píxeles bailan ya
que no hemos sido muy cuidadosos.

Es importante dar un color oscuro a los miembros que quedan en la parte de atrás, ya que conseguiremos
diferenciar mejor los movimientos.

Mucho mejor. Aquí se ha tenido en cuenta el giro de la cabeza y el movimiento de las tiras de cuero que cuelgan
de las gafas. Vamos a ver la animación final.

Y listo! Ya tenemos a nuestro héroe correteando y listo para usarlo en un videojuego o simplemente en un gif, por pura
diversión.

Para esto último, podemos añadirle el suelo, un fondo y guardar el trabajo como he dicho, en formato .gif.

Bueno, espero que os sirva esta información o por lo menos os resulte interesante. Si alguien se anima, ya sabe que
puede preguntar cualquier cosa en los comentarios o en el correo de contacto, pixelsmil@gmail.com.

Iniciación | Promotion
Tutorial sencillo | Retromaniac 5

Like 129 people like this. Sign Up to see what your friends
like.

Publicado por Toni

Etiquetas: Pixel Art, Tutoriales

Entrada más Página principal Entrada

 reciente antigua

Suscribirse a: Enviar comentarios (Atom)

No te olvides de los disquetes!

Gracias infinitas a Xsilic por ayudarme con la parte técnica. Con la tecnología de Blogger.