Registrarse

[pokeruby] ¡¡Como insertar tiles en pokeruby!!

Kaktus

Miembro insignia
Miembro insignia
¡Hola, buenas!

Hoy, tras mucha investigación y mucho curro os traigo por fin, una forma de insertar tiles que sí funciona, y se verá todo de maravilla (a no ser que no editéis el tileblock, obviamente, pero ya hablaremos de eso más adelante)

Requisitos


Os dejo varios links por si alguno da problemas


Una vez tenemos todo lo necesario podemos empezar a insertar tiles, es importante seguir los pasos que os voy a decir, el tema de los formatos de la imagen es muy exigente y es necesario hacerlo así, que es el único método que me ha funcionado a la perfección.


ATENCIÓN, sé que el tutorial es muy extenso para algo que es tan simple como insertar tiles, pero no penséis que por ello es un proceso largo, se pueden insertar tiles en 10 minutos, pero es un proceso que requiere de ser muy puntillosos y no me quiero dejar ningún cabo suelto ni dar lugar a confusiones en algún proceso. Una vez hagáis este proceso un par de veces, os acostumbraréis y será rapidísimo.

Lo primero, será conseguir el tileset que queremos editar y pasarlo a un formato que nos interese, en este caso, voy a editar el general.

Para encontrar las imágenes de los tilesets accederemos a: ../pokeruby/data/tilesets/(primary o secondary)/(tileset que queráis editar)/tiles.png

Lo copiaremos y lo llevaremos a donde os resulte más cómodo, en mi caso, al escritorio.

Ahora abriremos el archivo de "tiles.png" con Photoshop, y veremos algo así


Fijaos muy bien que dice "tiles.png ... (Gris/8)", bien, pues ese formato deberemos respetarlo, por tanto, no vamos a trabajar con esta imagen, y como será muchísimo más útil tenerlo en formato .bmp, precisamente haremos eso, pasarlo a .bmp. Esta ventana de Photoshop la dejaremos abierta, porque más tarde la usaremos, es muy importante que no cambie el lugar donde dice (Gris/8), de verdad que es lo más importante del tutorial, así que, esta ventana, la dejamos tranquila y procuramos no tocar nada.

CUIDADO, esta parte es muy importante y tenemos que estar atentos en cómo guardamos la imagen.

Primero, le daremos a "Archivo>Guardar como..."


Y elegiremos la ruta en la que queramos trabajar. Lo siguiente será seleccionar el formato .bmp


Y le daremos a guardar PERO, en las opciones que nos aparece, tenemos que seleccionar 4 bits, MUY importante:


Y ahora sí, le damos a guardar, y ya tenemos la imagen en el formato que deseamos

Como habréis podido notar, el tileset está en escala de grises, y no es muy conveniente editarlo de esta manera, pues no pasa nada si lo hacemos, pero dudo que nos aclaremos con los colores que estamos usando, y menos si estamos usando alguna paleta editada o algo por el estilo.

Realmente, no me debería detener a explicar esto, pero como no quiero dar nada por hecho, explicaré como tener la paleta a color del tile que vayamos a usar, aunque ya sepáis como hacerlo, os recomiendo echarle un ojo, pero si estáis muy seguros, os lo podéis saltar (pero vaya, no lo recomiendo)

Para empezar, sí, debe ser una paleta indexada. Realmente, a la hora de compilar, da igual que esté indexada o no, porque al pasarla a .gbapal, se indexan automáticamente, pero para más adelante usar la herramienta del tileblock (creada por mi :3), sí necesitaremos la paleta indexada.

Obviamente, en caso de que queramos editar algún tile con la paleta original, simplemente vamos al archivo del tileset/palettes y copiamos la paleta que nos interese por ejemplo: 03.pal. Y sí, pongo en negrita el .pal, porque es el que nos interesa, de .gbapal olvidaos, eso no lo vamos a necesitar nunca para insertar tiles.

Una vez aclarado todo, vamos a pasar a la acción, conseguir la paleta indexada del tile que nos interesa, en este caso, yo insertaré un tile de casa creado por mi mismo (para que no digáis que insertar tiles grandes es difícil)

