SUVLEIR 3.0 (Super Ultra Vector Library Experience Inspire Redux 3.0)

Vamos a hacer un pequeño paréntesis en las entregas del tutorial que tenemos entre manos para hablar del lanzamiento de este producto, una biblioteca para ZX Spectrum que permite mostrar sencillas imagenes vectoriales en pantalla, que acaba de llegar a su tercera versión con dos novedades importantes:

• Nueva interfaz ZX Basic. Britlion ha portado a ZX Basic la rutina PFill de Alvin Albrecht, rutina de splib2 que SUVLEIR empleaba para realizar los rellenos con patrón empleados en los diseños. Esto me ha permitido crear un gfxparser nativo de ZX Basic, con lo que emplear estos dibujos en programas de ZX Basic es un juego de niños.
• Nueva capa de durezas. No, no tiene nada que ver con los callos en la planta del pie, sino con una capa «oculta» asociada a nuestra imagen en la que podemos especificar qué caracteres son traspasables y qué caracteres no lo son. Esto nos sirve para poder usar los diseños que creemos como fondos de un juego.

Como tenemos muy frescas las rutinas de movimiento cenital del tutorial de programación en ZX Basic (ver este capítulo), vamos a emplear esos conceptos para explicar cómo podemos usar SUVLEIR 3.0 para generar las pantallas de fondo de nuestros juegos.

Antes que nada, nos vamos a pasar por los foros de Mojonia para descargar SUVLEIR 3.0.

Vemos que el paquete de la biblioteca viene con tres directorios. Nosotros vamos a necesitar el contenido de dos de ellos: cdraw, donde está el programa para diseñar los gráficos y asociarles un mapa de durezas, y gfxparser_Bas, donde está el código que necesitaremos para interpretar los diseños desde nuestro programa ZX Basic.

Como nos gusta ser ordenados, crearemos una carpeta de proyecto con subcarpetas /dev, /gfx y /util. Por lo pronto, copiaremos en /dev los archivos BASIC de gfxparser_Bas (los archivos gfxparser.bas y SPPFill.bas). En /gfx copiaremos un spriteset, que tendremos que diseñar de un modo especial (invertido) que explicaremos más abajo. Por último, en /util copiaremos el contenido de la carpeta cdraw, esto es, el programa para diseñar las pantallas.

También copiaremos en /dev una versión especial de fourspriter, fsp2.1.xor.bas, que podéis descargar desde aquí. Es una modificación de fourspriter 2.1 con la particularidad de que mezcla con XOR los sprites con el contenido de la pantalla.

Haciendo un spriteset

Hemos dicho que el spriteset iba a ser un poco particular: normalmente, los diseños de cdraw se mostrarán con un PAPER claro y un INK oscuro y, por lo tanto, tendremos que diseñar nuestros sprites de acuerdo con esto. Lo más sencillo es pintarlos así en tu programa de gráficos preferido, y, cuando termines, invertir la imagen para que quede el fondo negro y la tinta blanca. Así, la importación con SevenuP no dará ningún problema (podremos hacerla directamente sin tener que tocar nada). El spriteset debería ser algo parecido a esto (usaremos los 64 primeros bloques para animar a nuestro protagonista):

Lo reordenamos con reordenator.exe (que puedes encontrar aquí) y lo importamos con SevenuP y convertimos a BASIC tal y como se explica en este capítulo del tutorial de ZX Basic y fourspriter.

Dibujando las pantallas con cdraw

Cdraw es un editor bastante rudimentario. Lo programé en dos patás sin echarle demasiada cuenta porque detesto programar aplicaciones. Desde aquí hago un llamado a un alma caritativa que se ofrezca para hacer un cdraw mejor. Yo, sinceramente, paso de mejorarlo.

Podemos usar cdraw para dibujar las pantallas de nuestro juego. El editor está preparado para mostrar una imagen fondo.pcx cuando pulsamos la tecla «D». Por defecto, este fondo.pcx es una rejilla de 8×8 que nos viene de perlas. Lo activamos, y dibujamos nuestro fondo fijándonos en la rejilla, más o menos, ya que luego la colisión tendrá la resolución de dicha rejilla.

Posteriormente, desactivamos el fondo (volviendo a pulsar «D») y rellenamos nuestra imagen. Recordemos que cada color equivale a un tramado, cuanto más oscuro sea el color, más oscuro será el tramado. El 4, por ejemplo, es el tramado al 50%, o sea, el del tablero de ajedrez. Cualquier número mayor será más claro (con más blanco y menos negro) y cada número menor será más oscuro (con más negro y menos blanco), salvo la trama 5 que es un diseño de ladrillos. Las tramas se pueden cambiar muy fácilmente modificando gfxparser.bas, por cierto.

Para terminar, tenemos que crear la capa de durezas. Para ello, activamos el modo de durezas pulsando G, con lo que nos aparecerá una rejilla sobre nuestro dibujo. En este modo, haciendo click con el botón izquierdo marcamos una celda como «obstáculo», y con el botón derecho la marcamos como «traspasable». Así, con paciencia, vamos construyendo el tema…

