Tutorial de animaciones de batalla

Este tutorial está hecho para RPG Maker MV, pero es muy posible que funcione parecido en otras versiones. No te voy a enseñar cómo dibujar o cómo usar un programa de dibujo, eso deberías investigarlo por tu cuenta. Explicaré cómo funcionan las animaciones de batalla en el programa y unos trucos que uso yo.

Índice

Imágenes

Para empezar aclararé que usaré la palabra «cel» (de animación) para cada uno de los dibujos distintos que podemos usar en una animación, y «frame» para cada unidad de tiempo en la que se ven estos dibujos en la pantalla. En otros contextos podría llamar «frame» a un «cel», pero sería lioso para esta guía.

Los cels de animación de batalla deben colocarse en una sheet (igual que los sprites, aunque con estructura distinta).

Se guardan en la carpeta de tu proyecto > img > animations. Te habrás fijado que en el RTP (assets por defecto) cada sheet tiene un tamaño diferente. Esto es porque tienen límites máximos, pero las imágenes pueden ser más pequeñas o más grandes según convenga. Te enseño un ejemplo, Claw.png (he cambiado el fondo para que se distingan los cels, pero debería ser transparente).

Cada cel tiene un tamaño de 192 x 192 píxeles.
(Si te parece que es muy poco, tienes razón. Consulta el truco del final si te interesa hacerlos más grandes).
Cada sheet tiene de máximo 5 columnas y 20 filas.
Esto son 860 x 3840 píxeles.
Por tanto, son 100 cels en total.
Cada animación dentro del programa puede usar dos de estas sheets, por lo que puedes usar 200 cels en total.

Por cierto, esto no tiene que ver con las imágenes de animaciones, pero si estás haciendo gráficos tú mismo es posible que te encuentres este problema. Las imágenes de tus enemigos deben tener un número par de píxeles. De lo contrario, las animaciones se verán borrosas, cosa que se nota mucho si tu estilo es pixel art.

Editor dentro de RPG Maker

Esta explicación está resumida de este post, que es de donde lo aprendí. Es para MZ, donde se puede elegir entre el sistema nuevo y el de MV, así que también sirve para MV.

En configuración general, puedes nombrar tu animación, elegir hasta dos sheets que vayas a usar, el máximo de frames que va a durar la animación (lo puedes ir cambiando según lo haces) y la posición que va a tomar con respecto al enemigo (a lo alto, centro, a lo bajo, o toda la pantalla).

No voy a mentir. El editor no es muy cómodo de usar. En la parte avanzada te doy un consejo al respecto, pero de momento tienes que saber cómo funciona.

Primero selecciona un cel en la barra de abajo. Para añadirlo a tu animación, haz doble clic, o clic derecho > nuevo, o pulsa Ctrl N. Fíjate en que en la esquina del cel sale un número 1, esto es porque es el cel 1 de este frame (independientemente de cuál es su posición en la sheet). Si añadieras otro, aparecería un 2, pudiendo añadir como máximo 16.

Por defecto se verá de color claro, esto es porque se añade con modo de mezcla «añadir». Si le das doble clic o clic derecho > editar al cel ya colocado, verás sus propiedades. Por cierto, en español parece que a los cels el programa los llama recuadros.

Si te vas al siguiente frame en la barra de la izquierda, podrás añadir otro cel y editar cada uno de esta manera hasta que la animación quede como quieres. Como guía, te aparece el frame anterior con menor opacidad, para alinearlo bien.

Sin embargo, esto es muy engorroso, incluso para RPG Maker. Por eso están las opciones de interpolación, agrupar y desplazamiento. Personalmente creo que interpolación es el más útil de los tres, pero ya depende de lo que quieras hacer.

Imaginemos que tenemos una animación que va del primer cel al décimo cel, y queremos que cada cel se vea en cada frame durante 10 frames.

Simplemente añade el primer cel como hemos dicho antes, y haz lo mismo con el cel 10 en el frame 10, y pulsa interpolación. Elige de intervalo los fotogramas 1-10, y elige los cels (recuadros) 1 (aunque puedes dejar 16, ya que al sólo tener 1 cel tampoco cambiará nada). Por defecto todas las casillas están marcadas, pero el que nos interesa es Muestra. Pulsa aceptar y ahora el frame 2 tendrá el cel 2, el frame 3 tendrá el cel 3... así hasta 10.

En caso de que el frame 10 tuviera su cel de tamaño 200% e interpoláramos, cada frame el cel iría agrandándose poco a poco. En caso de que las X e Y tuvieran diferente valor, haría lo mismo. Así con cada propiedad.

En cuanto a agrupar y desplazamiento, funcionan parecido. Con agrupar (mal traducido de batch, la verdad) puedes elegir los frames y cels que quieres editar de golpe, dándoles un valor específico (por ejemplo, X = 10, Y = -5). Mientras que con desplazamiento sólo puedes mover la X y la Y, y en lugar de darles un valor absoluto, puedes sumar o restar. Es decir, si escribes X = 3, se sumará al 10 de antes, dando 13. Y si escribes Y = 0, la Y se quedará en -5.

En cualquier caso, si tu método consiste en animar fuera de RPG Maker y luego añadirlo, con saber interpolación tienes suficiente. Yo recomiendo esta manera, ya que editar en RPG Maker no es muy cómodo (y muchas de las opciones, como tamaño o rotación, no sirven para un estilo pixel art). Pero cada proyecto tiene necesidades distintas.

Por último, puedes añadir sonidos y flashes en el frame que elijas, pero creo que esta opción es lo bastante intuitiva para no tener que explicarla. Simplemente añade una entrada, selecciona el número de frame donde quieres que empiece el sonido y/o flash, y elige lo que quieras poner.