Por tanto, como siempre, tomaremos las medidas del tile que siempre respete la regla de los 8 pixeles, es decir, que ambas medidas deben ser múltiplos de 8. Y le pondremos un fondo, de un color diferente a los que ya usa, por motivos obvios, que será el que el juego considere el fondo, y lo leerá como un color transparente. Obviamente, este proceso de acomodar el tile, podemos hacerlo en Photoshop, o donde más cómo os resulte.

En mi caso, este es el resultado del tile en .png


Y ahora procederemos a abrirla con Character Maker Pro, y como sé que incluso algunos veteranos del mundillo, no se saben "el truquito" para abrir las imágenes, también me veo obligado a explicarlo.

Muy fácil, lo único que tendremos que hacer es abrir nuestro tile en Paint, sí, en Paint, daremos click derecho sobre la imagen y le daremos a seleccionar todo


Ahora, click derecho y "Copiar" o "Ctrl + C", y le daremos a "Archivo>Nuevo"


Le daremos a Guardar, y reemplazamos el archivo original.

Ahora, ya nos abrirá la imagen en el Character Maker Pro, sin problemas.

Una vez tenemos abierta la imagen en Character Maker Pro, veremos algo así:


Pues como veis, la paleta está desordenada, así que vamos a ordenarla. Le daremos a "Paletas>Editar Paleta..."


Y veremos algo así:


Bien, pues ahora, tal y como hacemos para seleccionar carpetas, es decir, manteniendo pulsado el click izquierdo y arrastrando, seleccionaremos absolutamente todos los colores, del primero, al último, y seleccionaremos la parte en la que dice "Colores 15-bits" para que tengamos la paleta correctamente. Lo siguiente será ir seleccionando color a color y dándole a "Cortar" y "Pegar copia" respectivamente, para ordenar la paleta a nuestro gusto. MUY IMPORTANTE que el color de fondo sea el primero de todos para que realmente, se detecte dicho color como el de fondo. Realmente, lo único necesario en este proceso es colocar dicho color el primero, pero si sois personas "ordenadas" por llamarlo de alguna manera, también podéis acomodar los colores para que se queden a vuestro gusto, aunque repito, es innecesario.

A mi me ha quedado así


Le daremos a Aceptar para guardar los cambios, y listo

Ya tenemos todo correctamente indexado, y ordenado, ahora es turno de guardar la paleta, para ello en el mismo menú de antes... "Paletas>Guardar Paleta...", le daremos un nombre y guardamos como .act


Y listo, ya tenemos nuestra paleta indexada, que será de gran utilidad más adelante. (Recordad guardar los cambios en el archivo del tile.png tras editar la paleta)

Teniendo ya la paleta lista, abriremos Graphics Gale, y tras abrirlo, abriremos nuestro archivo "tiles.bmp"


Si sois algo observadores, podréis ver que por desgracia, la paleta está invertida, pues el color de fondo, que es el blanco, es el que está al final y eso no debería ser así, pero tranquilos, este es el momento en el que os doy la alegría de que no tendréis que reordanarla a mano, ya que creé un par de archivos que os van a ser muy útiles para hacer este cambio de la paleta ordenada a la desordenada y viceversa, además, están ya indexadas, ¿qué más se puede pedir?

Bien, ahora toca extraer los archivos que hemos descargado antes en el tutorial, y guardarlos en un lugar en el que nos aseguremos de que estén a salvo de la papelera de reciclaje, porque los usaremos siempre que queramos insertar tiles.

Antes de importar paletas o algo así, aclararé que "pal_ordenada.pal" es la que tiene el orden que los rom hackers acostumbrábamos a usar para insertar tiles, es decir, el color transparente el primero, y "pal_desordenada.pal" tiene el orden con el que acabamos de abrir el archivo, que lo necesitaremos para devolver al archivo su orden de paletas original cuando estemos prácticamente acabando el tutorial, ya que al compilar, se necesita dicho orden, y no el que acostumbramos.

Ahora sí, a importar la paleta, y muy atentos a que dejo marcado y que no a la hora de importar cada paleta.

