Día 4

Muy bien, ya conocemos el sistema para cargar fondos, es el turno de los sprites. Un sprite es un gráfico que puede representar miles de cosas: el protagonista del juego, las opciones de un menú, proyectiles... y así hasta infinitas cosas. Sin duda es la parte más entretenida de aprender de PAlib, puesto que los sprites se pueden animar, desplazar en pantalla, hacer que salten (usando gravedad)... Seguro que os lo pasaréis pipa siguiendo este tutorial :).

Antes de comenzar: conceptos previos

Una vez más, deberemos repasar y ampliar anteriores conceptos, así como aprender unos nuevos. La mayoría seguro que os sonarán, pero mejor asegurarnos:

• Píxeles: Un píxel es la parte más pequeña en la que se divide un gráfico (dibujo) mostrado en pantalla. Una pantalla de la Nintendo DS y DS Lite se divide en 256 píxeles de largo por 192 de alto. Veréis mucho por ahí el dato 256x192.
• Paleta: Una paleta es el conjunto de colores que puede mostrar un píxel. Los colores se consiguen de la mezcla de los 3 colores primarios (Rojo, Verde y Azul, los veréis escritos como RGB). En el caso de los sprites, como muchísimos estarán en la misma paleta de color, una sola paleta servirá para varios sprites. Una paleta puede contener una inmensa cantidad de sprites (recomendable que no os paséis...), y una pantalla de DS soporta 16 paletas simultáneas (de sprites, los fondos van aparte). Además, los sprites pueden crearse con paleta de 16 colores, 256 colores (el más usado con diferencia) y 16bits.
• Prioridad del Sprite: Si recordáis lo visto en el Día 1, sabreis que las capas son la prioridad que tienen los gráficos para aparecer unos encima de otros. En el caso de los sprites, el término técnico es la prioridad de ese sprite. 0 estará delante de todo y luego el resto se irán solapando uno detrás de otro.
• VRAM: (VideoRAM) es la RAM reservada para el cargado de gráficos en pantalla. Si sois novatos, no le haréis mucho caso. Si sois más experimentados, os interesará saber cómo administrar esta RAM.
• Color transparente: A la hora de hacer sprites, sería muy molesto que nos quede una forma cuadrada junto al sprite al cargarlo, debido al marco que no ocupa éste. Para que no aparezca, podremos poner un color transparente. Dicho color no se verá en la DS, permitiendo ver los sprites y fondos de capas inferiores.
• Tamaño del Sprite: El tamaño que tendrá nuestro sprite. Podremos hacerlo desde 8x8 a 64x64 (Sprites mayores tendrán que ser "troceados" en otros más pequeños).
• Frames: Un frame es un fotograma de un sprite que representa una determinada reacción, movimiento, etc. La función de un frame es darle "vida" al sprite. Es como, por ejemplo, cogiésemos varios papeles, cada uno con un personajillo haciendo algo, y los pasásemos a gran velocidad, dando sensación de que el personajillo tiene vida y se mueve. Ejemplo a lo bestia. Es necesario que todos los frames tengan el mismo tamaño para que la animación funcione correctamente.

Enseguida veréis que fondos (día 3) y sprites son tremendamente similares. Las diferencias, realmente, son mínimas. Eso no quita que los explique en detalle ;).

Ah, y por cierto, no es difícil deducir que para practicar con sprites necesitaremos sprites, ¿no? A continuación una lista con las características de los sprites que usaremos en este tutorial:

• Un sprite normalillo, en general cualquier dibujito puede servir. Alguno morirá de ganas de usar a Mario, pero nosotros usaremos este, cuestión de gustos xD.
• Un sprite con la leche de frames, cuantos más mejor. Por ejemplo... este mismo.

Muy bien, ahora toca transformar nuestros sprites a lenguaje binario. Usaremos el mismo programa que con los fondos: el PAGfx (más información en el día 3, Paso 1: Obtener los fondos)

