Tutorial de assets gráficos

Este tutorial está hecho para RPG Maker MV, pero es posible que algunas de las explicaciones sirvan para otras versiones también (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 cada uno de los assets gráficos de RPG Maker MV, exceptuando sprites, tilesets y animaciones de batalla (porque ya hice tutoriales sobre cada uno).

Gran parte de esta información está sacada de la Ayuda de RPG Maker (pulsa F1 con el programa abierto para verla), pero también en base a mi experiencia, ya que esta Ayuda la verdad es que no explica muchas cosas.

Índice

Caras

Retratos de los personajes que se encuentran en la carpeta faces. Estas imágenes se usan en los menús y en los mensajes (si decides usarlos). El tamaño de cada retrato es de 144x144 píxeles. Puedes usar transparencia para que tengan otra forma que no sea cuadrada.

Debes organizarlos en una sheet. Pese a que el RTP (assets por defecto) sólo utiliza 4 columas (576 píxeles de ancho) y 2 filas (288 píxeles de alto), lo cierto es que puedes poner tantas filas como quieras, mientras mantengas el ancho de 4 columnas. O bueno, seguramente haya un límite, pero yo no lo he encontrado. Aconsejo que tengas una sheet por cada personaje, o incluso por cada versión de personaje si usas diferentes conjuntos de ropa, y dudo que superes el límite así.

Parallax

Las imágenes parallax (llamadas imagen de fondo dentro del editor) son simplemente imágenes que se enseñan en el mapa debajo de los tiles. Si los tiles A (base) tienen transparencia o dejas algún cuadrado sin rellenar, por defecto se verá de color negro, pero si tienes una imagen de fondo se verá esta imagen.

Si la imagen es más pequeña que el tamaño de tu ventana, se repetirá.

Si marcas bucle horizontal o bucle vertical y un número diferente a 0, la imagen irá moviéndose sola.

Si pones un número positivo en horizontal, se moverá de derecha a izquierda, y si pones un número negativo, se moverá de izquierda a derecha.

Si pones un número positivo en vertical, se moverá de abajo arriba, y si pones un número negativo, se moverá de arriba abajo.

Cuanto más alejado de 0 esté el número, más rápido irá la imagen.

En general es más fácil entender cómo funciona si usas la función y la pruebas. Bucle horizontal o vertical marcado pero puesto a 0 hará que la imagen no quede totalmente fija a la ventana, moviéndose ligeramente según camines por el mapa. Y si no lo marcas, quedará fijado a la ventana

Además, si el nombre del archivo .png tiene «!» delante, la imagen quedará fija al mapa (no a la ventana), de forma que puedes usar una imagen como mapa. ¿Significa esto que es aconsejable usar una imagen parallax en vez de tiles? Como he dicho en el tutorial de tiles, opino que no. Pero nadie dice que no puedas usar esta técnica para ocasiones puntuales.

Esto significa que... a diferencia de lo que yo creía anteriormente, no se necesita un plugin para hacer «parallax mapping», ya que con este truco es suficiente. Sí que para hacer cualquier cosa que no sea suelo necesitarías tiles o eventos. Pero no dudes en investigar los plugins que utiliza otra gente, y comprueba si te interesan o no.

Imágenes

Comandos

Las imágenes de la carpeta pictures son las que se usarán con el comando de evento «Mostrar imagen». También hay otros comandos relativos a estas imágenes: «Mover imagen», «Rotar imagen», «Teñir imagen» y «Borrar imagen». Explicaré qué hace cada uno.

Las imágenes pueden ser del tamaño que quieras, pero lo más lógico es que sean igual de grandes o más pequeñas que el tamaño de la ventana del juego (a menos que planees mover una imagen muy grande y que se vaya viendo poco a poco).

En Número tienes que poner un número que servirá para fijar las capas. Esto es para que si pones otras imágenes, si tienen un número mayor irán encima, si tienen uno menor irán debajo, y si tienen el mismo sustituirán una imagen por otra. El número máximo es 100, espacio más que suficiente.

En Imagen seleccionas la imagen de la carpeta pictures.

En Posición > Origen, eliges si la imagen se colocará teniendo en cuenta la esquina superior izquierda como referencia, o el centro. Abajo puedes elegir la X y la Y, tanto de forma manual como según variables que hayas fijado anteriormente y que puedan depender de los factores que tú quieras.

Si la imagen es igual de grande que tu ventana, ponerlo en Superior izquierda y X 0 Y 0 es lo más fácil. Si quieres centrar la imagen, puede complicarse: en principio con seleccionar Centro y poner la X y la Y a la mitad del ancho y alto de tu ventana respectivamente debería bastar, pero algunas imágenes pueden verse borrosas si alguna de sus dimensiones es un número impar (o al menos creo que esta es la causa). Si te ocurre eso, solamente tienes que usar la opción Superior izquierda, con lo cual tendrás que utilizar un programa de edición de imágenes para saber qué X y qué Y tienes que poner para que quede centrada.

Tamaño tiene el mismo problema que tiene la edición de frames en las animaciones de batalla: si lo pones a cualquier tamaño que no sea 100%, se verá borroso, cosa que queda horrible si tu estilo es pixel art. Yo aconsejo no utilizar esta opción por este motivo, simplemente usa tu programa de edición de imágenes si necesitas agrandar una imagen.

Mezcla te deja cambiar la opacidad y el modo de mezcla (normal, aditivio, multiplicar y pantalla).

Ahora vamos con el comando Mover imagen. Aquí seleccionamos la imagen anteriormente enseñada con Mostrar imagen usando su Número, y elegimos la nueva Posición, Tamaño, o Mezcla, según necesitemos. En Duración elegimos cuánto tarda en fotogramas (si lo ponemos a 1 será instantáneo) y si queremos que el evento espere al final de este movimiento para seguir con los demás comandos o no.

Rotar imagen tiene bastantes menos opciones. Elegimos la imagen por Número y, en Velocidad, si ponemos un número positivo girará en el sentido de las agujas del reloj, y si ponemos uno negativo lo hará al contrario. Si ponemos 0, dejará de moverse, quedándose en la posición actual y no en la original. De nuevo, este tiene el mismo problema que la opción Tamaño: el pixel art se verá borroso y por lo tanto mal.

Además, si la imagen está fijada según Superior izquierda en vez de Centro, el eje de rotación será este punto en la izquierda, así que es posible que no sea útil en según qué casos.

Teñir imagen funciona prácticamente igual a Teñir pantalla. Eliges la imagen por Número y cambias los tonos de color con estos sliders, y opcionalmente puedes hacer este cambio gradual eligiendo la Duración.

Por último, Borrar imagen, que hace lo que imaginas. Las imágenes, una vez enseñadas, no se irán de la pantalla hasta que uses el comando Borrar imagen, incluso si cambias de mapa, así que tenlo en cuenta. Sólo dejan de estar delante de todo cuando abres el menú o vas a una batalla, pero cuando vuelvas al mapa seguirán donde las has dejado.

Otra cosa para tener en cuenta: las imágenes van detrás de los mensajes. Si necesitas una imagen que tape ventanas de mensaje, necesitarás un plugin (aunque sinceramente, se me ocurren pocos casos en los que alguien querría hacer eso).

Animaciones usando imágenes

RPG Maker MV no tiene una función de «mostrar imágenes en forma de animación» (tristemente) pero lo podemos hacer de forma manual. Sólo tenemos que Mostrar imagen en un número específico, añadir un comando «Esperar» de la duración que queramos, y luego de nuevo Mostrar imagen, usando el mismo número pero con otra imagen, y así sucesivamente hasta que enseñemos todas las imágenes de nuestra animación.

Teniendo en cuenta que hay 60 frames (o fotogramas) en un segundo, podemos calcular cómo de larga tiene que ser nuestra espera. Por ejemplo, yo en mi juego enseño todas mis imágenes con una espera de 8 frames entre cada imagen, así es parecido a una velocidad de 8 frames por segundo. Si dibujas tus animaciones (fuera de RPG Maker) a 12 fps, cada pausa debería ser 60 / 12 = 5 frames. Si las dibujas a 24 fps, 60 / 24 = 2,5 frames (pero como no se aceptan decimales, tendrás que elegir entre 2 o 3).

Este método funciona, pero es un poco tedioso de añadir, así que no lo recomiendo si tienes una secuencia larguísima de, yo qué sé, 50 imágenes. Llega un punto en el que es más fácil poner un vídeo, ya tú decides cuál es tu paciencia.

Y también tiene un problema que habrás notado si has probado este método: cuando enseñas varias imágenes en sucesión de esta forma, notarás un parpadeo molesto. Y además, si ejecutas ese evento dos veces, sólo ocurrirá la primera vez, a partir de la segunda se verá fluido.

Esto ocurre porque las imágenes se tienen que pre-cargar. Con una imagen sola no se nota que tarda un momento en cargar, pero cuando son varias seguidas sí. Para pre-cargar imágenes, puedes usar un plugin, pero yo sinceramente he probado algunos y no me han terminado de funcionar, así que hago una simple script call:

ImageManager.reservePicture("nombredelarchivo")

Añade esto a una script call por cada uno de los archivos de imagen que necesites usar. No añadas .png al nombre del archivo, y no olvides las comillas. Después, o bien añade una espera de un frame, o bien pon este script antes de otro comando de evento que estés usando para que no esté pegado a Mostrar imagen: por ejemplo, pre-cargo las imágenes, enseño un diálogo, y luego muestro las imágenes.

De esta forma, las imágenes ya estarán cargadas y no tardarán en mostrarse. Ten cuidado, eso sí, porque si el juego se cierra entre una acción y otra, volverán a no estar pre-cargadas. Yo por eso siempre pre-cargo las imágenes en el mismo evento en el que las voy a mostrar, sin dejar al jugador guardar la partida entremedias.

Por cierto, si esto te pasa alguna vez con otras imágenes (sprites, tilesets...) que sepas que también hay script calls para todos ellos. Los puedes encontrar en js > rpg_managers.js.

ImageManager.reserveCharacter(), ImageManager.reserveFace(), ImageManager.reserveTileset()... No los pongo todos aquí porque es más fácil si vas a mirarlos.

Ventanas de mensaje usando imágenes

Si no te gusta cómo se forman las ventanas de mensaje usando Window.png, que explico más adelante, y quieres usar una imagen específica, estoy segura de que hay plugins que te permiten hacerlo de forma más fácil que lo que voy a explicar ahora. Pero si sólo quieres hacerlo un par de veces para momentos especiales (yo lo uso para un mensaje de móvil, por ejemplo), puedes hacerlo manualmente.

Si simplemente ponemos una imagen y justo después un mensaje con fondo transparente, se verá, pero el mensaje siempre aparecerá un momento después, no al mismo tiempo. Esto se debe a que las ventanas de mensajes, cuando aparece uno por primera vez, hacen una animación abriéndose. Esto ocurre incluso cuando no se puede ver porque la ventana es transparente. Y claro, la animación tarda un poco en acabar.

Si quieres que aparezcan a la vez, sólo tienes que hacer esto:

El código lo que hace es saltar al siguiente mensaje automáticamente, así hace la animación esa primera vez (de forma invisible) y así consigues que la imagen y el siguiente mensaje aparezcan a la vez.

Batalla

Enemigos

Hay dos carpetas donde van las imágenes de enemigos, enemies y sv_enemies. La primera es por si usas batalla de Vista frontal (front view); y la segunda es por si usas batalla de Vista lateral (side view), que puedes activar en Base de datos > Sistema > Opciones, y que mostrará a los actores atacando* además de a los enemigos. En el RTP las dos carpetas parecen idénticas en contenido, pero si te fijas, las imágenes en sv_enemies son un poco más pequeñas. No hay tamaño fijo para los enemigos, en eso funcionan igual que las imágenes (pictures).

Si haces tus propios gráficos (que para eso estás mirando esta guía, imagino), sólo te interesa llenar una de las dos carpetas según el modo que estés usando. Además te doy un consejo que ya di en mi tutorial de animaciones de batalla: asegúrate de que tu imagen tiene un número par de píxeles, o las animaciones de habilidades podrían verse borrosas.

Otro consejo: por defecto, para colocar a los enemigos en su posición en la pantalla en su correspondiente Grupo de enemigos (en la Base de datos), puedes moverlos con el ratón en la vista previa, o darle al botón alinear. Pero si quieres fijar la X y la Y numéricamente porque no te gusta así, o si tienes una ventana de juego de distinto tamaño al por defecto, no tienes opción de colocarlos de manera exacta. Te recomiendo este plugin: EnemyPlacement de LadyBaskerville.

*Otra cosa que quiero mencionar aquí, con respecto a la Vista lateral. A veces siendo solo devs no nos interesa hacer gráficos como si fuéramos un equipo, y nos queremos ahorrar cosas como animaciones de actores. Otros motivos son que queda un poco inconsistente si los actores están animados pero no los enemigos a menos que uses un plugin (y de nuevo, animar todo cuesta mucho tiempo y esfuerzo). Por eso es normal preferir la Vista frontal, y es lo que hago yo con mi juego.

Pero la Vista frontal tiene sus inconvenientes: para empezar, los enemigos no mostrarán animación en sus habilidades (es decir, las que creas en la Base de datos > Animaciones). En vez de eso, cuando ataquen, la pantalla «temblará». Esto es algo que yo no quería para mi juego. También tiene otro inconveniente que comentaré en la sección de Battlebacks.

La solución puede venir de varias maneras. Puedes usar un plugin que muestre animaciones de enemigos en Vista frontal (creo que hay uno de Yanfly que lo hace, pero a mí no me gusta porque mete demasiadas cosas que yo no quería y que no puedes desactivar). Pero yo he encontrado una forma que también require plugins pero es más directa y tienes más control sobre lo que cambias:

Usar una Vista frontal simulada. En Base de datos > Sistema, marcas la opción de Vista lateral, y a tus actores no les pones ninguna imagen (o les pones una imagen transparente) en «[VL] Luchador». Ahora serán invisibles, y las animaciones de los ataques enemigos se verán en la pantalla. También es importante ir a la carpeta system y cambiar las imágenes Shadow2, Weapons1, Weapons2 y Weapons3 para que sean transparentes (pero sin eliminarlas). Pero como por defecto los battlers están al lado derecho de la pantalla, necesitarás un plugin para moverlos, y tienes uno disponible en tu carpeta de RPG Maker (el programa en sí) > dlc > KadokawaPlugins llamado SVActorPosition.

Si además usas otro plugin para cambiar el aspecto del menú de batalla (yo por ejemplo uso SRD_BattleStatusCustomizer) para que salgan las caras de los actores, con SVActorPosition puedes colocar los battlers invisibles para que coincidan con este nuevo menú, y se vean las animaciones encima de cada cara. Además seguramente necesitas evitar este movimiento hacia adelante o hacia atrás que hacen los battlers cuando atacan o les atacan, y para eso puedes usar mi plugin BF_cosas.

Entiendo que si eres nuevo es un poco follón todo esto. También, si no quieres hacerlo como en mi juego (no quieres un menú con caras, por ejemplo), puedes hacer que todos los ataques de enemigos tengan animación de posición «pantalla», de forma que no apunten a ninguno de tus battlers transparentes, y por tanto dé igual dónde los coloques.

Battlers

Dicho todo esto en la sección anterior, e independientemente de mi opinión, puedes usar battlers si quieres. A menos que uses un plugin para manejarlos de otra forma, las sheets tienen que tener una proporción específica, aunque no un tamaño, de forma similar a los sprites. Usaré un battler del RTP como ejemplo.

He puesto colores de fondo para explicarme mejor, pero normalmente el fondo es transparente.

Hay 18 animaciones diferentes, cada una con 3 frames de animación. Se organizan en 3 columnas y 6 filas. En el RTP, cada frame tiene un tamaño de 64x64, y en total la sheet ocupa 576x384, pero lo importante es que cada frame ocupe lo mismo y la sheet se organice en las filas y columnas correctas.

A continuación explico cuándo se reproduce cada animación (esta información la saco de la Ayuda, no tengo experiencia real con esto, así que aconsejo que lo testees). He traducido los nombres yo porque no creo que haya versión oficial de esto.

Estas tres animaciones se pueden asignar de forma distinta en Sistema > Movimientos de ataque [VL], por si añades otros tipos de arma. Y se usan siempre en ataques normales cuando los actores llevan esas armas, no para habilidades.

Algunos movimientos se reproducen una sola vez, con los frames de izquierda a derecha 1-2-3 (animaciones 1, 5, 6, 7, 8, 9, 10, 11, 12, 13). Otros se reproducen en bucle, con los frames en orden 1-2-3-2 (animaciones 2, 3, 4, 14, 15, 16, 17, 18). No los he podido comprobar todos y la Ayuda no los indica todos, pero creo que son así.

En cuanto a las armas que van con las animaciones 7, 8 y 9, las explicaré en su sección (carpeta system).

Como has podido ver, los battlers tienen bastantes limitaciones. No hay forma de añadir más de 3 frames, ni de elegir su velocidad, ni de elegir más libremente cuándo se reproduce cada uno (más allá de recolocar animaciones en la sheet). Si quieres algo más sofisticado, tendrás que buscar un plugin. O, si quieres ahorrarte trabajo, puedes simplemente no usar battlers.

Battlebacks (fondos de batalla)

Hay dos carpetas de fondos de batalla: battlebacks1 y battlebacks2. En el RTP, esto es conveniente porque el battleback1 irá en una capa y el battleback2 irá en otra capa encima del 1, de forma que puedes tener combinar imágenes y tener más variedad de fondos. Pero si vas a dibujar tus propios fondos, es mucho más fácil hacerlos del mismo tamaño de tu ventana y ponerlos en battlebacks1.

En el RTP, los battlebacks son más grandes que la ventana por defecto (ocupan 1000x740, mientras que la ventana es 816x624), ya que están pensados para servir para Vista frontal también, y cuando tiembla la pantalla con los ataques enemigos se ve un trozo que antes no se veía.

Otra cosa para tener en cuenta y por la que no recomiendo Vista frontal es que, si dibujas imágenes del tamaño exacto de tu ventana, en Vista frontal aparecerán movidas hacia arriba (y repetidas), de forma que por abajo se verá una franja con lo que debería verse arriba.

En el caso de mi juego serían 32 píxeles, pero he visto casos de otros juegos donde es otro número (seguramente dependa del tamaño de la ventana). Así que tendrías que comprobar tu caso y dibujar tu battleback teniendo en cuenta esto... (o usar Vista lateral porque esto no pasa, lol).

Fondos de título

De forma similar a los battlebacks, los fondos de título tienen dos carpetas que puedes usar como dos capas: titles1 y titles2. Pero de nuevo, si estás dibujando tú mismo tus fondos, es más fácil usar sólo una de las dos carpetas. Se eligen en Sistema > Pantalla de título > Gráficos.

También de forma opcional se puede añadir el nombre del juego como texto (Escribir título del juego), pero es mucho más fácil añadirlo en la propia imagen, pudiendo así elegir la fuente o usar un logo que hayas creado.

Si quieres cambiar cómo funcionan las imágenes de título para añadir distintas capas con animaciones independientes, tienes que usar un plugin. Yo recomiendo MOG_TitleLayers, que uso para utilizar capas (te deja hasta 10) y animar una de ellas moviéndola de un lado para otro. También permite mostrar animaciones con frames/distintas imágenes, no sólo con movimiento automático.

Si lo que quieres es cambiar de sitio la ventana que aparece en la pantalla de título (Nueva partida, Continuar, Opciones), puedes usar un plugin de la carpeta dlc > KadokawaPlugins llamado TitleCommandPosition. Pero si quieres algo más complejo (que añada opciones o cambie el aspecto de la ventana), necesitas otra cosa. Yo no puedo recomendar nada ahí, porque yo hice el mío propio, y está adaptado a mi juego.

Sistema

Imágenes de la carpeta system. Aquí hay bastantes cosas que tienen su miga, aunque verás que en muchos casos recomiendo pasar un poco de lo que pretende RPG Maker que hagas.

Bocadillos (Balloon)

Estas son las animaciones que se usarán encima del sprite de tus personajes (jugador o evento) al usar el comando «Mostrar icono de globo». Cada frame de animación es de 48x48 píxeles, y cada animación consta de 8 frames, cada una ocupando una fila, con un total de 15 animaciones disponibles, haciendo que la sheet ocupe 384x720. La velocidad de estas animaciones no se puede controlar sin un plugin.

Les he añadido un color de fondo para distinguir bien cada zona, pero de normal el fondo debería ser transparente. Las animaciones se seleccionan en el editor según su nombre:

Del 11 al 15 hay espacio transparente en la sheet para que añadas tú los que quieras. Por supuesto, nada te impide sustituir uno de los 10 primeros por una emoción distinta si no necesitas alguno.

No conozco ningún plugin que dé flexibilidad total (elegir número de frames distinto en cada animación, velocidad...), pero es posible que exista alguno que te venga bien. Yo, en mi caso, si necesitara usar alguna animación de bocadillo, simplemente usaría eventos. Como uso QSprite para animar sprites de forma totalmente personalizada, solamente tengo que crear un evento, hacerlo visible, colocarlo al lado del personaje y reproducir la animación que me haga falta.

Dicho esto, el juego crasheará si no encuentra según qué imágenes de la carpeta system, y no estoy segura de cuáles es seguro borrar. Así que, por si acaso, recomiendo dejar las imágenes como están o sustituirlas por un png transparente si molestan.

Botones (ButtonSet)

Botones que se usan cuando el juego se exporta a Android, y creo que sólo aparecen en los menús de tiendas. Esta es toda la información que aparece en la Ayuda, y como yo no exporto a Android y no tengo manera de testear estas imágenes para ver qué límites tienen, no puedo deciros más.

Números de daño (Damage)

En la batalla, cuando los enemigos o los actores reciben o se curan daño, aparecen números indicando la cantidad. En vez de usar la fuente con la que se escribe todo en el juego, RPG Maker usa esta imagen. Si la fuente de tu juego es muy distinta a la por defecto, probablemente quieras hacer tu propio Damage.png.

Cada número, por defecto, ocupa un espacio de 24 píxeles de ancho por 32 de alto. Empiezan en el 0 y acaban en el 9. Y se organizan en 5 filas, haciendo un tamaño total de 240x160. Sin embargo, si sigues la misma proporción puedes hacer la sheet de cualquier tamaño.

Cada fila hace lo siguiente:

Game over

La imagen GameOver.png es lógicamente lo que estás pensando. Se fija desde la esquina superior izquierda, así que si tu juego tiene un tamaño diferente al por defecto, deberás poner una imagen de ese tamaño.

Dicho esto, a veces los juegos no necesitan enseñar la pantalla de GameOver nunca. Con el comando «Fin de partida» se enseña esta imagen (y suena la música elegida en la Base de datos en Sistema > Música > Fin de juego), pero cuando se termina tu juego puedes simplemente enseñar lo que quieras con otros comandos y luego usar «Ir a la pantalla de título».

Sí que es verdad que el Game Over aparece cuando pierdes las batallas, pero esto puede evitarse si, en batallas que aparecen por eventos («Procesar batalla»), marcas la casilla «Crear excepción al perder». Ahí puedes hacer la escena que quieras con tus eventos y luego «Ir a la pantalla de título».

Eso sí, esto me sirve a mí porque mi juego no tiene batallas aleatorias andando por el mapa. Si tú sí las tienes, es posible que haya algún plugin para cambiar qué ocurre cuando pierdes, pero no puedo recomendar ninguno personalmente.

¡O puedes usar el Game Over normal si quieres! Simplemente creo que manejarlo con eventos da más flexibilidad, dejándote, por ejemplo, mostrar una animación, o dejar al jugador elegir si quiere volver al título o cargar la partida. Incluso puedes hacer que pueda volver a un «checkpoint» sin necesidad de haber guardado.

Iconos (IconSet)

Los iconos que se usan en muchos sitios: habilidades, objetos, armas, armaduras, estados alterados, mensajes si usas los códigos, o en algunos plugins.

El tamaño de cada icono es 32x32, y por defecto se organizan en 16 columnas y 20 filas, haciendo un total de 512x640 píxeles. Al igual que pasa con los retratos, las 16 columnas son fijas y si añades más no podrás seleccionar los iconos, pero puedes añadir o quitar las filas que quieras.

Y, si no te quieres complicar la vida, siempre puedes dibujar encima de la sheet por defecto, que deja espacio para 320 iconos, más que suficientes para la mayoría de juegos. Importante que dejes al menos un espacio vacío para cuando quieras que un estado alterado sea invisible.

Por cierto, quizá no te hayas dado cuenta, porque los iconos del RTP tienen un poco de anti-aliasing, pero a veces estos iconos se enseñan borrosos aunque estén perfectamente en su sheet. Esto es un problema de base de RPG Maker del que sólo me di cuenta cuando hice mis iconos con pixel art. Incluí el arreglo en mi plugin BF_menu, pero como es un plugin muy personalizado para mi juego, no sirve para todo el mundo. Así que te doy el código que usé para arreglar solamente esto:

Window_Base.prototype.processDrawIcon = function(iconIndex, textState) {
textState.x = parseInt(textState.x)
this.drawIcon(iconIndex, textState.x + 2, textState.y + 2);
textState.x += Window_Base._iconWidth + 4;
};

Si copias esto en un archivo .js y lo activas como plugin, los iconos no volverán a salir borrosos.

Cargando (Loading)

Esta imagen en el RTP es más pequeña que la ventana, pero al centrarse en la pantalla y tener fondo negro, parece que ocupa toda la pantalla si no se ha cargado ningún mapa todavía. Es posible que nunca la hayas visto porque los juegos de RPG Maker suelen cargar muy rápido, entonces no tienes manera de verla a menos que vaya a crashear.

Mi consejo es que la hagas del mismo tamaño que la ventana, así no hay riesgo de que se vea mal si hay algo debajo. O también puedes hacerla con fondo transparente, así no queda un rectángulo negro.

En mi caso, siendo una de las pocas imágenes incompatibles con el plugin de traducción que uso (que por lo demás es fantástico), en lugar de escribir Now Loading prefiero usar un icono.

Sombras (Shadow1, Shadow2)

Shadow1 se usa debajo de la aeronave, y Shadow2 se usa debajo de los battlers.

En mi caso, no uso vehículos de ninguna clase, y mis battlers son invisibles, así que ninguna de estas imágenes me sirve de nada. Shadow1 se puede quedar como está, pero Shadow2 la tengo que editar para que sea un png transparente. En mi opinión, y aunque usara cualquiera de las dos cosas, sería más fácil poner la sombra como parte del sprite de vehículo o como parte del battler, que es lo que ocurre con los gráficos de enemigos.

Estados (States)

En esta sheet están las animaciones para los estados alterados de los aliados en Vista lateral. Cada frame de animación es 96x96, y cada animación tiene un total de 8 frames, organizados de izquierda a derecha. Con una animación por fila, consta de 8 columnas y 10 filas, haciendo un total de 768x960 píxeles.

Aunque puedes elegir cualquier animación para cualquier estado, o poner los dibujos que quieras donde quieras, los nombres están hardcoded, y son estos:

No hay espacio para nada más, y no puedes controlar ni la velocidad, ni el número de frames, ni el tamaño. Además, no se aplican a los enemigos, solamente a los aliados. Por este motivo, hay muchos juegos que optan por no utilizar este sistema.

Mientras escribo este tutorial, yo aún no tengo tanta experiencia en esto porque en el capítulo 1 de mi juego no hay estados alterados, pero he estado probando el plugin VE_LoopAnimation y es bastante mejor: en lugar de usar esta sheet, puedes usar animaciones que tú mismo hayas configurado en Base de datos > Animaciones.

También el plugin HIME_StateChangeAnimations te permite enseñar animaciones cuando un estado se pone o se quita, y también utiliza las animaciones de la Base de datos. Mucho más flexible que la sheet.

Armas (Weapons1, Weapons2, Weapons3)

Como ya dije en la sección de battlers, las animaciones de armas van en conjunto con las animaciones Estocada, Blandir y Misil.

Cada animación tiene 3 frames, cada frame es 96x64. Las sheets de Weapons1 y Weapons2 se organizan en 6 columnas y 6 filas: en cada fila, la mitad izquierda es un arma y la mitad derecha es otra, haciendo un total de 12 armas. En total, las sheets tienen un tamaño de 576x384 píxeles.

Weapons3 se organiza en sólo 3 columnas, haciendo un total de 6 armas. En total, esta sheet tiene un tamaño de 288x384 píxeles.

A diferencia de las sheets de battlers, que funcionan en cualquier tamaño mientras sigas las proporciones, las armas tienen un tamaño fijo... haciendo que sean incompatibles si no sigues el mismo tamaño que el RTP para los battlers... yo también opino que es absurdo, sí.

El primer frame de cada animación es para cuando el ataque se está preparando, el segundo para el momento del ataque, y el tercero para cuando se ha terminado la acción. Siempre van debajo del battler.

Aunque puedes usar el dibujo que quieras donde quieras, las armas tienen un nombre hardcoded que se utiliza en la Base de datos para asignar estas animaciones a cada tipo de arma. Estas son:

Como has podido comprobar, este sistema es muy limitado, incluso más que el de los battlers. Si usas battlers, yo aconsejo utilizar un plugin para usar estas sheets de otra forma (aunque no conozco ninguno), o simplemente incluir las armas en las sheets de los battlers. Aunque en ese caso tendrás que buscar la forma de cambiar la sheet entera según el arma que utilice el actor.

Aunque no tengas ningún uso para estas imágenes, debes dejarlas en la carpeta. Si no quieres que se vean, puedes desvincular las animaciones de los tipos de arma desde la Base de datos, o asegurarte de que ninguna arma tiene animación asignada, o hacer que la imagen sea transparente.

Ventanas (Window)

El aspecto de las ventanas en tu juego viene determinado por la imagen Window.png. Es de las cosas que más se personalizan, así que es posible que ya hayas visto plantillas. De todas formas, toma otra:

Es una imagen de 192x192 dividida en 4 cuadrados de 96x96.

La zona roja (esquina superior izquierda) es el fondo de tu ventana. Se estirará según el tamaño, así que no es recomendable poner patrones ni dibujos. Normalmente aquí se usa un color plano o un degradado de color. Puedes usar colores opacos o translúcidos, como tú quieras.

La zona verde (esquina inferior izquierda) es la textura del fondo de la ventana. A diferencia del fondo, en vez de estirarse se repite, así que aquí sí puedes poner dibujos, pero tienes que asegurarte de que tilean bien. Y si no quieres ninguna textura, lo puedes dejar transparente.

La zona amarilla (esquina superior derecha) es para los bordes y las flechas de los menús que no están animadas (para menús largos, como los de guardar y cargar).

En los bordes, las esquinas se mantendrán tal cual, pero el trozo de borde que conecta las esquinas se estirará. Por lo tanto, es buena idea dibujarlos de forma que queden bien aunque los estires. Cada esquina tiene una zona no estirada de 23x23 píxeles, y cada borde tiene una zona de 50x23 (o 23x50). Aunque es mejor idea hacerlos más finos que 23 píxeles, ya que algunas letras irán por encima en menús y mensajes.

Las flechas se enseñan tal cual. La zona máxima es de 24x12 (o 12x24), cualquier cosa dibujada fuera de ahí puede no verse o verse estirada junto a los bordes. Graciosamente, las flechas laterales no se usan en el juego base en ninguna parte, pero es posible que algún plugin las use.

La zona azul (esquina inferior derecha) se divide en tres partes: el cursor, las flechas animadas (para los mensajes) y la paleta de colores. Tanto la zona del cursor como la de las flechas es de 48x48, mientras que la de los colores es de 96x48.

El cursor es el rectángulo que aparece para seleccionar opciones, y que por defecto tiene una animación en la que pierde y gana opacidad (aunque yo se la he quitado con mi plugin BF_cosas). Al igual que los bordes, tiene una parte que no se estira (las esquinas) y una que sí (el resto), así que tenlo en cuenta. La parte que no se estira es de 3x3 píxeles en cada esquina.

Las flechas animadas se dividen en 4 cuadrados de 24x24, cada uno siendo un frame de la animación. El orden de animación es 1-2-3-4, en bucle. Por defecto esta animación es una flecha moviéndose de arriba abajo, pero puedes poner otro movimiento, o algo que no sea una flecha.

La paleta de colores contiene 32 cuadrados de 12x12 organizados en 8 columnas y 4 filas. Como la imagen es bastante pequeña, te muestro una versión agrandada y numerada para explicar qué función tiene cada color (se empieza a contar desde el 0).

Estos son los números asignados a cada color dentro del código del juego, así que por ejemplo, en los mensajes puedes escribir \c[número] y el texto aparecerá del color asignado aquí.

Por cierto, hasta donde yo sé, el programa coge un solo píxel de cada uno de estos cuadrados (no sé cuál, seguramente el de la esquina izquierda), así que hacer un degradado no sirve para nada.

Icono (carpeta icon)

La última imagen que podemos personalizar no está en la carpeta img, sino que tenemos que ir antes de eso, a la carpeta icon. Aquí hay un png de tamaño 128x128, que se usará de icono para el juego, pero nos daremos cuenta de que no se usa en todos los sitios donde esperaríamos.

Si editamos icon.png y abrimos el playtest, veremos que sólo ha cambiado el icono en la barra de tareas (en Windows, hablo de eso porque es lo que uso. No sé qué ocurre en las versiones de Linux o Mac). En la propia ventana del juego aparece el icono por defecto, y si exportamos el juego veremos que el ejecutable (Game.exe) también tiene el icono por defecto. Cada uno de estos casos tiene un arreglo distinto.

Icono en el ejecutable

Para cambiar el icono del ejecutable (Game.exe que aparecerá tras exportar el juego), nos tenemos que descargar un programa gratuito llamado Resource Hacker.

Una vez abierto, arrastramos el ejecutable dentro de este programa, y abrimos la carpeta Icon en el menú de la izquierda. Elegimos el último (4), y veremos en la preview la imagen por defecto de la carpeta icon. Después, le damos a Action > Replace icon, y buscamos la imagen que queremos usar... pero tiene que estar en formato .ico.

Seguramente haya muchas herramientas para convertir una imagen png en ico, pero yo uso esta porque mantiene bien el pixel art sin dejarlo borroso. En la carpeta icon de tu proyecto debe estar el png, pero convierte esa imagen en ico y guárdala en otro sitio para poder cambiar el ejecutable.

Por si no lo sabías, el archivo Game.exe es el mismo para todos los juegos de RPG Maker MV (lo que cambia entre juegos son los datos, imágenes, sonidos...). Esto quiere decir que si has editado uno de estos ejecutables para cambiarles el icono, y exportas otra nueva versión de tu juego, no tienes por qué seguir todos estos pasos cada vez. Puedes sustituir el ejecutable por uno antiguo sin problemas.

Icono en la ventana

Este es un arreglo más sencillo aún. En tu proyecto habrá un archivo llamado «index.html». Ábrelo con un programa de código como Visual Studio Code o Notepad++, pero también sirve el Bloc de notas normal.

Ve a la línea 8, donde pone:
<link rel="icon" href="icon/icon.png" type="image/png">

Y añade «?2» detrás de «icon.png», quedando así:
<link rel="icon" href="icon/icon.png?2" type="image/png">

Ahora debería funcionar tu icono personalizado en la ventana. Es posible que no se vea en playtest, pero sí funciona cuando está exportado.

Error del perfil de NW.js

Esto no tiene que ver con el icono, pero ya que estamos aquí te cuento otro arreglo fácil. Cuando abres un juego de RPG Maker MV es muy común que salga un popup diciendo "Se ha producido un error del perfil". En realidad esto no es un problema de verdad, puedes ignorarlo, pero si no te gusta que aparezca todo el rato, se puede evitar.

Hay dos archivos en tu juego exportado llamados «package.json», uno fuera de la carpeta «www» y otro dentro. Estoy bastante segura de que tienes que editar el de fuera (pero no hace daño editar los dos). Ábrelo con un programa de código como Visual Studio Code o Notepad++, pero también sirve el Bloc de notas normal.

Aquí, en la segunda línea, debes poner cualquier cosa detrás de "name", entre comillas. Por ejemplo:
"name": "nombre",

Y ya con eso debería dejar de salir el popup.

Y hasta aquí el tutorial de assets gráficos. 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.