Le daremos a la flechita hacia abajo que está a la derecha del tileset y en "Load Palette"






Lo siguiente, será importar la paleta para cambiarle el orden, así que le damos a "File>Import From File..." e importamos la paleta que nos interesa, es decir "pal_ordenada.pal"


MUY IMPORTANTE dejar "Match Pixels with Colors" marcada, le daremos a "All" y luego a "Ok", y listo, ya tenemos la paleta en el orden que nos interesa.

Es muy importante entender que hace esta función porque será crucial a la hora de hacer cambios de paletas. Pues si la dejamos marcada, lo que ocurrirá será que los colores de la imagen a la que estamos importando la nueva paleta se adaptarán a la nueva paleta.

Me explico con un ejemplo, si tenemos tres color: rojo claro, verde pistacho y marrón oscuro (en ese orden), e importamos una paleta que tiene también, tres colores: verde esmeralda, marrón claro, y rojo chillón (en ese orden), lo que ocurrirá si dejamos esta opción marcada, será que el rojo claro, se reemplazará por el nuevo rojo chillón, el verde pistacho se reemplazará por el verde esmeralda, y el marrón oscuro, se reemplazará por el marrón claro, ya que lo que buscamos con esta opción es ajustar los nuevos colores lo máximo posible a los originales.

Sin embargo, si dejamos la opción desmarcada, se sustituirá el primer color, por el primer color nuevo, el segundo color, por el segundo nuevo y así sucesivamente, es decir, atendiendo al ejemplo, el rojo claro, se sustituiría por el verde esmeralda, el verde pistacho por el marrón claro y el marrón oscuro se sustituiría por el rojo chillón.

Ahora, procederemos a importar la paleta a color, que es el mismo proceso, "Flechita>Load Palette...", "File>Import From File..." y en este caso, seleccionamos la paleta que hemos guardado antes con Character Maker Pro


Y en esta ocasión, sí que sí, cómo podéis ver desmarcamos "Match Pixels with Colors", le damos de nuevo a "All" y "Ok". Y ya tendremos listo nuestro tileset a color para ser editado de forma cómoda


Le damos a "File>Save as..." y lo guardamos de nuevo como archivo .bmp, con el nombre que queráis


Podemos pasar al siguiente paso ñ.ñ

Es momento de editar el tileset, así que de nuevo, acudiremos a nuestro buen amigo y compañero, Photoshop, abrimos el .bmp, y hacemos lo que tengamos que hacer en él, obviamente, usando el archivo del tile indexado que hemos editado antes con Character Maker Pro, si queréis vaciar el tileset entero, y empezar a crear uno de cero, podéis hacerlo, yo para el tutorial, simplemente lo pondré encima de cualquier cosa para ir más rápido




Y así me ha quedado a mi, (por favor, hacedlo bien, no dejéis tantos espacios libres ni uséis dos tiles de 8x8 iguales, adaptarlo y ahorrad espacio, lo mío es sólo para ejemplificar)

Recordad que tenéis que respetar de nuevo la regla de los múltiplos de 8x8, no podéis colocar un tile en la posición (medida en pixeles): "x: 3; y :55", ya que no son múltiplos de 8 y luego a la hora de insertarlos en el tile block no os va a cuadrar.

Una vez hechos todos los cambios que queríamos hacer, "Archivo>Guardar Como..." y lo guardamos de nuevo como un .bmp, si queréis sustituirlo por el mismo archivo que estáis editando, podéis no volveremos a usar este archivo original a color.

Algo a puntualizar, es que ahora, al guardar en .bmp sólo nos da la opción de guardar para 8 bits, pero no hay problema en ello, lo apañamos en el siguiente paso con Graphics Gale, guardamos y listo


Y tileset casi listo para ser insertado, vamos al siguiente paso

Este se podría decir que es el último paso a la hora de insertar tiles, así que, muy atentos.

Lo primero será de nuevo, abrir Graphics Gale y en el, abrir el último archivo .bmp que hemos manipulado, es decir, el tileset a color con los tiles insertados:


Oops... ¿qué le ha pasado a los colores? ¿por qué ahora tienen 256?

