GameMaker Studio / Sprite sheet

Bienvenidos sean a este post, si bien nosotros vimos hasta ahora hemos creado nuestras propias laminas de sprites o sprite sheets, hoy nos centraremos en como crearlas externamente.

Para comenzar podemos trabajar con editores de sprites creados para hacer esto pero tambien podemos usar algun editor de imagenes pero es un poco mas complicado, por decirlo de alguna manera, uno muy recomendable es aseprite, por opiniones que vi en internet, tiene dos opciones: la version de prueba gratuita por 30 dias y seguro que alguna limitacion (aunque no la informa) y la version paga, les recomiendo comprarlo en steam o gog, si lo compro lo probare y armare un post para hablar sobre el, en este post hablaremos sobre la segunda opcion que es utilizar un editor de imagenes para generar lo citado anteriormente, para este caso vamos a usar a Gimp que es un editor de imagenes muy versatil pero que destaca por ser GRATUITO y sin restricciones, les recomiendo descargarlo desde este sitio en caso de tener Windows:

https://www.gimp.org/downloads/

En caso de manejar Linux les recomiendo instalarlo desde el repositorio de la distro que esten usando, con esto aclarado procedan a instalarlo y ejecutarlo pero antes de comenzar con nuestra imagen vamos a establecer que vamos a hacer.

Para nuestro siguiente proyecto usaremos dos sprites para el jugador con cuatro subimagenes, el primero sprite que crearemos sera para asaltar y el segundo para caminar, nuestro sprite tendra un tamaño de 32 x 64 por cada imagen, en este caso trabajaremos con dos sprites porque haremos una variacion muy importante con respecto a los proyectos anteriores pero no nos adelantemos, pasemos a crear nuestra lamina de sprites y para ello volvamos a nuestro editor GIMP.

En nuestro editor vamos a crear una nueva imagen, esta nueva imagen sera para crear la animacion del salto, para ello seleccionen File -> New o Archivo -> Nuevo, depende con lenguaje lo instalaron, nos aparecera el siguiente cuadro

En este deben seleccionar Anchura como 128 y la altura de 64, el alto va a ser el de nuestros sprites pero el ancho sera el ancho de cada sprite por la cantidad de frames, como seran 4 lo multiplicaremos por 32 dando 128, debemos hacer una modificacion mas y para ello deben presionar la opcion de Opciones avanzadas y nos aparecera el siguiente cuadro

En estas opciones la unica que deben modificar es «Rellenar con» en la cual deben elegir «Transparencia», con esto modificado procedan a presionar Aceptar para crear la nueva imagen, lo siguiente que haremos sera crear los fotogramas, para ello deben usar la herramienta de seleccion y crear una seleccion de 32 x 64 en la posicion 1,1 como se ve en la siguiente imagen

Una vez hecho esto vayan a Editar -> Trazar Seleccion, aparecera el siguiente cuadro

En este nuevo cuadro deberan seleccionar la Anchura de la linea y modificar al valor de 1 px, como se ve en la imagen, una vez hecho esto presionan Trazar para generar el rectangulo, una vez hecho seleccionen dicho rectangulo dibujado, lo cortan, van a Editar -> Pegar como -> Capa nueva, una vez hecho nos aparecera como una nueva seleccion, vuelven a pegar la seleccion anterior como una capa nueva pero ahora van a la caja de herramientas y seleccionen la siguiente

Esta nos permitira mover la seleccion, traten de acomodarlo en la posicion 32,0, una vez hecho volveremos a repetir el paso de pegar como una capa nueva pero esta vez debemos ubicar en 64,0, por ultimo repetimos nuevamente el proceso pero ahora lo ubicamos en 96,0 y con esto debemos quedarnos con algo asi

Y en el margen derecho tendremos las siguientes opciones

Nuestra imagen tendra cinco capas, la creada originalmente (fondo) y las cuatro nuevas pegadas, esto es cada sprite de nuestra lamina de sprites, cada vez que dibujemos un nuevo sprite debemos seleccionar cada capa previamente, vamos a seleccionar la capa llamada Copia Pegada y crearemos nuestro primer sprite, les dejo un ejemplo

La imagen la cree con la opcion de Lapiz y usando el procedimiento anterior de crear una seleccion y trazarla, prueben con varias opciones, lo unico que les recomiendo es buscar entre los cursores la opcion de Pixel y establezcan el ancho de 1px, les paso un par de imagenes con lo mencionado anteriormente

El siguiente paso sera seleccionar a esta imagen y pegarle en la siguiente capa que hicimos, es decir la que seria el frame 2, una vez hecho lo modificaremos para que de la sensacion de que esta cambiando de brazos y piernas, les dejo un ejemplo

La idea es mostrar un poco de diferencia con respecto al frame anterior, vamos a agregar otra animacion como representando que cambio de piernas y brazos, les dejo un ejemplo

Por ultimo vamos a completar el ultimo frame con uno muy parecido al segundo para dar la sensacion que volvemos a cambiar de posicion, les dejo un ejemplo

Con esto tenemos nuestra lamina de sprites creada, les muestro como quedo finalmente

Por ultimo les recomiendo borrar las lineas negras que usamos como referencia para ubicar bien a nuestro sprite, este es el ejemplo que yo pude crear como lamina de sprites para cuando nuestro jugador salte en la pantalla, nuestro siguiente paso sera exportarlo para poder agregarlo en nuestro futuro proyecto, para ello deben ir a Archivo -> Exportar, nos aparecera el siguiente cuadro

Aca le definiremos un nombre para nuestro archivo, en mi caso elegi a pepe-salta.png, para diferenciarlo con el siguiente, presionan Exportar, nos aparecera un nuevo cuadro que usualmente deben dejarlo como aparece y presionan Exportar nuevamente, con esto se genera nuestro archivo, este archivo generado tenganlo a mano porque lo usaremos en el proximo post, antes de continuar debemos repetir todo el proceso para generar otra lamina de sprites para cuando camina nuestro jugador, lo bautice como pepe-camina.png, les dejo un ejemplo de como lo genere

Nota: Recuerden eliminar las lineas de referencia.

Pero cual es el beneficio de hacer esto? si vamos a hacer sprites simples como vimos en los primeros proyectos es recomendable trabajar con el editor interno pero trabajar con un editor externo nos provee mejores herramientas para trabajar, por ejemplo nosotros vamos a tener una mejor paleta de colores para crear los sprites, asi como las herramientas para poder trabajar con las imagenes, es decir que para proyectos mas importantes es recomendable usar este tipo de herramientas, yo no pude encontrar creadores de sprites gratuitos (por lo menos en Windows) pero si encuentro alguno interesante pago o no y puedo adquirirlo armare un breve tutorial.

En resumen, hoy hemos hablado sobre la lamina de sprites o mas conocida como sprite sheet, es el metodo mas usual para crear animaciones en videojuegos, hemos visto como usar a GIMP para poder crear nuestros sprites, hemos visto como queda finalmente y prepararnos para nuestro proximo proyecto, espero les haya gustado sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Nota Final: No se preocupen porque en el proximo post se los paso para descargar a ambos.