Tutorial Nº2: Panoramas en Photoshop

En el tutorial numero uno "Panoramas en Illustrator" les conté cómo comienzo a dibujar el panorama en Illustrator teniendo en cuenta las características del RPGMaker 2003 para que luego podamos incorporarlo como mapa único en nuestro juego.

Este tutorial es la continuación de aquél. Aquí pretendo mostrarles los pasos a seguir luego de que creemos el panorama en Illustrator. Más allá de la técnica que uso, esto es perfectamente aplicable a cualquier técnica de dibujo, incluso escaneado o trabajando los gráficos directamente en photoshop. Tras el salto, el paso-a-paso.

1) Lo primero que haremos es guardar nuestro panorama de Illustrator como jpg de muy buena calidad, el cual abriremos en Photoshop.

2) Creamos un layer nuevo por encima del layer del dibujo que abrimos. Este layer vacío debería mostrar una grilla de cuadrados de 16 x 16 píxeles (a modo de ajedréz). Podemos diferenciar estos cuadrados con colores bien diferentes, ya que nos ayudará mucho cuando debamos comenzar a fragmentar la imagen.

3) Un dato no menor es que las dimensiones del trabajo deben en píxeles múltiplos de 16, si no no seremos capaces de ver el panorama funcionando correctamente cuando lo incorporemos al maker. Es conveniente transparentar el layer de la grilla y luego acomodar la ilustración para que, por ejemplo, los bordes de coalisión con paredes (según el dibujo) coincidan con la grilla que dibujamos.

4) Guardamos la imagen como psd, por si posteriormente necesitamos editarla (que sí deberemos hacer). Luego ocultamos el "ojo" del layer de la grilla y guardamos la imagen como png dentro de la carpeta "panoramas" de nuestro juego (ver más adelante cómo guardar la imagen como png).

5) Nos vamos al maker para aplicar la imagen, dando click derecho sobre el mapa que deseamos aplicarle el panorama que creamos y damos a "propiedades de Mapa"



6) Se nos abre la ventana de Edición de Mapas, desde allí eligiremos las dimensiones de nuestro mapa. Aquí es donde comprobaremos visualmente si las cuentas matemáticas salieron bien: deberemos colocar el nº de tiles de ancho y alto de nuestra imagen. Podremos dividir por 16 el ancho y alto en píxeles para obtener dichos números. Por ejemplo, si hicimos una imagen de 480 x 352 píxeles, entonces el mapa debería ser de 30 x 22 tiles.




7- A continuación, tildamos la opción "Usar imagen de fondo" y presionamos el botón "elegir", desde esa lista, si guardamos correctamente la imagen de la casita, veremos dicho archivo, el cual luego de seleccionarlo veremos algo como esto (en el ejemplo utilizo un dibujo de una casa y un árbol):




Pero... aún no se ve la imagen... (si el mapa de chipset está en modo defoult, veremos un mar azul). Eso es porque está DEBAJO de los tiles de ese mar. Si seleccionamos el tile transparente y borramos ese mar, y si todo salió bien, veremos la casa por debajo. Si no vemos la imagen no quiere decir que no se haya aplicado, sino que está allí pero por un problema de concordancia de dimensiones en píxeles y dimensiones en tiles no se visualizará en el modo de edición del juego, mas sí en su modo jugable.


Crear los chipset del panorama

Ya tenemos un mapa en donde los personajes pueden caminar. El problema es que todo luce como una alfombra, no hay coalisiones y ningún objeto pasa por encima del personaje. Vamos a trabajar en eso:

1- Volvemos a Photoshop. Utilizando la herramienta de selección rectangular procedemos a selecionar los tiles cuyo personaje deba pasar por debajo. En este ejemplo es sólo el árbol, pero seguiramente en dibujos más complejos haya muchos elementos que deseemos que pasen sobre el personaje. Deberás seleccionarlos respetando la grilla original de 16 x 16. El photoshop tiene una interesante opción de sumatoria de selecciones, que consiste en apretar shift para que aparezca un signo + en la selección (la de modo rectangular viene ideal para este tipo de trabajo).






2- Una vez que seleccionamos todos los sectores de la imagen que deben ir sobre el personaje, y asegurándonos que estamos posicionados sobre el layer de esa imagen, presionamos las teclas contro + J. Esto hará que llevemos todo lo seleccionado a un layer nuevo. La idea no es recortar la imagen original, sino hacer un duplicado de lo seleccionado en un nuevo layer y que coincida exactamente con la imagen que quedó abajo. He aquí cómo quedó en la paleta de capas del photoshop:





3-Luego, sin irnos de ese layer nuevo, presionamos la tecla CONTROL y hacemos click izquierdo del mouse sobre la miniatura del layer, esto hará que se vuelva a seleccionar todo el contenido del mismo. Luego de eso, seleccionamos la capa de la grilla de 16 px (la de abajo de todo en este caso) y volvemos a apretar control + J, de manera que obtenemos dos layer que tienen la misma forma, uno con contenido de imagen, el otro con contenido de grilla:





4-Luego de eso, ocultamos los layer de la grilla completa y la imagen completa, para que sólo queden visibles las partes de la imagen que recortamos con su grilla sectorizada debajo. El layer de la imagen deberá estar al 100 % de visibilidad, algo así:




5-Este paso está simplificado, la idea es recortar y deshacerse (borrando) todo lo que no forma parte de los objetos que deberán pasar sobre el personaje. Digo simplificado porque en este ejemplo sólo muestro el uso de la goma, sería muy extenso el tutorial mostrar otras formas de selección (lazo, pluma vectorial, máscara, etc). Sea cual fuere la forma que usemos, lo más importante es que NO HAYA PIXELES TRANSPARENTES, es decir, con sutilezas de suavizado, que es algo que el photoshop suele hacer comúnmente con la selecciones redondeadas. Es importante que se borre lo que no corresponde de manera rígida, ya que en el rpgmaker2003 no se permiten transparencias de píxeles. Una forma de asegurarnos que no pasará eso es configurar la goma de borrar como sigue:

Tamaño: el necesario (lo iremos cambiando según la complejidad de lo que haya que borrar)

Modo: Lápiz (prohibido usar "pincel", es más bonito, pero no sirve para el rpgmaker 2003)

Opacidad: fundamental que esté al 100%





6- Ahora "pintamos" borrando lo que no es, en este caso, parte del árbol. Entonces descubriremos la grilla por detrás, que tiene la misma forma (luego explicaré por qué de esa grilla). Normalmente yo coloco un layer blanco entre la imagen y la grilla, para no confundirme visualmente con los colores de la grilla (que son meramente representativos de límites). Nos quedará algo como esto:



7-Ahora, enlazamos la capa actual con la de la grilla (la recortada, no la oculta) y luego presionamos control + E para acoplar ambas capas en una sola, según muestra esta imagen:



8- Ahora viene el paso de convertir esos fragmentos en tiles que el Maker comprenda. Según el maker que uses, deberás ajustar el tamaño de tiles y cambiarán todas las proporciones.

Esta es la clásica plantilla de tiles que encontré en algún lugar, y que me ha resultado muy útil:



9- La imagen muestra las partes que usaremos para los panoramas. Lo que no implica que se pueda usar el resto del tile. Lo indicado en verde son la zona donde colocaremos tiles que no requieran partes transparentes, es decir, sin recortes o caladuras. En nuestro ejemplo del árbol se puede poner aquí tal vez 1 solo tile de la parte del medio del árbol, que está completamente cubriendo el tile. Dependiendo de la cantidad de tiles disponibles para nuestra escena (los mismos se consumen con rapidez) tendremos que ser más o menos hábiles en distribuir los fragmentos.

El sector rojo es exclusivo para las partes caladas, las más, ya que necesitamos que los bordes respeten las formas del dibujo original.



10- Con los dos archivos abiertos, el del árbol con el árbol recortado y el de la plantilla, arrastramos el layer del árbol (que tiene parte de grilla porque acoplamos, recuerdan?) al archivo de la plantilla de chipset. Es importante que el archivo de la plantilla no esté en modo indexado porque si no no nos dejará colocar una imagen rgb.




11- Ahora basta con ubicar los gráficos según lo indicado en el apartado 9. Si son grandes superifices plenas que cubren al tile por completo, lo seleccionamos y colocamos en el sector de "plenos", si no es así, lo dejamos en el sector de "calados". En este ejemplo, dejé el árbol completo en el sector de calado. El hecho de acoplar la imagen con la grilla es muy últil cuando el espacio es algo insuficiente, y necesitamos comenzar a desarmar nuestra imagen, siguiendo la grilla es sencillo asignarle nuevos lugares ya que respetaremos las proporciones espaciales correctas. En este caso la imagen es demasiado simple, pero os aseguro que si es complejo el hecho de que estén los límites del tile junto con la imagen es fundamental.




12- Ahora que los tiles están perfectamente ubicado, deberemos borrar esos 2 colores que nos ayudaron para encuadrarlo con la grilla. Basta con seleccionar la herramienta "varita mágica", que esté en modo de selección simple, tolerancia 0 (para que no selecciones píxeles con tonalidades parecidas), la opción "suavizado" debe estrictamente estar destildada ya que si lo estuviera suavizaría bordes que luego se verían horribles en el maker, y por último destildamos la opción "contiguo" esto permiritá seleccionar con un solo click todos los sectores que tienen el mismo color que clikeamos. En nuestro ejemplo bastarán dos click para elegirlos todos, un click para un color, otro click para el otro color.

De más decir que el color de los tiles que sirven de guía deben ser distintos a los que contenga la gráfica, si no se crearán agujeros.

Las flechas rojas indican los tiles que clickeé (pueden haber sido otros...)



13-presionamos backspace para eliminar la selección creada y creamos un layer nuevo entre la plantilla de tiles y la imagen nuestra al que pintaremos de un color diferente al usado en el dibujo.



Queda algo así:



14- Guardamos esta imagen como psd, porque posiblemente sea necesario regresar a ella en un futuro, y luego procedemos a guardarla en png. A continuación explico los pasos que hago yo para guardar las imágenes aptas para RPG Maker 2003 (png).

15- Ir a Imagen>modo>color indexado...



16-Aparecerá una alerta sobre combinar las capas (ya tenemos el PSD original guardado así que damos "ok")



17- Esta ventana llamada "Color Indexado" es muy importante porque desde aquí definimos el aspecto de la imagen que deberá tener extrictamente como máximo 256 colores, siendo el transparente uno más de ellos, o sea, 255 colores útiles.

Recomiendo que se experimente con las opciones de "paleta" ya que iremos viendo los resultados de los diferentes sistemas de elección de colores. La que suele dar mejores resultados es la "perceptual".

Luego, en "forzado" (eso significa que desde aquí elegimos qué colores deseamos que figuren con exactitud), elegimos la última opción "personalizar..."






18- Se nos abrirá una grilla con los "colores forzados". Al clickear alguno de esos cuadraditos grises se nos abre el "selector de color" para "forzar" el color que elijamos. Siempre el primer color de la tabla (arriba a la izquierda) es el del color transparente. Así que seleccionamos ese cuadradito de arriba a la izquierda y luego de que aparece el selector de color, con nuestra imagen original visible, clickeamos sobre el color del layer que asignamos para el fondo y automáticamente elegirá dicho color como "tono transparente".

Estos mismos pasos se pueden hacer directamente en el maker, pero personalmente me resulta más rápido por aquí.

Es absolutamente fundamental que la opción de "tramado" en la paleta de "color indexado" esté en "ninguno". Esta es una opción muy útil para los panoramas, cuando notamos que los colores son insuficientes podemos probar distintas maneras de dispersar automáticamente los píxeles para dar efectos visuales, pero en este caso, como son chipset, no deseamos que "trame" el color del fondo. Si por error está esto tildado veremos en lugar de color transparente una "lluvia" de píxeles de colores semejantes al tono transparente, casi invisibles si vemos el archivo png suelto, pero dentro del juego es más que notorio.

Aquí un resumen visual de cómo se selecciona en photoshop en tono transparente del PNG.




19 Damos Ok a esas paletas y salvamos como PNG, nos aparecerá esta opción de "entrelazar píxeles". tildamos Ninguno y luego ok.




20- Volviendo al maker, ahora falta asignar nuestro chipset al mapa que le creamos el panorama. Presionamos el ícono de la base de datos, pinchamos la pestaña-solapa "gráficos" y desde allí, si no hubiera casilleros libres en la lista del Editor de Gráficos, agregamos algunos y aceptamos.



21-Acto seguido, seleccionamos una casilla libre de la izquierda (conviene ir por orden) y le asignamos un nombre descriptivo (en este caso, lo llamé "casita"). Luego presionamos el ícono de "..." en "Elegir ChipSet de Gráficos" y en la ventana emergente seleccionamos el gráfico de chipset. Vale decir que para que aparezca aquí debimos guardar esta imagen en la carpeta de chipset del proyecto actual (y respetar todas las normas de formato, cantidad de colores y dimensiones de archivo). Damos en "aceptar".



22-Ahora que tenemos el chipset en pantalla, (qué emoción!) tenemos que asignar las prioridades. Esto sirve para decidir qué tiles de esa imagen chocarán con el personaje (o sea, le obstruirán su paso), o serán transitables como una alfombra, o pasarán sobre él.

En nuestro caso, siempre pasarán sobre el personaje. Es decir, no usaremos, con este sistema de hacer gráficos con panoramas, chipset que pasen bajo el personaje o choquen con éste, porque de por sí, todo el panorama "está bajo el personaje", y cuando deseemos que choquen... ya veremos la tercer y última etapa de este tutorial.

Por lo tanto no es mala idea ir clickeando cada tile para convertirlo, tras varios click, en "estrellitas", eso indica que irán SOBRE el personaje (como las estrellas en el cielo... O__o). Podemos clickear sólo los que contienen gráfica (como en este ejemplo) o, mejor aún, todos los tiles disponibles, así cuando creemos otro mapa, copiamos el anterior y sólo reemplazamos el chipset, así que no tendremos que volver a clickear cada tiles para reasignale su posición como "sobre el personaje". Eso nos ahorrará tiempo. Damos aceptar.




23-Ahora volvemos a la edición del mapa (recuerdan el comienzo del tutorial? aquí vinimos para colocar el panorama), pero ahora nos interesa asignarle a este mapa (que se llama MAP0001 porque no le puse ningún nombre personalizado) el gráfico que acabamos de crear:





24-Tras aceptar, veremos algo más o menos así:




25- Ahora resta colocar los gráficos sobre el panorama. Si todo salió bien, parecerá que "no funciona" porque visualmente no veremos que colocó los chipset, porque coinciden exactamente en forma y color con el panorama de abajo. Pero créanme que están allí xD

Bloquear las zonas:

1-La tercer y útlima etapa del tutorial consiste en crear bloques con los que el personaje choque. Son simples acciones invisibles. Personalmente uso un color específico para este tipo de acciones "vacías" (ya que no tienen comando alguno) para diferenciarla visualmente de aquellas acciones, también invisibles, que sí tienen comandos (como ser los teletransportadores que se encuentran al entrar o salir de una habitación). Para crearlo, debemos estar en el modo de visualización de acciones, y dar doble click sobre algún tile del mapa, tras lo cual se abrirá el cuadro de Acciones. Aquí simplemente colocamos la prioridad "como el personaje". Damos Aceptar.




2- Ahora, copiamos y pegamos dicha acción sobre el mapa, y colocamos al prota para experimentar cómo se ve.



Puedes descargar este mismo ejemplo de AQUÍ

Archivo: rar (se abre con win rar)
peso: 0,10 Mb (101 kb)


Nota final: Con este tutorial no pretendo enseñar la mejor forma de hacer mapas según panoramas, sino compartir mi técnica personal con la que hice Las Aventuras de Pepe, con eso quiero decir que no es un secreto cómo hice mi juego, y espero que en un futuro haya quienes se animen a hacer sus juego en base a dibujos, fotografías, collages, etc.

Creo que esto es sólo un disparador de que se puede hacer algo más que simplemente coger chipset de la web, o cambiarles un poco los colores. Conozco muchos que saben dibujar muy bien, pero no se les da esto del pixelart, técnica compleja si la hay  y por esa razón terminan usando chipset de otros juegos. Creo que esta es una posible alternativa para aquellos usuarios no pixeleros.

Saludos a todos!!