Tranquilos, podemos hacer que vuelva a ser una imagen de 16 colores gracias a esta fantástica herramienta.

Haremos click en "All Frames>Color Depth..."


Y seleccionaremos "4bpp", deberíais tener todos los ajustes tal cuál están en esta imagen:


Y... ¡Tachán!


Se nos desordenan los colores ;-;

Pero keep calm, ya tenemos lo que necesitábamos, el tileset a color, con un formato 4bpp y sus respectivas paletas.

Si habéis estado atentos, podréis deducir que el tema del orden de las paletas lo podemos solucionar muy fácil, "Flechita hacia abajo>Load Palette..." y cargamos la paleta del color indexado


Esta vez sí, dejamos "Match Pixels with Colors" activada, y "All", "Ok".

Ya tenemos la paleta ordenada.

Ahora vamos a aprovechar para guardarla en el formato que necesitará nuestro querido compilador, esta paleta la usaremos más tarde, para ello, click en la flechita hacia abajo y "Save Palette..." tenéis que tener en cuenta que tenéis que guardar tan solo con dos número y en formato .pal, dichos números, deben ser la paleta que queréis reemplazar (obviamente, si es del tileset primario, sólo deberías poner entre el 0 y el 7, y si es del tileset secundario, del 8 al 12).

Yo como en mi caso la voy a sustituir por la paleta 1, la guardaré como "01.pal"


¿Adivináis que viene ahora? Exacto, pasar la imagen a blanco y negro como la original, ¿cómo? pues si habéis puesto atención, ya deberíais saberlo, así que no lo voy a explicar pues importaremos "pal_ordenada.pal" dejando desmarcada la opción de "Match Pixels with Colors", deberíamos estar viendo algo así:


Lo de siempre, "All" y "Ok", ¡y listo! ya tenemos el tileset con nuestro tile en blanco y negro

Aprovecho para recomendaros que guardéis en .bmp tal cuál se encuentra ahora el archivo, ya que para el editor de bloques, necesitaremos un archivo en el formato de escala de grises, que sea .bmp, y, que tenga cargada la pal_ordenada.pal. Guardad bien este .bmp, ya que más adelante nos servirá para editar los tileblocks con mi programa, el archivo tiene que estar dentro de la carpeta del tileset, junto al archivo "tiles.png", y se tiene que llamar "tiles.bmp", osea que si lo guardáis ahí y con ese nombre ya, en el tutorial de los bloques nos ahorraremos ese paso.


Por último, tenemos que invertir el orden de los colores, para tener el archivo tal cuál lo encontramos, así que, "Flechita hacia abajo>Load Palette..." y cargamos "pal_desordenada.pal", ojo, esta vez es la desordenada, y dejamos marcada la opción de "Match Pixels with Colors":


Venga chicos, que es la última vez que hacemos esto ya, "All", "Ok", y ya tenemos prácticamente listo el tileset.

Guardamos como .bmp el archivo y volvemos a abrirlo en Photoshop


Ahora, seleccionaremos todo el tileset y con "Ctrl + C" lo copiaremos, y... ¿recordáis este tileset que no había que editar y dejarlo abierto del primer paso?


Pues iremos a el, y haremos "Ctrl + V" para pegar encima el nuevo tileset, y que por tanto, se conserve intacto el formato original de "(Gris/8)", y sé que soy muy pesao', pero tiene que tener este formato en la pestañita, si no, se nos va a jod*r todo el tileset, por lo que aseguraos de que todo esté correcto.

Veremos algo así:


Teniendo todo esto listo, ya estamos preparados para guardar el archivo, por tanto, "Archivo>Guardar como..." y MUY IMPORTANTE, guardarlo como .bmp siguiendo los pasos de la primera parte, es decir, .4bpp:


Yo lo he guardado con el nombre "tiles.bmp" en el Escritorio.

Y ahora, el paso final en el que manipularemos este archivo. Teniendo correctamente Image Magick instalado, procederemos con el siguiente paso, que es abrir la CMD de Windows.

