Los Gráficos.

Hoy vamos a hablar del apartado gráfico, y a dejar los mismos preparados para que nuestro programa los maneje. En nuestro caso ya tenemos los gráficos definitivos (Matriax suele ser más rápido haciendo los gráficos que yo comenzando a programar), pero esto puede no ser así, en esta situación podemos hacer uso de bloques rudimentarios que representen determinados gráficos, para luego sustituirlos por los finales.

Los dos "pantallazos" que podéis ver están generados por el motor del juego. Falta algún retoque a determinados gráficos, ajustar alguna cosilla, pero el aspecto es más o menos definitivo. También tenemos dudas sobre el espacio vacío que queda debajo de la zona de juego. Hay varias ideas sobre ello: Poner un rótulo con la palabra "Saimazoom", mostrar mensajes de ayuda sobre el juego (te quedan 'x' sacos, se te acaba el agua...) o centrar la zona de juego y extender las "ramas" superior e inferior del interface hasta el lateral izquierdo. El amarillo "doloroso" del fondo del interface es provisional. Velamos por vuestros ojos y será sustituido :)

Lo primero que tenemos que tener claro es como vamos a representar el juego en pantalla: resolución, si vamos a permitir cambiarla, pantalla completa o no, etc. En nuestro caso nos hemos inclinado por una resolución de 640x480 a pantalla completa. Teniendo en cuenta que la resolución del juego en su versión Spectrum era de 256x192, nos da que tenemos que escalar los gráficos a 2’5 veces su tamaño original.

Esto nos lleva a que cada ‘tile’ o bloque gráfico que en el juego original ocupaba 24x24 pixels, en nuestro caso ocupará 60x60, y de este tamaño será cada uno de los bloques gráficos, tanto de los decorados como de los sprites.

Vamos a comenzar viendo la forma en la que vamos a almacenar los gráficos del juego. Fenix pone a nuestro servicio su propio sistema de fichero (FPG) como contenedor para almacenar los gráficos y disponer de ellos y dos herramientas : FPG y MAP para manipularlos.

Los gráficos están creados en formato PNG, y el primer paso que vamos a realizar es portarlos a formato MAP, el que utiliza Fenix. Además le asignaremos las coordenadas de impresión en el centro del gráfico, que será el punto que se tome como referencia para imprimir el gráfico en la pantalla.

Para portar a MAP lo hacemos con la siguiente orden:

MAP –m fichero.png

Y para asignar un punto de control en el centro:

MAP +center=30,30 fichero.map

Notaremos como la extensión del fichero ha cambiado, mejor dicho, se ha creado un fichero nuevo con el mismo nombre del original pero con la extensión MAP apropiada.

Los valores que le damos como parámetro (en esta ocasión 30,30) equivalen a la medida del gráfico dividida por dos, para que sean el centro exacto del mismo.

En el manual de referencia de Fenix tenemos una descripción más amplia de todos los parámetros que se pueden asignar a un MAP y también podemos hacer que el programa muestre una relación de ellos ejecutando MAP sin ningún parámetro. Entre ellos el nombre, puntos de control, animaciones, etcétera. Siempre es bueno añadir al menos un nombre que identifique claramente a nuestro gráfico, ya que en otro caso tendremos que identificarlo por el nombre del archivo.

Una vez que tenemos los gráficos en el formato apropiado, tenemos que introducirlos en un archivo contenedor FPG. Esta tarea es muy sencilla utilizando la utilidad FPG.

El primer paso es crear el archivo contenedor FPG vacio, para ello invocamos al programa con el parámetro ‘n’:

FPG –n fichero.fpg

Le podemos dar el nombre que deseemos, en nuestro caso el fichero será 01.fpg

A continuación añadimos los gráficos MAP al archivo FPG:

FPG –a 01.fpg 01:fichero.map

Con esta orden añadimos al fichero saimazoom.fpg el archivo MAP en la posición indicada antes del nombre del archivo, y separándolos con dos puntos. Si no lo hiciéramos así, se sustituiría el primer gráfico por el recién añadido. Además este código se utilizará para referirnos al gráfico cada vez que tengamos necesidad de ello para mostrarlo en pantalla, por ejemplo.

Como en el caso de MAP, FPG tiene muchas más opciones, os remito de nuevo al manual de Fenix. Una bastante útil es ‘-l’, que nos listará todos los archivos MAP contenidos en el FPG mostrando datos interesantes como el código del gráfico, nombre del archivo MAP, el nombre que le hemos asignado en caso de que así fuera, y el tamaño del mismo.

Un archivo FPG puede contener hasta 999 gráficos y se pueden ir añadiendo sobre la marcha los que deseemos y con el número de código que nos apetezca, que no tiene porque ser correlativo. En lo que sí deberemos tener mucho cuidado es en no asignar el mismo código a dos gráficos, ya que el segundo que añadamos eliminará al primero.

En nuestro caso vamos a asignar los códigos de la siguiente manera:

Del 1 al 49 para “Tiles” del decorado y objetos.
Del 50 al 99 para los sprites.
Del 100 en adelante para rótulos, interface y gráficos varios.

Nos sobrarán muchos códigos entre zona y zona, pero así los tenemos organizados y es fácil añadir más gráficos sobre la marcha sin que queden desperdigados por el fichero FPG. Estos códigos son los que meteremos luego en el fichero con el esquema del mapeado para que el proceso correspondiente genere cada pantalla. Hablaremos de ello en la siguiente entrega.

También tenemos la opción de tener varios ficheros FPG, por ejemplo para el caso de que nuestro juego tenga demasiados gráficos y queramos dividirlos por clases en cada fichero. O para dar la posibilidad de que el usuario seleccione entre varios sets diferentes.

Bueno, ahora ya tenemos los gráficos metidos en su contenedor FPG correspondiente, numerados y con el centro asignado. Hasta la siguiente entrega en la que podremos navegar por las pantallas y ver todo el mapeado..