Tutorial de sprites

Este tutorial está hecho para RPG Maker MV, pero es muy posible que funcione igual en otras versiones (sobre todo MZ). No te voy a enseñar cómo dibujar bonito o cómo usar un programa de dibujo, eso deberías investigarlo por tu cuenta. Explicaré cómo funcionan los sprites en el programa y algunos consejos.

Índice

Tamaño de tiles

El tamaño de los tiles es 48x48 píxeles.

Tu sprite puede ser del tamaño que quieras, pero tienes que tener en cuenta que el tamaño de tiles seguirá siendo el mismo. Esto significa que tu personaje va a tener una hitbox de un solo tile, un cuadrado de 48x48.

Entonces, si tu personaje es gigante, igual se ve raro en ciertos contextos.

Cuando los sprites tienen dos tiles de alto (96 píxeles) o menos, no tendrás problemas. Pero si los haces más altos que eso, algunos tiles de estrella (de esos que puedes caminar por debajo) se verán mal. Hay maneras de evitarlo (que yo tengo que usar), las explicaré en la parte avanzada.

Cuando los sprites son más anchos que 48 píxeles, se centrarán en el tile, tal que así.

Pero como dije antes, la hitbox sigue siendo ese tile en el medio. Así que cuando pones dos sprites juntos, pasa esto:

Se solapan. Tenlo en cuenta. Puedes, por ejemplo, hacer que un NPC ancho tenga dos eventos transparentes impasables a los lados para que tu protagonista no pueda caminar por ahí. Lo único que no recomiendo es hacer a tu protagonista muy ancho.

Y si tu personaje es menos ancho que 48 píxeles, también se centrará horizontalmente (pero no verticalmente).

Siempre recomiendo probar en el programa cómo se comportan los sprites para entenderlo del todo. Por mucho que yo explique, es más fácil comprobarlo uno mismo. Siempre puedes dibujarlo a lo rápido primero.

Formato de la sprite sheet

Esto es importante. Tus sprite sheets tienen que seguir un formato específico, el programa no puede adivinar el tamaño de tu personaje.

Vamos a mirar el RTP (los assets por defecto). Los personajes están en la carpeta de tu proyecto / img / characters. He editado el fondo de esta imagen para explicarla más fácil, pero por defecto tienen el fondo transparente (y así es como deben ser, normalmente).

Todos estos personajes miden 48x48. Los puedes hacer de otro tamaño, pero vamos a empezar por aquí.

Como puedes ver, hay 8 personajes diferentes, 4 arriba y 4 abajo, cada uno tiene una zona propia. Dentro de cada zona, todos tienen la misma organización:

La columna del medio (es decir, el segundo frame de cada personaje), es lo que se verá cuando el personaje esté quieto. Los tres se verán cuando ande (el orden es 1, 2, 3, 2, en bucle).

¡Y sabiendo esto puedes hacer tu sprite sheet! ¿Qué pasa si lo quieres hacer de otro tamaño? Lo único que tienes que mantener es la proporción. Vamos a hacer las cuentas.

Estos sprites RTP son 48x48.
48 x 3 = 144. Esto es el ancho de cada zona de personaje.
144 x 4 = 576. Esto son 4 zonas una al lado de la otra, para hacer 4 columnas de personajes.

48 x 4 = 192. Esto es el alto de cada zona de personaje.
192 x 2 = 384. Esto son 2 zonas una encima de la otra, para hacer 2 filas de personajes.

Entonces, la sprite sheet del RTP es 576 x 384 píxeles.

¿Qué pasa si tu personaje tiene 96 píxeles de alto y 48 de ancho? El ancho se queda igual (576), pero el alto sería así:
96 x 4 = 385. Esto es el alto de una zona.
384 x 2 = 768. Esto es el alto de dos zonas una encima de la otra.

Y así es como se vería. De nuevo, he puesto rectángulos de fondo para que veáis bien las zonas, pero debería ser transparente.

Y sí, cada personaje en la sheet debe ser del mismo tamaño. Si sólo tienes un personaje de un determinado tamaño, debes dejar el hueco transparente correspondiente, como en la imagen anterior. O puedes hacer la otra opción, que explicaré luego.

Es muy importante alinear a tus personajes correctamente. Si están desalineados, se verán mal. No te puedo enseñar a usar programas de dibujo, pero deberías buscar uno que te deje crear cuadrículas personalizadas. Las configuras como el tamaño de tu personaje, y así puedes centrar todos los frames.

En mi caso, Clip Studio Paint no te deja hacer cuadrículas que no sean literalmente cuadradas, así que cuando dibujo a un personaje le pongo una «zona» de fondo, así:

Y después, cuando hago la sprite sheet en un lienzo nuevo, solamente tengo que copiar tanto el personaje como el fondo, y esto me sirve de guía para colocarlo todo bien. Cuando termino, oculto los fondos y listo.

Cada uno tiene su forma de hacer esto, así que encuentra la que más te guste. Yo recomiendo primero dibujar y luego hacer la sheet, porque así puedes previsualizar la animación antes de exportarla.

Animaciones que no son andar

Andar está muy bien, ¿pero qué pasa con las animaciones especiales? A menos que uses un plugin, tus animaciones van a estar un poco limitadas. Básicamente, a 4 frames cada vez. Así es como funcionan algunos sprites en el RTP, vamos a mirar !Chest.png.

Ves que hay 8 «personajes», ¿no?
La forma de animar estos eventos es simplemente elegir uno de estos «personajes» y hacer que «miren» hacia abajo, izquierda, derecha y arriba. Así se verá como que se está abriendo. O al revés para cerrarlo.

De hecho, ves que cada fila de dirección tiene 3 copias del mismo dibujo, ¿verdad? Si estuvieras haciendo tu propio sprite, podrías rellenar sólo la columna del medio y dejar las otras transparentes. Esto se debe a que no necesitas que estos sprites «anden», así que no hace falta inventarse una animación para eso. Eso sí, ten cuidado de no hacerlos andar sin querer. Sólo cambia las direcciones en las que «miran».

En la siguiente imagen resalto qué opciones son esas. Y acuérdate de añadir pausas entre «giros» cuando animas de esta forma.

Técnicamente puedes ir encadenando «personajes» diferentes para hacer una animación de más de 4 frames, ya que puedes it cambiando el gráfico del «personaje», desde aquí o creando nuevas páginas. Y para el jugador, está el comando «cambiar gráficos de actor». Pero esto es bastante pesado y es bastante más fácil usar un plugin de animaciones (como QSprite).

Un detalle importante en el que quizá te hayas fijado. Esta sheet tiene «!» al principio del nombre de archivo. Esto es porque, por defecto, los personajes están todos movidos 6 píxeles para arriba («para que se vean mejor»). Pero para objetos como estos en los que necesites que estén justo en el sitio donde los pones, añade «!» al principio del nombre y listo.

¿Qué pasa si no quieres que por defecto los personajes se muevan píxeles para arriba? Puedes usar mi plugin BF_cosas, que tiene esa opción (esto es lo que yo hago en mi juego, ponerlo a 0). Usando eso puedes ignorar lo de llamar «!» a los archivos.

Si no te apetece usar un plugin, puedes cambiar una línea del código base de tu proyecto. En tu carpeta de proyecto / js / rpg_objects.js, encuentra la línea 6483.

Cambia ese 6 por un 0, y ya está.
No se recomienda cambiar el código de tu proyecto de esta forma, por si acaso la lías y no sabes cómo estaba antes, por eso la gente escribe y usa plugins. Pero para que veas, tienes tres opciones para hacer la misma cosa.

Un personaje por sheet

Es un rollo tener que dejar espacio en la sheet cuando sólo tienes un personaje. ¡Pues no hace falta! Te he engañado para que entendieras las sheets básicas. Pero se puede tener una sheet con un solo personaje, y hay ejemplos en el RTP. Mira !$Gate.png.

Como ves, también usa ! para no moverse píxeles para arriba.

Si añades $ al principio del nombre de archivo, el programa interpretará tu sheet como de un solo personaje. En este caso cada fila tiene 3 copias del mismo frame porque es un objeto, pero también puedes hacer un personaje normal de los que caminan.

Avanzado: sprites muy altos

¿Qué pasa con los sprites más altos de dos tiles (96 píxeles)? Esto.

Así es como está este tile en el editor:

Como quiero que los personajes puedan caminar detrás del segundo tile de la farola, lo pongo como estrella. Pero esto hace que los sprites más altos que dos tiles se vean mal: el tile de estrella se está dibujando encima del sprite, como «debería», sin considerar que no debería cuando el personaje está delante de él.

Hay (supuestamente) plugins que arreglan este problema, pero nunca conseguí que me funcionaran. Puedes investigar por tu cuenta, pero si no te importa hacer eventos, te explico cómo, usando regiones:

Y con esta lógica se pueden conseguir este tipo de tiles estrella. Es un poco peñazo, pero si ya lo tienes bien montado puedes copiar y pegar los eventos cambiándoles solo el gráfico si hace falta.

Consejos adicionales:

Avanzado: más frames

Si necesitas que tus personajes o eventos usen más de 3 frames al andar, o más de 4 moviendo sus direcciones manualmente, necesitas un plugin. Yo personalmente recomiendo QSprite (para MV). Puedes elegir el número de frames, cuántos frames por segundo, animaciones idle y animaciones especiales también.