Cuando hayamos terminado, pulsamos «S», que generará import.bin en el mismo directorio, y luego ESC para salir. Ahora cogemos ese import.bin, lo renombramos a pant_01.bin, por ejemplo, y lo copiamos en /dev. Repetiremos el proceso para todas las pantallas que queramos hacer.

Montando las pantallas en nuestro proyecto

Lo primero será crear el archivo principal del proyecto, que llamaremos test_suvleir.bas, por ejemplo. Lo primero que tiene que haber en este archivo es una ristra de include once para incluir la versión modificada de fourspriter, el módulo gfxparser.bas, nuestro spriteset.bas y un archivo pantallas.bas que crearemos seguidamente.

' Prueba SUVLEIR 3.0 + Fourspriter XOR
#include once "fsp2.1.xor.bas"
#include once "gfxparser.bas"
#include once "spriteset.bas"
#include once "pantallas.bas"

Ahora vamos a introducir las pantallas en nuestro proyecto. Para ello creamos pantallas.bas, que será donde incluyamos los binarios de cada pantalla, cada uno de ellos precedido de una etiqueta para poder referenciarlas luego desde el código. Como nosotros sólo tenemos una pantalla, nuestro pantallas.bas tendría esta pinta:

' Pantallas bas
Sub scrDummyContainer
pantalla01:
Asm
   Incbin "pant_01.bin"
End Asm
End Sub

Para añadir más pantallas, solo hay que añadir más etiquetas y más bloques asm dentro del Sub scrDummyContainer. La etiqueta que colocamos (pantalla01) será la que empleemos para apuntar a la pantalla que queramos mostrar cuando llamemos al parseador.

Mostrando una pantalla

Para mostrar una pantalla hay que llamar a la función gpParseBinary, que se encuentra en gfxparser.bas. Vamos a probarlo. Nos vamos a nuestro archivo principal del proyecto, test_suvleir.bas, y escribimos este código:

' Prueba
Border 0: Paper 7: Ink 0: Cls
gpParseBinary (@pantalla01)

Como veis, simplemente tenemos que llamar a la función gpParserBinary pasándole la dirección (con @) de la etiqueta que hemos colocado justo antes del bloque Asm que contiene el Incbin que importa nuestra pantalla. Si compilamos y ejecutamos nuestro proyecto (con un zxb -t -B -a test_suvleir.bas), veremos nuestro diseño en pantalla.

Cómo se usa la capa de durezas

La capa de durezas se incluye al final de la imagen, comprimida en RLE. Cuando llamamos a gpParseBinary, la capa asociada a la imagen que se muestra se descomprime y se almacena en un buffer interno. A partir de ese instante, podremos consultar la dureza de la casilla situada en (x, y) haciendo una llamada a gpisHard:

If gpisHard (x, y) Then Print "obstáculo en ";x;",";y;".": End If

Empleando esta función, por lo tanto, podremos modificar la rutina de movimiento que hemos visto en el tutorial para que use esta función a la hora de comprobar si nuestro muñeco puede o no avanzar. Quedaría algo así como:

Sub muevePibe ()
    '' Detectar "O": Sexta semifila, bit 1
    If (In (57342) bAnd 2) = 0 Then
        doStep ()
        pFacing = 48
        ' Puedo moverme?
        If pX > 0 And Not gpisHard (pX - 1, pY) _
            And Not gpisHard (pX - 1, pY + 1) Then
            pX = pX - 1
        End If
    End If

    '' Detectar "P": Sexta semifila, bit 0
    If (In (57342) bAnd 1) = 0 Then
        doStep ()
        pFacing = 32
        ' Puedo moverme?
        If pX < MAPSCREENWIDTH + MAPSCREENWIDTH - TILESIZE _
            And Not gpisHard (pX + 2, pY) _
            And Not gpisHard (pX + 2, pY + 1) Then
            pX = pX + 1
        End If
    End If

    '' Detectar "Q": Tercera semifila, bit 0
    If (In (64510) bAnd 1) = 0 Then
        doStep ()
        pFacing = 16
        ' Puedo moverme?
        If pY > 0 And Not gpisHard (pX, pY - 1) _
            And Not gpisHard (pX + 1, pY - 1) Then
            pY = pY - 1
        End If
    End If

    '' Detectar "A": Segunda semifila, bit 0
    If (In (65022) bAnd 1) = 0 Then
        doStep ()
        pFacing = 0
        ' Puedo moverme?
        If pY < MAPSCREENHEIGHT + MAPSCREENHEIGHT - TILESIZE _
            And Not gpisHard (pX, pY + 2) _
            And Not gpisHard (pX + 1, pY + 2) Then
            pY = pY + 1
        End If
    End If
End Sub

Como vemos, la adaptación es nimia. Con esto y un bizcocho, tendremos a nuestro muñeco andando por la pantalla. Bueno, antes tenemos que hacer los típicos manejes y escribir un bucle principal, pero todo eso lo podéis ver en el paquetito que podéis descargar pulsando aquí.

Espero que esto os sirva para probar una nueva manera de generar las pantallas de un juego.