Capítulo 3: Mapas
Antes que nada, bájate el paquete de materiales correspondiente a este capítulo pulsando en este enlace:
http://www.mojontwins.com/churrera/churreratut-capitulo3.zip
¡Podewwwr mapa!
En este capítulo vamos a hacer el mapa. El tema se trata de construir cada pantalla del juego usando los tiles que dibujamos en el capítulo anterior. Cada pantalla es una especie de rejilla de casillas, donde cada casilla tiene un tile. En concreto, las pantallas se forman con 15×10 tiles.
Para construir el mapa usaremos el Mappy (cuyos programadores realmente se quebraron la cabeza para ponerle el nombre). El Mappy es bastante sencillote pero lo cierto es que funciona muy bien y, lo que es mejor, se deja meter mano. La versión de Mappy que te has descargado de Mojonia tiene un par de añadidos y modificaciones para que funcione como nosotros queremos.
Pulsa aquí para seguir leyendo…
Antes de empezar a ensuciarnos las manos y tal vamos a explicar un poco cómo funciona Mappy. El programa maneja un formato complejo para describir los mapas que permite varias capas, tiles animados y un montón de paranoias. Este formato, el nativo de Mappy, se llama fmp y es el que usaremos para almacenar nuestra copia de trabajo del mapa. Es la copia que cargaremos en Mappy cada vez que queramos modificar algo. Sin embargo, este formato es demasiado complejo para ser importado en el juego, ya que tiene un montón de cosas que ni siquiera necesitamos.
Nosotros sólo queremos una ristra de bytes que nos digan qué tile hay en cada casilla del mapa. Para eso Mappy tiene otro formato, el formato map, que es el formato simple y personalizable. Nosotros lo hemos dejado en la mínima expresión: una ristra de bytes que nos digan qué tile hay en cada casilla del mapa, precisamente. Es el formato en el que habrá que guardar el mapa cuando queramos generar la copia que luego procesaremos e incorporaremos al güego.
Hay que tener mucho cuidado con esto, ya que es posible que actualicemos el mapa, grabemos el map, y se nos olvide guardar el fmp, con lo que la próxima vez que queramos ir al Mappy a hacer algún cambio habremos perdido los últimos. Nosotros tenemos a Colacao, el Mono Coscao, que nos avisa cuando nos olvidamos de grabar el fmp, pero entendemos que tú no tengas a tu lado a ningún mono coscao que cuide de tí, así que asegúrate de grabar en map y en fmp cada vez que hagas un cambio. Que luego jode perder cosas. No sé, ponte un post-it.
¿Que cómo es esto? Ya lo verás, pero el tema es tan sencillo como grabra mapa.map o mapa.fmp a la hora de grabar el mapa con File → Save. Cutre, pero efectivo.
Definiendo nuestro mapa
Lo primero que tenemos que hacer es decidir cuál será el tamaño de nuestro mapa. El mapa no es más que un rectángulo de N por M pantallas. Como es lógico, cuantas más pantallas tenga nuestro mapa en total, más RAM ocupará. Por tanto, el tamaño máximo que puede tener el mapa dependerá de qué características tengamos activadas en el motor para nuestro güego. Si se trata de un güego con motor simple, nos cabrán muchas pantallas. Si tenemos un güego más complejo, con muchas características, scripting y tal, nos cabrán menos.
Es muy complicado dar una estimación de cuántas pantallas nos cabrán, como máximo. En juegos de motor sencillo, con pocas características, como Sir Ababol (que, al estar construido usando la versión 1.0 de la Churrera, sólo incorpora las características básicas de un juego de plataformas), nos cupieron 45 pantallas y aún sobró alrededor de 3 Kb de RAM, con lo que podría haber tenido muchas más pantallas. Sin embargo, en otros juegos más complejos, como Cheril the Goddess o Zombie Calavera, ocupamos casi toda la RAM con mapas mucho más pequeños (24 y 25 pantallas, respectivamente).
Dependiendo de cómo vaya a funcionar tu güego, a lo mejor un mapa pequeño es suficiente. Por ejemplo, en el citado Cheril the Goddess hay que andar bastante de un lado para otro y recorrerlo varias veces para ir llevando los objetos a los altares, por lo que el juego no se hace nada corto.
Como en Mappy es posible redimensionar un mapa una vez hecho, quizá sea buena idea empezar con un mapa de tamaño moderado y, al final, si vemos que nos sobra RAM y queremos más pantallas, ampliarlo.
En el capítulo anterior hablamos de tilesets de 16 y de 48 tiles, y dijimos que usando uno de los primeros las pantallas ocupaban la mitad. Esto es así porque el formato de mapa que se usa es el que conocemos como packed, que almacena dos tiles en cada byte. Por tanto, un mapa de estas características ocupa 15×10/2 = 75 bytes por pantalla. Las 30 pantallas de Lala the Magical, por ejemplo, ocupan 2250 bytes (30×75). Los mapas de 48 tiles no se pueden empaquetar de la misma manera, por lo que cada tile ocupa un byte. Por tanto, cada pantalla ocupa 150 bytes. Las 25 pantallas de Zombie Calavera ocupan, por tanto, 3750 bytes. ¿Ves como conviene usar menos tiles?
Soy consciente de que con toda esta plasta que te he soltado te he aclarado muy poco, pero es que poco más te puedo aclarar. Esto es una cosa bastante empírica. Podría haberme puesto a estudiar cuanto ocupa cada característica que activemos de la Churrera, pero la verdad es que nunca me ha apetecido hacerlo. Sí te puedo decir que el motor de disparos, por ejemplo, ocupa bastante, sobre todo en vista genital (como en Mega Meghan), ya que necesita muchas rutinas que añadir al binario. Los enemigos voladores que te persiguen (Zombie Calavera) también ocupan bastante. El tema de empujar bloques, las llaves, objetos, tiles que te matan, rebotar contra las paredes, o los diferentes tipos de movimiento (poder volar (Jet Paco, Cheril the Goddess), salto automático (Bootee), salto acumulado (Monono)), ocupan menos. El scripting también puede llegar a ocupar mucha memoria si usamos muchas órdenes y comprobaciones diferentes.
Tú fíjate un número que ronde entre las 25 y 40 pantallas y cabrá. Y si no, se recorta y listo. También podéis esperar a que nos apetezca incorporar algún tipo de compresión RLE (que, como todos sabemos, son las siglas de Ramiro Lo Entiende) a los mapas, que es algo que tenemos en mente casi desde el principio pero que, por hache o por be, nunca hemos hecho.
Creando un proyecto en Mappy
Lo primero que tenemos que hacer es abrir Mappy, ir a File → New Map, y rellenar el recuadro donde definiremos los valores importantes de nuestro mapa: el tamaño de los tiles (16×16), y el tamaño del mapa en tiles.
En nuestro Dogmole Tuppowski, el mapa es de 8 por 3 pantallas, que María del Mar, la Mona que sabe Multiplicar, nos apunta que son un total de 24. Como cada pantalla, hemos dicho, mide 15×10 tiles, esto significa que nuestro mapa medirá 8×15 = 120 tiles de ancho y 3×10 = 30 tiles de alto. O sea, 120×30 tiles de 16×16. Y eso es lo que tendremos que rellenar en el recuadro de valores importantes (el llamado REDEVAIM):
Cuando le demos a OK, el Mappy, que es muy cumplido y muy apañao, nos sacará un mensaje recordándonos que lo siguiente que tenemos que hacer es cargar un tileset. Y eso es, precisamente, lo que vamos a hacer. Nos vamos a File → Import, lo que nos abrirá un cuadro de diálogo de selección de archivo. Navegamos hasta la carpeta gfx de nuestro proyecto, y seleccionamos nuestro mappy.bmp. Si todo va bien, veremos como Mappy es obediente y carga nuestro tileset correctamente: lo veremos en la paleta de la derecha, que es la paleta de tiles:
Ahora sólo queda una cosa más por hacer antes de empezar: necesitamos una ayuda para saber dónde empieza y termina cada pantalla, ya que los bordes de cada pantalla tienen que ser consistentes con los de las pantallas colindantes: si hay un obstáculo al borde derecho de una pantalla, deberá haber otro obstáculo al borde izquierdo de la pantalla que esté a su derecha. A veces se nos olvida, como estaréis pensando los que nos sigáis normalmente: la mayoría de los bugs tradicionales de los Mojon Twins tiene que ver con que no hemos hecho bien el mapa. No nos tomes como ejemplo y fíjate bien en los bordes 😀
Coloquemos esas guías. Selecciona MapTools → Dividers para abrir el cuadro de diálogo de las guías. Marca la casilla Enable Dividers y rellena Pixel gap x y Pixel gap y con los valores 240 y 160, respectivamente, que son las dimensiones en píxels de nuestras pantallas (esto lo sabemos de nuevo gracias a María del Mar, que ha calculado que 15×16 = 240 y 10×16 = 160). Pulsa OK y verás como el área de trabajo se divide en rectángulos con unas guías azules. Sí, lo has adivinado: cada rectángulo es una pantalla de güego. Eres un puto crack. ¡Ya estamos preparados para empezar a trabajar!
Aquí es donde hacemos el mapa. Vamos pinchando en la paleta de tiles de la derecha para seleccionar con qué tile dibujar, y luego ponemos el tile en el área de la izquierda haciendo las pantallas. Es un trabajo laborioso, lento, y, a veces, un poco coñazo. Te recomendamos que no caigas en la vagancia y hagas pantallas aburridas con amplias zonas de tiles repetidos. Intenta que tu mapa sea orgánico, irregular y variado. Las pantallas quedan mejor. También tienes que tener en cuenta que nuestro personaje tiene que poder llegar a todos los sitios. ¿Te acuerdas que al principio decidimos que haríamos que el personaje saltase alrededor de dos tiles de alto y cuatro o cinco de ancho? Hay que diseñar el mapa con eso en cuenta. Otra cosa que hay que respetar es que no debe haber sitios de “no vuelta atrás”. Eso es muy barato y muy de juego chungo de los 80. Es una caca gorda. No caigas en eso. No confundas dificultad con mal diseño.
Así que, poquito a poco, vamos construyendo nuestro mapa, que nos va quedando así (puedes cargar el mapa.fmp del paquete de materiales de este capítulo para verlo):
Recuerda ir grabando de vez en cuando en mapa en nuestro directorio map como mapa.fmp (File → Save As). Es importante que pongas siempre mapa.fmp a mano o hagas click en mapa.fmp en la lista de archivos para que se grabe en el formato fmp y no perdamos nada.
Si tu juego tiene cerrojos (tile 15) o tiles empujables (tile 14) colócalos donde quieres que salgan al empezar el güego. Por ejemplo, en esta pantalla hemos colocado un cerrojo. No te preocupes por las llaves: las colocaremos luego, cuando pongamos los enemigos y los objetos en el mapa.
Si eres, como nuestro mono Colacao, todo un coscao, habrás visto que hay una zona del mapa (en concreto, la zona superior izquierda) que no se puede acceder. Esta zona es la que corresponde a la Universidad de Miskatonic. Si recuerdas, cuando nos inventamos la paranoia de argumento que tiene el juego dijimos que la Universidad estaría bloqueada hasta que eliminásemos a todos los Brujetes de la Religión de Petete, que Meemaid había puesto por ahí para echar un hechizo mental que la cerrase para que no pudiésemos llevar las cajas. Cuando lleguemos al scripting veremos cómo añadir código para eliminar ese obstáculo durante el juego, cuando se detecte que los Brujetes de la Religión de Petete están todos muertos (es una cosa que podemos hacer con el scripting: modificar el mapa al vuelo). Por ahora, simplemente colocamos un piedro ahí y nos olvidamos:
Otra cosa con la que tienes que tener cuidado es con los pinchos: debe haber una forma de salir de cualquier foso con pinchos. Cuando el muñeco se rebota con los pinchos salta un poquito, pero no mucho, así que no los coloques en fosos profundos. Fíjate como están puestos en nuestros güegos.
Exportando nuestro mapa
Cuando hayamos terminado con nuestro mapa (o no, no pasa nada si montamos el juego con un cachito del mapa nada más, para ir probando), llegará el momento de exportarlo como tipo map y convertirlo para incluirlo en nuestro güego.
Nos vamos a File → Save As y lo grabamos como mapa.map en nuestro directorio map. Sí, tienes que escribir mapa.map. Cuando lo hayas hecho, te vas de nuevo a File → Save As y lo grabas como mapa.fmp de nuevo. Escribiendo letra a letra mapa.fmp. Hazme caso. Hazlo, en serio. Que luego perder cosas porque se te olvidó grabar el fmp después de un cambio rápido es un coñazo. Que lo tenemos más que estudiao esto. Que nos ha pasado mil veces. En serio. Hazle caso a este bicho tan mono con cara de pena:
Convirtiendo nuestro mapa a código
Para esto vamos a usar otra de las utilidades de la Churrera. De hecho, la segunda que hicimos: el gran mapcnv. Esta utilidad pilla archivos map de Mappy y los divide en pantallas (para que el motor pueda construirlas de forma más sencilla, ahorrando así tiempo y espacio). Además, si estamos usando tilesets de 16 tiles, empaqueta los tiles como hemos explicado (2 por cada byte). Así que, una vez que tengamos nuestro archivo mapa.map exportado en el directorio map, nos abrirermos una ventana de linea de comandos, y ejecutaremos mapcnv (que está en el directorio /utils) con estos parámetros:
..\utils mapa.map ancho_mapa alto_mapa ancho_pant alto_pant tile_cerrojo packed
Expliquémoslos uno a uno:
mapa.map es el archivo de entrada con nuestro mapa recién exportado de Mappy.
ancho_mapa es el ancho del mapa en pantallas. En nuestro caso, 8.
alto_mapa es el alto del mapa en pantallas. En nuestro caso, 3.
ancho_pant es el ancho de cada pantalla en tiles. Para la churrera, siempre es 15.
alto_pant es el alto de cada pantalla en tiles. Para la churrera, siempre es 10.
tile_cerrojo es el número de tile que hace de cerrojo. Para la churrera siempre ha de ser el tile número 15. Si tu juego no usa cerrojos, pon aquí un valor fuera de rango como 99. Por ejemplo, Zombie Calavera no usa cerrojos, así que pusimos aquí un 99 al convertir su mapa. Nosotros sí tenemos cerrojos en Dogmole, así que pondremos un 15.
packed se pone, tal cual, si nuestro tileset es de 16 tiles. Si usamos un tileset de 48 tiles, simplemente no ponemos nada.
Por tanto, para convertir nuestro mapa, tendremos que ejecutar mapcnv así:
..\utils mapa.map 8 3 15 10 15 packed
Con esto, tras un misterioso y mágico proceso, obtendremos un archivo mapa.h que tendremos que mover al directorio dev de nuestro proyecto.
Si abrís este mapa.h con el editor de textos, veréis un montón de números en un array de C: Ese es nuestro mapa. Justo abajo, están definidos los cerrojos en otra estructura. Como verás, habrá tantos cerrojos definidos como hayamos puesto en el mapa. Si esto no es así, es que has hecho algo mal. ¡Repasa todos los pasos!
Perfecto, todo guay, todo correcto.
Muy bien. Hemos terminado por hoy. En el próximo capítulo pintaremos los sprites del güego: el prota, los malos, las plataformas… Veremos como hacer un spriteset y como convertirlo para usarlo en nuestro güego.
Mientras tanto, deberías practicar. Algo que te recomendamos hacer, si es que aún no se te ha ocurrido, es descargarte los paquetes de código fuente de nuestros güegos y echarle un vistazo a los mapas. Abre los archivos fmp con Mappy y fíjate cómo están hechas las cosas.
¡Hasta la próxima!
Mojon Twins
En cuanto saque un poquitín de tiempo me pongo al tema, que ganitas!!!
Estupendo, :), en cuanto pueda este finde le echo un vistazo.
Gracias por el tutorial y por compartir vuestro trabajo
Por cierto, el bicho mono lo pillé del google image search buscando "bicho mono", y es obra de Leslie Levings – http://www.flickr.com/photos/leslielevings/sets/72157594536388929/
Que mejor forma que empezar el finde que con una nueva entrega del taller mojón,tendré que castigarme por las noches pa sacar tiempo pero merecerá la pena.Me río un montón leyendo los capítulos, esa frase de "los verdaderos desarrolladores empiezan a contar en el 0" jajaja se me cayó la mandibula. Gracias por el esfuerzo y las ganas que ponéis.Curioso lo del bicho mono…
Igual es adelantar, pero ¿siempre tiene que ser pantallas de 15*10? ¿Se podra cambiar en un futuro?
como siempre… geniales, y MUCHAS gracias
Quedan plazas para las clases? Muchísimas gracias por la iniciativa. Hace 20 años hacía juegos pero en Basic, no me atrevía a dar un paso mas allá, pero gracias a vosotros me he envalentonao y a ver si hago un churro como dios manda. A por la tercera clase!!!!
Seria espectacular un descargable con el curso completo en pdf
Siempre quise hacer un juego para mi +2A y nunca me atrevi a dar el primer paso. Ahora si que le voy a echar valor. Gracias amigos!!!!!
@fermin: Aquí tienes en este enlace los 3 capítulos aparecidos hasta el momento.
http://www.putlocker.com/file/FAE2D8A8F3695C07
Están separados un PDF por cada capítulo, pero la idea es que cuando esté todo completo, los juntaré y les pondré indice de acceso rápido y tal.
Para el que lo quiera descargar y siempre que a nuestros amigo mojónicos y al admin de esta peazo de página le parezca bien claro.
Por cierto, y hablando del admin… ¿sabéis por que puede ser que no hay manera de subir la imagen de un avatar propio sin que aparezca todo en color negro?
@jevilon la churrera está optimizada a 15×10. Creemos que como tamaño de pantalla es suficiente y permite que los marcadores no ocupen mucho espacio. En próximos capítulos explicaremos el tema del marcador. No obstante, si trasteas por el código creo que se puede cambiar.
@jarlaxe geniales los pdf! por nosotros perfecto, no obstante, nuestra idea es cuando terminemos también preparar un pdf tocho con todo y con añadidos que puedan salir. Pero vamos, que adelante 😀
Gracias a todos por la acogida, estamos emocionados con la idea de que algún día alguien se anime y desate su creatividad!
Gracias jarlaxe se agradece colega y sobre todo a esos mojon twins…zxspectrum forever..
Al fin la espera termino. A darle duro y parejo al Capitulo 3. Muchas gracias gente.
Y gracias por los Capitulos en PDF. Es muy practico tenerlos en ese formato. Ojala que a partir de ahora hagan lo mismo con cada uno a medida que los vayan subiendo.
@El Eternauta: Como dice Anjuel más arriba, tienen pensado publicar el manual completo en formato PDF cuando acabe todo el taller.
Y yo estoy deseando descargarlo, pero hasta que eso pase, no te preocupes que yo iré subiendo los capítulos sueltos en PDF 😉
P.D: Sigue mi avatar en negro 🙁
SpC, Heeeelp!
XD
Jarlaxe, ya puedes poner tu avatar. Voy a poner una noticia breve comentando que ya está corregido.
Un 10, estupenda iniciativa.
Necesito ayuda con la parte final de esta tercera entrega.
Cuando intento crear el mapa.h con la consola de comandos, sigo las instrucciones pero a pesar de que me sale la misma pantalla que en el tutorial, no se me crea nunca el dichoso mapa.h
Ya lo he intentado todo y no se me crea. ¿Me podeis decir si está bien explicada esa parte? ¿o si tengo que usar algo extra?
Por si sirve de algo, deciros que lo estoy haciendo desde Windows 8, que no se si tendrá que ver.
A ver si podeis ayudarme.
Gracias y un saludo.
Hola, hay una errata, en los dos puntos en los que se pone el path a mapcnv se omite el ejecutable, por ejemplo pone:
..utils mapa.map 8 3 15 10 15 packed
donde debería decir:
..utilsmapcnv mapa.map 8 3 15 10 15 packed
Hay dos lineas mal puestas, esa y otra 😉
No salen las contrabarras en mi mensaje, espero que se entienda 🙂
Por cierto el captcha es chuguísimo de la muerte. Las lineas tapan tanto lo de abajo que a veces es irreconocible el caracter 😀
Veo que en la captura de la ventana de DOS (cuando explicáis el uso de mapcnv), el primer argumento que aparecer es mapa.h, pero debería ser mapa.map, ¿no?
Hola!!!
Yo parece que también tengo problemas.
En el editor de textos me pone siempre que tengo 0 cerrojos cuando debería poner 2,como pone un poco más arriba.
Gracias!
Buenas!
Ya tengo el tileset hecho, el mapa creado e incluso el prota se mueve por el.
Mi pregunta es: ¿donde indico de que tipo es cada tile? He usado de base el tileset del Dogmole y, obviamente, mis pinchos no hacen daño, mi tile de agua funciona como bloque…
Me respondo yo:
Hay que tocar la matriz de comportamiento de tiles que hay al final del archivo config.h (Capitulo 7 de este taller 🙂 )
Una pregunta: el fondo de mi güego es azul, pero claro en mappy el tile 0 es negro (tal y como habéis explicado que debe hacerse), y en la primera compilación (que sale OK) el fondo es negro, obvio. Pero en mi tileset, el tile 0 era todo azul. ¿Cómo hago para que mi fondo de güego sea azul? Como en vuestro viaje al centro de la napia, que es rosa. Gracias!