Aunque usando este plugin tú elijas la lógica de tus sheets (como puedes ver a continuación), igualmente necesitas que cada frame sea del mismo tamaño y estén todos colocados uno justo al lado del otro. QSprite utiliza un programa aparte para elegir cuántas zonas tiene tu sheet. No es superdifícil, pero hay que tener paciencia y leerse todas las instrucciones.

No puedo hacerte aquí un tutorial de QSprite porque tiene demasiadas cosas, y ni siquiera uso todas sus funciones. Pero lo recomiendo. A veces tiene algún que otro fallo inesperado y sin embargo sigue siendo el mejor plugin de sprites que existe para MV (que yo sepa, y he buscado).

También recomiendo dibujar menos de 8 frames, porque vaya trabajazo me costó hacer tantos. Pero aquí ya cada uno...

Avanzado: luces y modos de mezcla

Lo pongo en avanzado pero realmente es muy sencillo. Esta es la forma en la que uso las luces de las farolas: no es un plugin, son eventos. Este truco lo he aprendido del usuario de los foros JohnDoeNews.

Lo primero que hice fue hacer una captura de la farola en mi juego y en mi programa de dibujo ir probando luces hasta que me gustó una. La que me gustó específicamente usa un tipo de capa llamado «Añadir (brillo)» en Clip Studio.

Ahora el truco está en recordar que los sprites se centran a lo ancho y se colocan desde abajo. Si cuando dibujas el sprite tienes debajo el fondo de tu juego y lo alineas todo a la cuadrícula de 48x48, funcionará.

Y luego solamente tienes que hacer un sprite sheet como hemos explicado antes, dejando hueco. Como sólo necesitas un frame, la manera más fácil es multiplicar el ancho por 3 y el alto por 4 y guardar la imagen así (suponiendo que tu frame se ha quedado en una esquina).

Ya en RPG Maker, sólo tienes que colocar el sprite, ponerlo en «encima de los personajes», y añadir «movimiento automático personalizado». Recuerda poner velocidad más alta y frecuencia más alta. Y en ruta sólo tienes que añadir: «Cambiar modo de mezcla». Ahí puedes elegir normal, aditivo, multiplicar y pantalla. En mi caso, aditivo es exactamente lo mismo que añadir (brillo) en Clip Studio, así que selecciono ese. Recuerda desactivar «repetición cíclica» y ya está.

¿Qué pasa si sí necesitas que se mueva cíclicamente? Entonces lo mejor es hacer esta transformación desde otro evento, ya que «Ajustar rutas de movimiento» sirve para cualquier evento del mapa. Haces un evento automático que lo haga y después lo borras con «Borrar evento».

Por cierto, yo con las farolas tuve un problema y es que no puedo colocar la luz justo debajo de la bombilla porque en ciertos mapas uso trozos de farola en eventos debido al límite de capas en los tiles.

Pero se puede arreglar fácilmente... poniendo el evento de la luz a la izquierda y editando el sprite para que tenga espacio a la izquierda que compense esta desviación. Recuerda que los sprites se centran en el tile donde los pones, teniendo esto en cuenta puedes dibujar casi todo lo que te apetezca.

Avanzado: sprites para eventos transparentes

Esto tampoco es difícil, y de nuevo no me lo he inventado yo, sino que es un consejo de Yanfly.

Básicamente, yo uso este archivo llamado $eventos.png con unos cuantos cuadrados con texto. Y si necesito un evento automático transparente en mitad de un mapa, pero quiero dejar de olvidarme cuál es cuál (porque se suelen acumular los eventos transparentes), le pongo este icono de A (y si es paralelo la P, si es transportar al jugador (transfer) uso TRANS, si es para mis tiles estrella uso la estrella...).

Para que no se vea el icono nunca en el juego, solamente tengo que dejar esta primera página con el gráfico A vacía, y hacer la siguiente página, la de verdad, con sus contenidos y sin gráfico. Ninguna de las dos tiene condiciones para activarse, así la página del gráfico A nunca se verá en el juego, pero sí se verá en el programa.

Tiene un inconveniente, y es que cuando abres el evento para editarlo siempre empezará por esta página inútil. Pero realmente no es para tanto, y más si piensas que muchos eventos van a tener muchas páginas que vas a tener que seleccionar cada vez igualmente.

Ya los iconos que uses son cosa tuya, puedes usar los míos o inventarte unos propios.

Y hasta aquí el tutorial de sprites. Si aprendo algo nuevo, quizá lo añada. También es posible que algún dato esté mal puesto, en cuyo caso y si lo pillas dímelo. Pero espero que haya sido de ayuda. Y si me lo quieres agradecer... siempre puedes donar, o jugar a mi juego, que para algo es gratis.