Paso 1: Obtener los sprites

Antes de nada, pondremos una imagen con forma de sprite. Un sprite no es como un fondo EasyBg, debe tener un tamaño determinado. Los aceptados por PAlib para su compilación, son:

Tabla de tamaños. Sacada de la página oficial de PAlib

En definitiva, cualquiera de esos tamaños. Las únicas excepciones son 8x64, 16x64 y 64x8, 64x16. Recordad que el tamaño se indica anchoxlargo. Si el sprite es más pequeño, lo encuadráis y punto. Recordad que los espacios que no queramos que se vean se tienen que colorear con el color que seleccionemos como transparente en el PAGfx.ini. Una vez hecho esto, guardamos la imagen en formato *.PNG.

Preparamos el PAGfx en la carpeta source tal y como se explica con los fondos en el día 3. Hecho esto, abrimos el PAGfx.ini. Una vez más, veremos su contenido:

#TranspColor Magenta
 
#Sprites :
 
#Backgrounds :
 
#Textures:

Si antes usamos el apartado #Backgrounds, ahora el que nos interesa es el apartado #Sprites (seguro que ya lo habíais adivinado xD). Recordad que #TranspColour es el color transparente, tanto de nuestros sprites como de nuestros fondos, fijaos bien cuál escogéis (Negro, Blanco, Verde y Magenta).

Procedamos a convertir los sprites. Lo primero de todo es indicar la carpeta en la que está, en forma de directorio de toda la vida. Por ejemplo, C:\este\es_un\ejemplo\de_directorio_de\sprite.PNG. Recordad que si el sprite está en la misma carpeta que el convertidor, basta con que abreviéis a sprite.PNG.

Seguidamente, irá la paleta de colores en la que está nuestro querido sprite. Las posibilidades son:

• 16colour: Para sprites a esta paleta.
• 256colour: Si está a paleta de 256. Sin duda, será prácticamente el único que uséis, es más que de sobra.
• 16bit: Para el infinito de 16bit.

La paleta se escribe tal y como he puesto, no separéis el número de la palabra o habrá error.

Y, por último, el nombre de la paleta en la que se guardará la información básica del sprite. Poned de nombre lo que os venga en gana (sin espacios), teniendo en cuenta que sprites con el mismo nombre de paleta se guardarán en un solo archivo de paleta.

En definitiva, en el apartado de #Sprites debería quedar algo como esto:

sprite.PNG 256colour paleta

Con esto, deberían estar estos archivos junto al compilador (aparte de los fondos y demás):

• PAGfx.txt: Este archivo se crea al ejecutar el archivo PAGfx.ini. No sirve de nada para nuestros intereses, únicamente es el historial de conversión del programa.
• bin (carpeta): En esta carpeta, se incluyen los archivos binarios de nuestros gráficos. Se trata de más archivos que los que hay fuera. Son los imprescindibles para que todo vaya, pero no nos interesará profundizar en este directorio... de momento.
• all_gfx.c y all_gfx.h: Exactamente igual que los fondos, ng¡cluyen la información de absolutamente TODOS los gráficos convertidos (fondos, sprites y texturas), así que si los tenías de antes por los fondos, se sustituirán con la información de ls sprites.
• nombresprite.c: Información del sprite convertido. Es necesario junto a su archivo de paleta para poder usar el sprite en el juego. Hay tantos archivos como sprites hayas convertido, cada uno con su nombre.
• nombrepaleta.c: Información sobre la paleta de sprite. Recuerda que una sola paleta puede almacenar información de varios sprites. Habrá tantos archivos como paletas hayas cargado con distinto nombre.

Y con esto ya tenemos todos los archivos necesarios. Y ahora: ¡Rápido, al batmov... esteem código!

Paso 2: Cargar sprites

Antes de nada, tenemos que recordar cómo añadir los gráficos a nuestro proyecto:

#include <PA9.h>   //Include de las PAlib
#include "gfx/all_gfx.c"
#include "gfx/all_gfx.h"

¿Refrescada ya la memoria? xD. Simplemente hay que añadir los archivos all_gfx.c y all_gfx.h al proyecto para tener los sprites listos para usarse.

Cargar sprites no es mucho más difícil que cargar un fondo cualquiera. Únicamente hay que conocer estas funciones:

PA_LoadSpritePal(pantalla,prioridadpaleta,(void*)nombrepaleta_Pal);
//Cargamos la paleta con el sprite que queramos cargar.
//Únicamente será necesario si no estaba cargada con anterioridad.
//Recuerda que una sola paleta sirve para varios sprites.
 
PA_CreateSprite(pantalla,prioridadsprite,(void*)nombresprite_Sprite,tamañoxy,paletacolores,paleta,posicionx,posiciony);
//Creamos el sprite en pantalla.
//Para el tamaño, usaremos OBJ_SIZE_xXy. siendo x (minúscula) el ancho e y el largo.

La única dificultad añadida, es tener que cargar la paleta. Y aún así no tiene nada de complicado...

¡Veamos ahora estas funciones en un ejemplo práctico!:

#include <PA9.h>
 
#include "gfx/all_gfx.c"	//Includes con info de gráficos
#include "gfx/all_gfx.h"	//(en este ejemplo sprites)
 
 
int main(void) 
{
 
   // init PA_Lib
   PA_Init();
   PA_InitVBL();
 
	PA_LoadSpritePal(0,0,(void*)sonic_Pal);  //Cargaremos la paleta con el(los) sprite(s) que queramos crear ahora.
 
	PA_CreateSprite(0,0,(void*)TutorialPAlibDia4EjemploSpriteEstatico_Sprite, OBJ_SIZE_32X64,1,0,10,10);
        //Creamos el sprite (lo sé, un nombre un poco largo :P
 
   while(1)
  { 			   
		PA_WaitForVBL();
   }
 
   return 0;
}

¡Con esto tendremos un precioso sprite en pantalla! He aquí el resultado final:

Un sprite para 2 pantallas

Si aún os suena vagamente la idea de los DualBackGrounds, he llegado a tiempo...

Un sprite Dual tiene la característica de poder pasearse por las 2 pantallas como si fuese una sola. Este efecto es muy usado por las tropas Nintenderas, así que no os resultará desconocido.

Ahora bien, ¿qué código debo conocer para usar sprites Dual?

PA_DualLoadSpritePal(nºpaleta,(void*)nombrepaleta_Pal);
// EXACTAMENTE igual que los sprites normales, sólo que no se indica pantalla (lógico).
 
PA_DualCreateSprite(nºsprite,(void*)nombresprite_Sprite,tamañoxy,nºpaletacolor,nºpaleta,posicionx,posiciony);
//Creamos el sprite Dual. Ten en cuenta que la posición y ahora va de 0 a 383.
 
PA_SetScreenSpace(espacio);   //Con esto puedes indicar el espacio (en píxels) que hay entre pantallas.
//0 para pantallas juntas.

Y ya está. Ahora vuestro sprite tiene el doble de espacio para pasear ;).

NOTA: Si no vais a mover el sprite verticalmente, es una estupidez usar esto...

Ahora pensaréis... "Esto no es más que una estatua. Aún si pudiese animarlo y darle vida..."

¿Y quién dijo que no se puede? De eso va precisamente la siguiente parte del tutorial ;)

Paso 3: Usar sprites

AHORA llega lo divertido de verdad :D.

Mover un sprite

Para realizar esta parte es necesario tener claros los comandos (tanto de botones como de Stylus), y la "táctica" usada para mover los fondos en el día 3 (Paso 3).

Éste es el código que se necesita conocer para mover un sprite:

PA_SetSpriteX(pantalla,nºsprite,posicionx);   //Actualiza la posición x del sprite.
 
