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.
The Mojon Twins
Biennnnn!
Ya tenía bastante mono!
Y no de los que venden motos semi-nuevas XD
Gracias chicos!
…mensaje eliminado por expreso deseo de su autor…
Bueno profes, tengo una serie de dudas…
Veo que hasta ahora no a aparecido nada sobre ello y estoy empezando a ponerme nervioso 😛
Yo he compilado mi tileset con más tiles de los 16 que hemos ido viendo hasta ahora.
Añadí unos tiles extra con idea de dar más vistosidad a las pantallas. No he puesto más de los que aparecen en Dogmole como extras (bombilla, estantería, etc) y me ha quedado un resultado parecido a este que he sacado del source de dogmole
http://i.imgur.com/KFBA5P1.png
Ahora las preguntas…
1-finalmente ¿podré usar esos tiles extra mediante script como me habéis comentado en alguna ocasión, compilado tal y como está en esa imagen? ¿o me he pasado de listo y he de rehacer el tileset con solo 16 tiles?
2-En caso de servir como lo tengo ahora, en la parte del tuto cuando decíais de editar manualmente el "tileset.h" para cambiar el color ink a blaco en los tiles negros… ¿seguirá siendo la línea 279? ¿o en ese caso al aumentar mi número de tiles, ha bailado la posición de línea?
Madre mía que mal me explico, pero este no es el mejor formato para cruzar preguntas y respuestas. 😛
Gracias anticipadas!
Los tiles extra van por scripting, pero paciencia. Antes del scripting hay que explicar mil cosas más.
No, no se te habrá bailado la linea. Los charsets que importamos siempre tienen 256 caracteres. Los atributos (colores) de estos 256 caracteres siempre empiezan en la lina 279 en los archivos exportados por SevenuP.
Si necesitáis un sitio más mejor para preguntas y respuestas, solemos parar por el foro de speccy.org … Se abre un hilo para tal efecto y listos.
También podéis registraros en el foro de mojonia, pero avisadnos, porque nos entra mucho spam y no nos coscamos de los registros.
Un par de comentarios:
"Nosotros solemos poner un dibujito del protagonista y una "x", como verás en los ejemplos."
¿Poner la x no empeora (aunque sea muy levemente) la compresión?
"Por último, el marcador de llaves está en (0, 18)." -> (18,0) ¿no?
Empeora la compresión pero creo que poner el código para pintar las tres o cuatro X probablemente ocuparía más que la decena de bytes que te ahorrarías en la compresión. z88dk genera un código muy malo para depende qué cosas.
Sobre lo otro, sí. Es una errata, la corrijo en mis docs, gracias 🙂
¿Pero las X son imprescindibles o son solo una guía? Pensé que el código se encargaría de poner el número correspondiente en la coordenada y se pueden dejar los espacios vacios (eso sí, asegurandonos de que el color lo tenga correcto).
La X forma parte de lo que tu quieras poner. El motor sólo coloca los números. No tienes por qué poner X si no te hacen falta. Si te fijas, en el marco de Dogmole no hay X. Vamos, que es una decoración. Como si en vez del muñequito quieres poner un texto "VIDAS" y dos puntos.
Por cierto, el de esta web tiene que ser el captcha más complicado del universo. Casi nunca se pueden leer las letras. Y soy humano, ¿eh? ¡lo prometo! XD
"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."
Juaaaas! me doy por aludido, pues fuí yo quién preguntó como cambiar la explosión. Pero prometo "arremangarme" y cambiarla como un campeón, ya que os habéis tomado la molestia de explicarlo.
Gracias chicos.
Bueno, aquí traigo los PDF de los capítulos recopilados del taller.
Mejoras (o eso creo):
1-Subido a Skydrive para que no os pida captchas y cosas raras.
2-Dos versiones. Una con fondo NEGRO para asemejarse a tal como lo vemos en esta nuestra página, El mundo del Spectrum. Y otra con fondo BLANCO para una lectura más relajada a ojos cansados por la edad como los míos. XD
3-En la versión de fondo NEGRO, he puesto unos rebordecicos blancos a las imágenes que así lo necesitaban (en algunos casos era imprescindible para entender mejor el area que ocupan esos gráficos)
4-He resaltado en color azul todos los enlaces a descargas de los archivos para seguir el tuto.
5-Corregido la errata (18,0) por (0,18) de este capítulo 5
6-Comprimidas en ZIP las dos versiones para una única descarga más cómoda.
Aquí el enlace:
sdrv.ms/1epsKGR
Saludos!
Corregido lo del 18, 0 ¿Está ahora correcto?
Por cierto profes, una cosilla…
CITA
"Una vez hecho, lo guardamos como gfxextra.png y lo pasamos a código usando sprcnv tal y como explicamos el capítulo pasado, pero esta vez especificando extra.h como archivo de salida:
..utilssprncv.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."
A riesgo de ganarme el título de mono coscao, donde ponéis esto:
..utilssprncv.exe extra.png extra.h
no debería ser esto?
..utilssprncv.exe gfxextra.png extra.h
Parece bastante evidente si se sigue con atención el tuto, pero para algún despistadillo que pueda haber.
Si lo confirmáis lo cambio en los PDF
Saludos!
Jarlaxe, lo que creo que ha pasado es que las barras "" se las han comido en este capítulo. Cosas como:
..utilssprncv.exe
y
gfxextra.png
mas bien serán:
..utilssprncv.exe
y
gfxextra.png
vale, en mi comentario también han desaparecido las ""
🙂
———-
Jarlaxe, lo que creo que ha pasado es que las barras "" se las han comido en este capítulo. Cosas como:
..utilssprncv.exe
y
gfxextra.png
mas bien serán:
..utilssprncv.exe
y
gfxextra.png
Sí. Doble Elefante Telépata de Guerra tiene razón. En la transcripción se han perdido las barras 😀
El archivo hay que guardarlo como gfxextra.png, no "gfxextra.png".
@na_th_an: "El archivo hay que guardarlo como gfxextra.png, no "gfxextra.png"."
Mi no entender 😛
Sería "extra.png", no?
Es que has vuelto a repetir el mismo nombre de archivo XD
Es que por lo que veo esta web se come todas las barras que introduzco XD
En mi anterior comentario he escrito gfx BARRA extra.png, con BARRA una BARRA que si escribo no sale XD
O sea, que hay que grabarlo como extra.png en el directorio gfx. O sea, gfx BARRA extra.png.
A ver si los compañeros de EMS corrigen este detalle en el texto, que se hace muy confuso.
Gente perdonad pero alejandro esta liadillo estos dias. Lo antes posible se pondrá con este problemilla para buscarle solución. ¡grandes Mojones!
Sin prisa, que hace musha caló 😀
Gracias por el aviso. Ya está corregido. Efectivamente el gestor de contenidos se come varios caracteres especiales por motivos de compatibilidad. Corregiré el código para que en lugar de comerse estos caracteres lo que haga es sustiruirlos por su código HTML.
Buenas!!!
Tengo un problema de 'medidas' con el marco del juego y no consigo ver mi fallo.
La pantalla de juego me aparece desplazada a la izquierda y, por tanto, se mete dentro del grafico del marco por n lado y deja un espacio pr otro:
Ejemplos:
https://dl.dropboxusercontent.com/u/71566180/pingu1.jpg
https://dl.dropboxusercontent.com/u/71566180/pingu2.jpg
Yo he creado una imagen de 256x192px y he reservado una parte de 240x160px para la pantalla de juego.
Despues, he creado los archivos .bin tal y como se indica en este capitulo.
¿Me falta por hacer algo? ¿Estoy calculando mal?
Gracias!!
Me respondo yo mismo:
Hay que ajustar los valores de las constantes VIEWPORT_X y VIEWPORT_Y del archivo config.h para ajustar la posición de la pantalla y el marco (Capitulo 7 de este taller 🙂 )
Desde Rusia con amor, chicos… jajaa
Lo mejor es la traducción al ruso, que no es mala pero a ver quién puede traducir Chiquitadas fácilmente, jarllll…
http://viva-games.ru/stati/sozdaj-svoyu-sobstvennuyu-igru-na-zx-spectrum-chast-4