Una vez tengamos la CMD abierta, usando el comando "cd", accederemos a la ruta en la que se encuentra "tiles.bmp", en mi caso, como está en el escritorio, sólo tendré que escribir

Código:
cd Desktop

Bien, ahora muy atentos, que este comando es clave, deberemos escribir

Código:
magick convert "nombredeltileset.bmp" "nombredeltileset.png"
En mi caso, quedaría

Código:
magick convert "tiles.bmp" "tiles.png"
Peeeero, antes de ejecutar el comando, tenemos que asegurarnos de que no exista ya el archivo "tiles.png" en el directorio que lo vamos a crear, en este caso, el Escritorio, si existe, lo tenemos que borrar. En mi caso, cómo ya existía, lo borré.

Ahora sí, ejecutamos el comando, y se debería crear un nuevo archivo, llamado "tiles.png" que será el que usemos para insertar.

¡Siguiente paso, ya se huele el aroma a victoria!

Cómo ya es costumbre, yo os diría que crearais vosotros los archivos .4bpp y .4bpp.lz del tileset, pero como el compilador nos vemos obligados a que los cree el compilador porque si los creamos manualmente, peta todo, lo que vamos a hacer es ir a la carpeta en la que queremos editar los tiles, y borraremos los archivos: "tiles.4bpp", "tiles.4bpp.lz" y "tiles.png"

Nos quedará algo así


Ahora, lo único que haremos será copiar el archivo tiles.bmp y el archivo tiles.png a la carpeta, nos quedará algo así:


(No me diréis que no es un tuto para Dummies, oye)​

Ahora, haremos algo bastante similar con las paletas (en caso de que las hayamos cambiado, que imagino que sí)

Entramos a "palettes" y eliminamos ambos archivos que contengan el número que corresponda a la paleta que queramos sustituir, en mi caso: 01.pal y 01.gbapal, y me queda la carpeta algo así:


Por ultimo, copiaremos la paleta "01.pal" (en mi caso) que guardamos en el paso cuatro mientras adaptábamos las paletas y la pegaremos en este archivo, no os preocupéis que el archivo "01.gbapal" ya se encarga el compilador de crearlo.

¡Siguiente y último paso!

¡Último paso!

Ahora sólo queda abrir el compilador (cygwin.bat en mi caso), acceder a la ruta en la que se encuentra pokeruby y hacer un make -j4, sí sí, un make -j4 de toda la vida, nada de make clean porque hayamos cambiado gráficos ni nada por el estilo así que...

Código:
cd pokeruby
make -j4
Y a cruzar los dedos para que funcione disfrutar del resultado :D

Obviamente, aún no podremos disfrutar del tile in-game, porque no hemos adaptado los bloques, eso será otro tutorial, ya que si no, este queda exageradamente extenso, podéis encontrar el link al siguiente tutorial al final de este post.

Como sé que va a haber alguien que se atasque en los pasos, he decidido crear un video-tutorial para explicarlo y entenderlo de una forma más visual (no explico nada, pero es para tenr una referencia):




Post de mi herramienta para editar bloques: IKBlockEditor

¡Eso ha sido todo, sé que ha sido largo e intenso, pero el resultado merece la pena!

Ya habéis podido apreciar como he insertado el tile de casa en 6 minutos (claro, teniendo en cuenta que no lo he acomodado al tileset) pero no es tanto tiempo como puede parecer, cuando os acostumbráis y lo hacéis un par de veces, es automático.

¡Mucha suerte, y a darle caña a los proyectos decompilados!

Chao ñ.ñ
 
Última edición:

kakarotto

Leyenda de WaH
Que decir con esta semejante 8 maravilla de los proyectos decompilados. Esto supone un antes y un despues en este mundo. No quiero influir a nadie pero acaso no es el maldito tutorial del año?

SIGUE ASÍ
 

C.

Miembro Deshonroso
Menudo trabajazo, eres un genio, ¿me haces un hack? (?

Tío, muy bien explicado y bien hecho, ahora solo falta el tutorial de tu herramienta y todo listo.

Esto es un gran avance con pokeruby y hecho por ti, no quiero sonar como fanboy pero que wapo xaval.
 
Arriba