PA_SetSpriteY(pantalla,nºsprite,posiciony);   //Actualiza la posición y del sprite.
 
PA_SetSpriteXY(pantalla,nºsprite,posicionx,posiciony);   //Combinación de las anteriores.

¡Y ahora, el ejemplo!:

#include <PA9.h>
 
#include "gfx/all_gfx.c"	//Includes con
#include "gfx/all_gfx.h"	//info de sprites
 
s32 x;	//¡No nos olvidemos de declarar nuestras variables antes!
 
int main(void) 
{
 
   // init PA_Lib
   PA_Init();
   PA_InitVBL();
 
	PA_LoadSpritePal(0,0,(void*)ash_Pal); //Cargamos la paleta del sprite
 
	PA_CreateSprite(0,0,(void*)TutorialPAlibDia4EjemploSpriteAnimado_Sprite, OBJ_SIZE_32X64,1,0,10,10); //Creamos el sprite
 
   while(1)
	{ 
	   x+=Pad.Held.Right-Pad.Held.Left;		//Comprobación para x
		PA_SetSpriteX(0,1,x); //Movemos el sprite
 
		PA_WaitForVBL();
   }
 
   return 0;
}

Y con esto, el sprite se moverá en pantalla dependiendo de si pulsamos izquierda o derecha. ¡Exactamente igual que en un juego de plataformas! :D

Lo sé, lo sé, queda muy raro que un sprite se mueva sin moverse no queda muy p'allá... Pero eso es porque aún no hemos acabado ;)

Voltear un sprite

¿Alguna vez se te ha ocurrido jugar con tu reflejo en un espejo? Si levantas la mano izquierda, el espejo levanta su derecha, y viceversa. Y, si miras a tu derecha, ¡tu reflejo mirará a su izquierda!

¿Qué quiero decir con esto? Pues que si aplicamos el volteo a un sprite, se verá lo que sería su reflejo. Lo que estaba a su derecha, se coloca a su izquierda, y viceversa... Entre otras cosas, esto nos sirve, en primer lugar, ahorrarnos el espacio que nos ocupa algunos frames (Si es una persona andando, nos quedamos con los frames que miran a la derecha y no necesitaremos los que miran a la izquierda), y en segundo, para darle más realismo al sprite, si hacemos que mire hacia donde pulsemos.

Éste es el código a saber:

PA_SetSpriteHflip(pantalla,sprite,volteo);   //El sprite se voltea horizontalmente (la izquierda a la derecha y viceversa).
//Si en volteo ponemos 0, el sprite tendrá su posición original, con 1 se voltea.
 
PA_SetSpriteVflip(pantalla,sprite,volteo);   //El sprite se voltea verticalmente (lo de arriba abajo y viceversa).
//Si volteo vale 0, posición original, con 1 se voltea.

Adaptando el ejemplo anterior, obtendremos esto:

#include <PA9.h>
 
#include "gfx/all_gfx.c"	//Includes con
#include "gfx/all_gfx.h"	//info de sprites
 
s32 x;	//¡No nos olvidemos de declarar nuestras variables antes!
 
int main(void) 
{
 
   // init PA_Lib
   PA_Init();
   PA_InitVBL();
 
	PA_LoadSpritePal(0,0,(void*)sonic_Pal); //Cargamos la paleta del sprite
 
	PA_CreateSprite(0,0,(void*)TutorialPAlibDia4EjemploSpriteEstatico_Sprite, OBJ_SIZE_32X64,1,0,10,10); //Creamos el sprite
 
   while(1)
	{ 
 
	   if(Pad.Newpress.Left) //Si pulsamos izquierda...
		{
		   PA_SetSpriteHflip(0,1,1); //El sprite mira a la izquierda (se voltea)
		 }
		if(Pad.Newpress.Right) //Si pulsamos derecha...
		{
		   PA_SetSpriteHflip(0,1,0); //El sprite mira a la derecha (posición original)
		 }
	   x+=Pad.Held.Right-Pad.Held.Left;		//Comprobación para x
		PA_SetSpriteX(0,1,x); //Movemos el sprite
 
		PA_WaitForVBL();
   }
 
   return 0;
}

