Comunidad orientada al desarrollo de videojuegos

Game Maker Tutorial:Pixel-Art para torpes

Tras los comentarios recibidos en twitter, hoy seguiremos con un capítulo especial del desarrollo de la aventura gráfica, ya que lo dedicaremos a explicar un poco algunas técnicas de dibujo pixel-art, el estilo que se usará en el juego de ejemplo.

Para empezar accederemos a esta web: Photo Editor online

Muchos seguramente tendréis otros programas, como Photoshop o parecidos. En esta ocasión prefiero usar éste, ya que es gratuito y como veis, funciona online sin instalación.ç

1. PREPARACIÓN PREVIA

Para comenzar, tendremos que preparar el lienzo, seleccionando Nueva Imagen y dándole un valor de 64 píxeles de ancho y 128 píxeles de alto. Va a ser el tamaño estandar de nuestro protagonista, llamémosle Náufrago.

imagen_1Este editor, tiene capas para trabajar, son una pieza fundamental, ya que dividiremos todas las partes y distintos colores en capas, para que sea fácil editarlas y trabajar con ellas. Vamos a crear tres imágenes nuevas, ya que van a ser las animaciones iniciales que vamos a implementar al náufrago: Quieto -> Andar 1 -> Andar 2.

Al hacer un personaje simétrico, usaremos la animación de andar a la izquierda, de forma invertida para andar a la derecha. Intentaremos hacer una silueta parecida a la siguiente aberración, colocando el pincel a 4 px y un color “carne”.

2. TRABAJANDO POR CAPAS

Empezaremos con la postura estática. Crearemos una capa para cada parte que nos interese dividir. A la hora de hacer las animaciones, nos interesará esto, ya que podremos copiar por ejemplo la cabeza del sprite 1 y meterlo en el resto de sprites, igual que varios rasgos de la camisa. Con todo el cuidado que podamos iremos dibujando la ropa y la cabeza, cada uno como guste. En cuanto tengamos el primer modelo, copiaremos todo lo que sirva a los otros dos sprites, teniendo en cuenta que los principales cambios en la animación serán los brazos y las piernas, así como el torso (la corbata).

imagen_2

3. SOMBRAS Y LUCES

El secreto del pixel-art y técnicas de dibujo derivadas, es el correcto aplicamiento de la iluminación. Debemos imaginar un punto de luz, como el Sol o una bombilla, por ejemplo en la esquina superior izquierda del personaje. Seguidamente pasaremos a repasar los bordes de cada parte del cuerpo imaginando como afectaría la luz. En la práctica, los puntos más cercanos al borde donde está la luz, tendrán contorno más claro, y los mas lejanos estarán ensombrecidos. Para este ejemplo usaremos 3 tonos en total, aunque es recomendable usar un mínimo de 5 para conseguir efectos más efectivos.

imagen_4

Es indispensable no liarnos con las capas y dibujar donde no toca, y si es posible colocar los efectos de iluminación en capas aparte.

Para este ejemplo usaremos una técnica rápida, usando las herramientas de Iluminar y Ensombrecer con un tamaño de 5 píxeles. Crearemos una copia de cada elemento que vayamos a retocar y trabajaremos sobre ella.

imagen_6

4. TRASLADANDO ELEMENTOS

Una vez realizada la iluminación, empezaremos a pasar elementos a los otros dos sprites. Aunque el próximo paso será mejorar la silueta, que tiene que adaptarse al resultado del primer sprite.

Por ejemplo para este sprite hemos tenido que separar los brazos del resto de la silueta ya que hay uno que pasa por encima de la camisa. Las piernas se han rehecho, pero la camisa y la cabeza son prácticamente las mismas.

5. TOQUES FINALES

Ya tenemos terminados los tres sprites. Yo he tardado alrededor de unas dos horas en montar el tutorial hasta este momento. Como veis, es una tarea árdua y el resultado depende sobre todo del tiempo que le dediques. A la hora de guardar los archivos, lo haremos en dos partes.

Primero guardaremos los archivos .pxd, ya que nos permitirá abrirlos por capas otra vez desde el mismo programa (o .psd) si queremos pasarlos a Photoshop.

En segundo lugar los guardaremos los sprites en PNG, ya que nos mantendrá la transparencia con la máxima calidad.

Tras guardar los archivos, toca probarlos. Crearemos un nuevo sprite en Game Maker Studio y le asignaremos los 3 sprites activando la vista previa a una velocidad baja. En este momento es cuando veremos si coinciden o no, y si la animación requiere nuevos retoques. En este caso he comprobado que hace falta un “frame” más de la imagen inicial con el pie cambiado para que quede bien la animación, así como retocar la altura de la cabeza en los sprites 2 y 3.

imagen_7¡Y por fin hemos acabado! El resultado considero que ha sido bastante mediocre, ya que la animación no queda bien del todo, habría que agregar más frames para conseguir que fuera más fluida además de retocar y pensar mejor el movimiento de los brazos y piernas. En el siguiente tutorial, por fin empezaremos ya a mover al personaje por la isla.

¡Si alguien realiza sprites originales, posteadlos en los comentarios para ver el resultado!

Sprites finales: Descargar

 

, ,

2 thoughts on “Game Maker Tutorial:Pixel-Art para torpes

Leave a Reply

%d bloggers like this: