Taller Crea tu propio juego de Spectrum (capítulo 5)

Ya tenemos para todos vosotros el capítulo 5 del Taller «Crea tu propio juego de Spectrum». Hoy terminaremos de perfilar los gráficos y añadiremos las pantallas de inicio y fin del juego entre otras cosas. Esperamos como siempre que os guste y le saquéis provecho.

Capítulo 5: Terminando los gráficos (por ahora)

Antes que nada, bájate el paquete de materiales correspondiente a este capítulo pulsando en este enlace:

http://www.mojontwins.com/churrera/churreratut-capitulo5.zip

¿Qué nos falta?

Ya queda poco que dibujar. En este capítulo vamos a explicar dos cosas: por un lado, cómo cambiar los sprites extra (explosión y bala). Por otro lado, veremos cómo hacer, convertir, comprimir e incluir el marco del juego, la pantalla de título, y la pantalla del final.

Pulsa aquí para ver el capítulo completo.

Sprites Extra

En un principio el tema de cambiar los sprites extra no estaba planeado para este curso/tutorial por una razón muy sencilla: desde que dibujamos la explosión para Cheril Perils y la bala para Zombie Calavera no hemos cambiado esos gráficos para ningún güego. Sí, hemos tenido la granítica faz de sacar todos los demás güegos que tienen explosiones o balas sin cambiar esos gráficos. Como parece que hay interés en la super customización, vamos a emplear unos párrafos explicando cómo cambiarlos. Pero, ojo piojo: prepárate para ensuciarte las enaguas con sucio trabajo manual.

Huelga decir que si tu güego no tiene enemigos pisables ni balas, o si te valen las que hay, puedes pasar de esta sección como de la cacota.

Bien. Para cambiar estos gráficos lo que tenemos que hacer es sustituir los que hay definidos en el archivo de la Churrera \dev\extrasprites.h. Vamos a empezar abriendo el archivo en nuestro editor de textos no-mierdoso y echándole un vistazo. En este archivo, los chorizacos de números se usan para definir tres gráficos para sprites (y sus máscaras): los números 17, 18 y 19. El 17 es el que corresponde a la explosión. El 18 es un sprite vacío, que usa el motor para cuando falta uno de los tres enemigos como máximo que caben en una pantalla o para los parpadeos y otras cosas que ahora no recuerdo. Ese, obviamente, no lo vamos a cambiar. El 19 es el sprite de la bala, y es más pequeño (verás que hay menos números).

Cambiando la explosión

La explosión es un sprite de 16×16. [Alerta pestiño] Por cómo está construido splib2, para definir un sprite de 16×16 hay que hacerlo en la esquina superior izquierda de un cuadro de 24×24. Esto es así porque splib2 está orientado a carácter, y un cuadro de 24×24 alineado a carácter siempre podrá contener un sprite de 16×16 completo. No te preocupes si esto te suena a chino, no hace falta entenderlo (aunque si te pica la curiosidad, siempre nos puedes preguntar). Sólo lo mencionamos para que te ubiques y sepas qué vamos a cambiar. En el archivo verás tres chorizos de 24 filas de parejas números, cada uno debajo de una etiqueta ._sprite_17_X, donde X es a, b o c. Estas son las tres columnas de 24 filas de 8 pixels que componen nuestro sprite, y son los datos que tendremos que sustituir. Ubícalas bien en el archivo.

El siguiente paso es hacer un tileset vacío (un archivo png de 256×32) y dibujar en la primera casilla la nueva explosión y su máscara. Algo así:

..\utils\sprncv.exe extra.png extra.h

Lo cual nos generará un archivo extra.h en \gfx. Vamos a abrir este archivo en un editor de textos.

Este archivo contendrá definiciones para 16 sprites. Nosotros sólo necesitamos el primero de estos sprites para cortarlo y pegarlo en extrasprites.h, sustituyendo al 17. Vamos a ello: selecciona las tres columnas del sprite 1 (marcadas por las etiquetas ._sprite_1_X, donde X es a, b o c) y copialas al portapapeles.

Ahora vete a extrasprites.h, elimina las tres columnas ._sprite_17_X, pega las tres columnas ._sprite_1_X del portapapeles, y ahora, cuidadosamente, cambia cada etiqueta ._sprite_1_X por ._sprite_17_X.

¡Perfecto! Ten muuucho cuidado con esto. Asegurate de que cambias los datos correctos y de que modificas las etiquetas correctamente.

Cambiando el disparo

El disparo original es una bolita de centrada en un cuadro de 8×8. Pusimos una bolita porque usamos el mismo gráfico para disparos en todas las direcciones, así que una forma “orientada” no nos vale.

De la misma forma que un gráfico de 16×16 hay que definirlo en un cuadro mayor de 24×24 por el tema del posicionamiento en la pantalla, uno de 8×8 hay que definirlo en un cuadro de 16×16 o, lo que es lo mismo, en dos columnas de 8×16 pixels. En el archivo extrasprites.h son los chorizos que hay debajo de las etiquetas ._sprite_19_a y ._sprite_19_b.

Por motivos de velocidad, las balas no tienen máscara. Eso significa que el gráfico se define en el primer valor de las ocho primeras lineas. Como verás, estos 8 valores son 0, 0, 24, 60, 60, 24, 0, 0. Si pasas a binario los valores y los pones uno encima de otro verás como forman una pelotita:

00000000
00000000
00011000
00111100
00111100
00011000
00000000
00000000

Nosotros vamos a cambiarlo, por ejemplo, por una estrella ninja (amigos, un poco de imaginación):

00000000
00010000
00011000
00100110
01100100
00011000
00001000
00000000

Podríamos pasar los valores a decimal y sustituirlos, pero no es necesario, porque el ensamblador de z88dk es un tío competente (como Vicente, el mono inteligente) y se traga los binarios directamente si les pegamos al principio una @, así que lo que haremos será sustituir los primeros números de las 8 primeras parejas de valores que hay bajo ._sprite_19_a por algo así:

Joder, tío, qué pifostio

Sí, intenta no cargarte nada. Y te fastidias, por preguntar. Es probable que ahora mismo estés pensando ahora que la explosión y la bala que vienen incluidas por defecto tampoco están tan mal.

Pantallas fijas

Bueno, vamos con el tema de las pantallas fijas. Básicamente, los güegos de la Churrera llevan tres pantallas fijas: la pantalla de título, que es la que muestra, además, el menú (para seleccionar el tipo de control y empezar a jugar), la pantalla del marco de juego, donde se ubicarán los marcadores de vidas, objetos, y cosas así, y la pantalla del final, que será la que se mostrará una vez que el jugador haya cumplido el objetivo encomendado.

Para ahorrar memoria, además, se ofrece la posibilidad de que la pantalla de título y la pantalla con el marco del juego sean la misma, con lo que ahorraremos bastante memoria, y que será la opción que tomaremos para nuestro Dogmole. Pero no te preocupes que lo explicamos todo.

Otra cosa que no quiero dejar de mencionar es que las pantallas se almacenan en el güego en formato comprimido. El tipo de compresión empleado (como casi todas las compresiones) funciona mejor cuanto más sencillas sean las imagenes. O sea: cuanta más repetición y/o menos cosas haya en las pantallas, menos ocuparán al final. Ten esto muy en cuenta. Si te ves apurado de memoria, una forma de ahorrar que funciona muy bien es hacer que tus pantallas fijas sean menos complejas.

La pantalla de título

Como ya hemos mencionado, se trata de la pantalla que se muestra con el título del güego y las opciones de control. La selección de control es fija: si el jugador pulsa 1 seleccionará el control por teclado. Si pulsa 2, elegirá Kempston, y si pulsa 3 es porque quiere jugar con un joystick de la norma Sinclair (Interface 2, puerto 1). ¿Qué quiere decir esto? Pues que tendremos que dibujar una pantalla que, además del título del güego, muestre estras tres opciones. Por ejemplo, algo así:

Cuando hagas la tuya, guárdala como title.png en el directorio \gfx.

La pantalla del marco de juego

Aquí sí que hay más chicha. La pantalla del marco del juego debe reservar varias zonas importantes y luego separarlas con un adorno e indicadores. Las zonas que tenemos que reservar son:

El área de juego, que es donde pasan las cosas. Como habrás adivinado, debe ser igual de grande que cada una de nuestras pantallas. Si recuerdas, las pantallas son de 15×10 tiles y, por tanto, ocupan 240×160 píxels. Debes reservar una zona de ese tamaño como área principal de juego.

El marcador de vidas/energía/vitalidad/lo que sea: son dos dígitos numéricos que se dibujarán con la fuente que definiste cuando hicimos el tileset. Debes ubicarlo en alguna parte del marco, añadiendo algún gráfico que le de significado. Nosotros solemos poner un dibujito del protagonista y una “x”, como verás en los ejemplos.

El marcador de llaves (si usas llaves en tu güego). Tiene las mismas características que el marcador de vidas.

El marcador de objetos (si usas objetos en tu güego). Idem de idem, para los objetos.

El marcador de enemigos matados (si se pueden matar enemigos y es importante contarlos). Pues lo mismo.

Todas estas cosas las podemos colocar donde nos venga en gana, siempre que estén alineadas a carácter. Además, deberemos apuntar la posición de cada una de estas cosas (en coordenadas de carácter, esto es, 0 a 31 para la X y 0 a 23 para la Y), porque luego habrá que indicarla en la configuración de la churrera (como veremos dentro de un par de capítulos).

Veámoslo con un ejemplo. Esta es la pantalla del marco de juego de Lala Prologue. Veamos los diferentes elementos. En lala tenemos llaves y además hay que recoger objetos, por lo que tendremos que poner esas dos cosas, junto con el marcador de energía, en el marco, tal y como vemos:

El área de juego, como vemos, empieza en las coordenadas x = 1, y = 2, o sea, en (1, 2).

El espacio que hemos dejado para el marcador de energía está en (4, 0).

El marcador de objetos aparece tal que en (11, 0).

Por último, el marcador de llaves está en (18, 0).

Como digo, hay que apuntar todos esos valores porque habrá que usarlos a la hora de construir la configuración de nuestro güego, dentro de un par de capítulos.

Cuando tengas la tuya, se graba como marco.png en el directorio \gfx.

Pantalla de título y marco combinados

Desde muy temprano empezamos a hacer esto porque nos ayudaba a ahorrar un montón de memoria. El tema es sencillo: a una pantalla del marco de juego le añades el título y las opciones del menú dentro de la zona reservada para el área principal. La verdad es que queda bastante bien, y, reiteramos, podrás ahorrar bastante memoria.

Esto es, de hecho, lo que vamos a usar en nuestro Dogmole, tal y como vemos aquí:

Como vemos, por un lado tenemos el título del güego y las opciones de control, como explicamos cuando hablamos de la pantalla de título. Por otro lado, tenemos el marcador del juego. El área de juego, como se verá, se mostrará sobre el espacio que ocupa el título y las opciones de control:

El área de juego estará colocada en las coordenadas (1, 0).

El contador de enemigos eliminados (los hechiceros) se dibujará en (12, 21).

El contador de cajas (o sea, los objetos) se dibujará en (17, 21).

El contador de vidas se dibujará en (22, 21)

Por último, el contador de llaves lo tendremos en (27, 21).

En este caso, la pantalla de título/marco combinados se guarda como title.png en \gfx. No habrá archivo marco.png para los juegos que combinen título y marco en la misma pantalla, como es nuestro caso con Dogmole.

La pantalla del final

Es la pantalla que se muestra cuando el jugador se acaba el güego con éxito. Aquí no hay ninguna restricción: puedes dibujar lo que quieras. Si tiene gracia queda mejor, pero si te gusta hacer güegos serios a lo mejor no pega. Esta es la pantalla del final de Dogmole:

Cuando la tengamos la grabaremos como ending.png en el directorio gfx.

Convirtiendo las pantallas a formato Spectrum

Para esto vamos a hacer uso, de nuevo, del muy apañadísimo SevenuP. Puedes usar otros programas para estos menesteres, pero como ya tenemos SevenuP pues vamos a usarlo ¿no?. Iniciamos, pues SevenuP. Una vez abierto, pulsamos I de Importar. En el cuadro de selección de archivos que aparece buscamos nuestro title.png. SevenuP cargará el archivo y lo convertirá al formato de pantalla del Spectrum. Pulsamos S de guardar, y lo grabamos en \gfx como title.scr.

Hacemos lo mismo para marco.png (si lo vamos a usar) y ending.png. Al final deberemos quedarnos con title.scr, marco.scr (si lo vamos a usar) y ending.scr en \gfx. No seas tontuelo y no borres los png, por si luego quieres modificar algo o reaprovechar el marco para otro güego (ñie je je).

Comprimiendo las pantallas

Como te habrás dado cuenta, los 6912 bytes que ocupa cada pantalla por tres (o por dos) son un pasote, por lo que habrá que comprimirlas. Para eso usaremos el compresor apack.exe del paquete de la biblioteca aplib. Tranqui, lo hemos incluido en la carpeta utils. Abrimos nuestra ventana de linea de comandos, nos vamos al directorio gfx y comprimimos cada scr en un archivo que se llame igua pero con bin al final con estas tres ordenes (o dos, si no vas a usar el marco separado).

..\utils\apack.exe title.scr title.bin
..\utils\apack.exe marco.scr marco.bin
..\utils\apack.exe ending.scr ending.bin

Con esto habremos obtenido tres (o dos) archivos .bin que tendremos que copiar a la carpeta \dev.

Si te fijas, el tamaño de los archivos ha descendido drásticamente. En el caso de Dogmole, title.bin ocupa 1277 bytes y ending.bin 1084 bytes. Entre los dos suman 2361, que es bastante menos que los 13824 bytes que ocuparían sin comprimir.

Y ya hemos terminado

Jo ¿ya? Vaya capítulo aburrido. Lo sé. Pero bueno, era necesario. En el próximo capítulo aprenderemos a colocar los enemigos, los objetos y las llaves en el mapa del güego. Y pronto, muy pronto, podremos compilar por primera vez para empezar a verlo todo en movimiento.