¡Ahora el sprite mira hacia donde se mueve! ¿A que cada vez nos está quedando más realista? ;)

¡Pero la cosa aún no ha acabado! ¿No os resulta raro ver una moverse sin caminar, ni correr, ni nada? ¡Aún nos queda darle vida a nuestro sprite!

Animar un sprite

¡Ahora viene lo bueno! Un sprite se anima cuando va cambiando de frames constantemente, representando movimiento, reacciones... Por ejemplo, si animamos un sprite desde un frame con la pierna derecha levantada, y vamos pasando por otros que representan cómo baja la pierna y levanta la otra, hasta otra en la que la pierna levantada es la izquierda, estamos animando al sprite. El efecto conseguido, es que el sprite mueve las piernas.

PD: Recordad que estos tutoriales van destinados a que aprendáis, si no entendéis algo hacédmelo saber para que mejore las explicaciones. Nadie ha nacido ni aprendido ni enseñando ;)

Ahora, técnicamente hablando, un sprite se puede animar de mil formas: infinitamente, una vez, dos, tres... con movimiento lineal (del 1º al último frame, y vuelta al primero para seguir) o de balanceo (del 1º al último y del último al 1º)... Nos bastará con aprender un tipo de animación de momento, pero recomiendo saber todos para poder exprimir al máximo el poder de los sprites ;).

Antes de hacer nada de código, hay que preparar el sprite con sus frames. Es IMPORTANTE que hagáis como os digo: Preparad el 1er frame como haríais con un sprite normal. Muy bien, ahora, el siguiente frame va justo debajo. Id poniendo los frames por orden (esto es vital, puesto que no podremos ir saltando de un frame a otro por las buenas). Al final, debéis tener cada frame como un sprite con su tamaño correspondiente. Si el sprite es de 64x64, ponemos 1 frame de 64x64 (centrad si es necesario), abajo otro frame de 64x64, y así con todos. Aseguraos al final que el tamaño total de todo es correcto. Ejemplo de como debe quedar. Compilad el PAGfx y pasemos al código.

Por el momento os enseñaré las 2 animaciones más básicas, pero que darán bastante juego:

PA_SetSpriteAnim(pantalla,nºsprite,nºframe);   //Con esta función, actualizaremos el sprite a un frame concreto.
 
PA_StartSpriteAnim(pantalla,nºsprite,1er frame,ultimo frame,nºframesporsegundo);
//La función por excelencia.
//El sprite se animará desde el 1er frame al último pasando por los intermedios, a la velocidad indicada.
 
PA_StopSpriteAnim(pantalla,nºsprite);   //Detiene la animación del sprite.
//Ten en cuenta que el sprite quedará en el frame en el que estaba en ese momento.

Antes de darles un uso determinado, os recomiendo acostumbraros al funcionamiento de estas funciones. Mirad este mini-ejemplo:

#include <PA9.h>
 
#include "gfx/all_gfx.c"	//Includes con
#include "gfx/all_gfx.h"	//info de sprites
 
int main(void) 
{
 
   // init PA_Lib
   PA_Init();
   PA_InitVBL();
 
	PA_LoadSpritePal(0,1,(void*)ash_Pal);
 
	PA_CreateSprite(0,1,(void*)TutorialPAlibDia4EjemploSpriteAnimado_Sprite, OBJ_SIZE_64X64,1,1,10,10);
 
   while(1)
	{
 
	   if(Pad.Newpress.Start) //Si pulsamos start...
		{
		   PA_SetSpriteAnim(0,1,0); //El sprite mira al frente y queda quieto
		}
		if(Pad.Newpress.Right) //Si pulsamos derecha...
		{
		   PA_StartSpriteAnim(0,1,1,6,6); //El sprite empieza a correr
		}
		if(Pad.Released.Right || Pad.Released.Left) //Si no se pulsa nada...
		{
		   PA_StopSpriteAnim(0,1); //La animación se congela
		}
 
		PA_WaitForVBL();
   }
 
   return 0;
}