Avanzado: truco para hacer animaciones más grandes

Este truco me lo sugirió Cupcakes, y es lo que yo uso para mi juego.

El límite de 192x192 es muy pequeño, y hacer cada cel el doble de grande hace que se vea borroso, lo cual queda mal con pixel art. Por cierto, el problema de las imágenes borrosas ocurre en MV, en VXAce se usa el algoritmo nearest neighbor. Pero si sigue sin convencerte cómo quedan, o sigues queriendo animaciones más grandes sin escalar, puedes usar este truco ahí también.

Lo que yo hago es crear un cuadrado de 384 x 384 (es decir, como cuatro cuadrados de 192 x 192 formando un cuadrado grande) en mi programa de dibujo, hacer la animación ahí, y luego exportar cada esquina por separado.

Pero recordarás que sólo se pueden usar 2 sheets. La idea, entonces, es usar dos esquinas de este cuadrado grande por cada sheet. De esta forma, tenemos disponibles 50 frames, que sigue siendo espacio más que suficiente.

Además, otro truco para agilizar este proceso es crear una plantilla. Realmente, podrías optimizar las sheets, igual que hace el RTP, es decir: si necesitas sólo 10 frames, haces la imagen con dos filas y recortas ahí. Pero si aprovechas todo el alto de una sheet (3840 píxeles)...

Puedes dividir la sheet en dos zonas. En los primeros 50 cels, colocas la esquina superior izquierda de tu animación. En los segundos 50, la esquina superior derecha. Luego en otra sheet, haces lo mismo con las esquinas inferiores izquierda y derecha.

Después, ya en RPG Maker, colocas cada esquina en su sitio, interpolas cada esquina del cel 1 al 50 (y del 50 al 100). Y ahora, cuando necesites cualquier animación de verdad, sólo tienes que copiar esta plantilla en la base de datos y cambiar las sheets. Seguramente tu animación durará menos de 50 frames, en cuyo caso sólo tienes que ajustar este máximo. Y ya lo tienes listo, sólo tienes que trabajar una vez.

Yo me hice estas imágenes de plantilla, con un nuevo color cada 5 cels (no coincide con las otras capturas porque al final me hice una más bonita para mi proyecto final, perdón por la inconsistencia). Tú puedes hacerte la tuya propia si quieres, tan sólo es una forma de cerciorarme de que lo he colocado todo bien después de interpolar.

Y por cierto, ya que estoy aquí, te diré las X e Y que deben tener cada una de las esquinas (las zonas de nuestra animación grande), para que estén centrados.

Por supuesto, esto de la plantilla te puede servir también si en vez de 4 cels formando un cuadrado más grande usas sólo uno. Es una manera de no tener que tocar mucho en RPG Maker y sólo preouparte en tu programa de dibujo.

También puedes hacer otras distribuciones, como 3 cuadrados formando un rectángulo ancho, o un rectángulo alto. O incluso más de 4 cuadrados (pero entonces tendrás menos de 50 frames disponibles). Lo único es que para cada nueva forma que planees tendrás que hacer una plantilla distinta, pero usando interpolación y agrupar no tienes por qué tardar mucho.

Avanzado: cambiar la velocidad de las animaciones

Por defecto todas las animaciones de batalla en RPG Maker van a 15 frames por segundo. Si quieres cambiarlo, necesitas un plugin. Puedes usar mi plugin BF_cosas, y seguramente hay otros que hacen lo mismo, pero te voy a explicar el código por si lo quieres añadir a tu juego con tu propio plugin, ya que no es muy difícil.

Si abres un archivo .js (lo puedes hacer creando un txt y cambiándole la extensión) copia esto. Es mejor si tienes un programa de edición de código como Visual Studio Code o Notepad++.

Sprite_Animation.prototype.setupRate = function() {
this._rate = 4;
};

Lo que queremos sustituir es Sprite_Animation.prototype.setupRate, así que puedes ir a los archivos del juego (rpg_sprites.js específicamente) y cambiarlo ahí, pero no se recomienda. Crear un archivo .js y añadirlo a tu carpeta de plugins es mejor idea.

Por defecto el número que aparece es 4, no 15. Esto es porque el juego va a 60 frames por segundo, por lo tanto cada bloque de 60 frames se divide en 4 partes, en las cuales se reproduce cada una de las unidades de tiempo (frames) de la animación de batalla. Y 60 entre 4 da 15: es decir, la animación se ve a 15 frames por segundo.

No te preocupes si no lo has entendido, a mí también se me hace raro. La cuestión es que this._rate tiene un número que no son los frames por segundo, así que si estás pensando en frames por segundo tienes que calcular. Y es muy fácil. 60 entre [número de frames por segundo que quieras] = número que debes poner aquí.

Esta función no puede usar números decimales, así que si eliges un número por el que 60 no es divisible, tendrás que redondear. Por ejemplo, yo elegí 8fps, que daría 7,5. Pero puse this._rate en 7. Cuanto más bajo sea el número de this._rate, más rápido irá la animación. En mi caso, me gustó más el valor 7 que el valor 8 cuando probé los dos.

Mi plugin hace el cálculo automáticamente de fps > número en el código, redondeando para abajo (por lo que si el número no es divisible, será un poco más rápido, como en mi caso).

Importante: este cambio en los fps no se verá en la preview cuando estés editando tu animación. Esta seguirá reproduciéndose a 15fps. Pero si pruebas una batalla (en prueba de juego) verás que la velocidad ha cambiado. Si no estás seguro de que funcione, prueba a poner un número muy distinto de 4 y te darás cuenta enseguida.

Y hasta aquí el tutorial de animaciones de batalla. 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.