Poned este código en algún proyecto y usad este sprite. Jugad un rato con él, vereis como las funciones os quedan más claras.

¡Muy bien, ahora apliquemos lo que aprendimos ahora en el ejemplo de antes!:

#include <PA9.h>
 
#include "gfx/all_gfx.c"	//Includes con
#include "gfx/all_gfx.h"	//info de sprites
 
s32 x;	//¡No nos olvidemos de declarar nuestras variables antes!
 
int main(void) 
{
 
   // init PA_Lib
   PA_Init();
   PA_InitVBL();
 
        //Estas líneas ya no las comento, doy por supuesto que a estas alturas las tenéis más que claras.
 
	PA_LoadSpritePal(0,1,(void*)ash_Pal);
 
	PA_CreateSprite(0,1,(void*)TutorialPAlibDia4EjemploSpriteAnimado_Sprite, OBJ_SIZE_64X64,1,1,10,100);
	PA_SetSpriteHflip(0,1,1);
 
   while(1)
	{
 
	   if(Pad.Newpress.Left) //Si se pulsa izquierda...
		{
		   PA_SetSpriteHflip(0,1,0); //El sprite mira a la izquierda (posición original)
		   PA_StartSpriteAnim(0,1,1,6,6); //Se anima (se pone a correr)
		}
		if(Pad.Newpress.Right) //Si se pulsa derecha...
		{
		   PA_SetSpriteHflip(0,1,1); //El sprite mira a la derecha (se voltea)
		   PA_StartSpriteAnim(0,1,1,6,6); //Se anima (se pone a correr)
		}
		if(Pad.Released.Right || Pad.Released.Left) //Si no se pulsa nada...
		{
		   PA_StopSpriteAnim(0,1); //El sprite se para (deja de correr)
		   PA_SetSpriteAnim(0,1,0); //Y mira al frente
		}   
	   x+=Pad.Held.Right-Pad.Held.Left;		//Comprobación para x
		PA_SetSpriteX(0,1,x); //Se actualiza la posición del sprite
 
		PA_WaitForVBL();
   }
 
   return 0;
}

¡Y con esto, tenemos ya todo más que aprendido! Los sprites ya no suponen ningún secreto para vosotros, mi enhorabuena ;).

¡Pero alto! No vamos a estar acumulando sprites en pantalla infinitamente , ¿no?

Paso 4: Borrar sprites

En algún determinado momento del juego, los sprites que hay nos pueden molestar debido a que ya no pintan nada en pantalla (enemigos liquidados, proyectiles, etc). Se hace necesario borrarlos.

¿Cómo? Fácil:

PA_DeleteSprite(pantalla,nºsprite);   //Borra el sprite de pantalla

Y sprite liquidado :D. Pero tened en cuenta un detalle: el sprite está eliminado, pero la paleta sigue cargada. Así que, si queremos volver a crear el sprite, no hará falta volver a cargar la paleta (salvo que la paleta se cargara cuando los dinosaurios gobernaban la Tierra).

Esto os supone la ventaja de no llenar rápidamente la memoria VRAM, cosa que es de agradecer, especialmente si usáis fondos pesaditos, ya sabéis (*ejem* 8 y 16bit, *ejem*).

Muy bien, ahora la cosa se está poniendo interesante ahora que empezamos a saber lo básico. De deberes, pues intentad encontrar un buen sprite por internet y animadlo como más rabia os dé. Yo me despido aquí, y hasta el próximo tutorial ;).