Si estas interesado en la programación para PSP y has usado anteriormente el lenguaje C++ no puedes pasar este tutorial por alto. En esta ocasión el coder de la comunidad pspgorrister nos trae la combinación de una completa abstracción de las librerias SDL en compañia de un magnifico tutorial para aprender a hacer uso de la misma

Autor: pspgorrister

Nivel: Iniciado
Requisitos: Conocimientos mínimos  de C++ y programación orientada a objetos. Haber oído hablar de SDL.

Antes que nada, quiero decir que esto es un proyecto que todavía está en desarrollo, no obstante, lo he ido ampliando según he realizado trabajos adaptándolo a mis necesidades. Lamentablemente, no veo mucho movimiento de coders de C++ por lo que seguramente acabe en el olvido en SceneBeta. Si veo que hay un respuesta positiva por parte de los coders, intentaré terminarlo y documentarlo. Sino, a mí me va a seguir siendo útil, puesto que también se puede desarrollar no sólo para PSP, sino para Windows, Linux y Mac., seguiré desarrollando, pero "a mi ritmo" poniendo "features" cuando las necesite.

En cualquier caso, he aquí la librería de clases y parte de su funcionamiento. Tengo que decir  que tiene bastantes cosas más, pero esto se extendería demasiado. En este pequeño tutorial, vamos a realizar un boceto de juego, lo haremos en 3 partes.

• Presentación: Mostraremos una fondo en la pantalla con un texto y una música.
• Fuego: Mostraremos un fuego en la pantalla que tendrá una animación.
• Rubiales: Crearemos un personaje animado que moveremos con el cursor por la pantalla.

La librería se llama SDL_Gorrister, no es por narcisismo, pero es que no he encontrado un nombre mejor. Es una abstracción en C++ del uso de SDL, una librería grafica de la cual seguramente hayáis oído hablar más de una vez aquí.

Las Clases de SDL_Gorrister que vamos a tratar aquí son las siguientes:

• CSDL: Es la clase principal, se encargar de gestionar la inicialización del modo gráfico, sonido, etc. También es la encargada de dibujar los distintos objetos en pantalla (sprites, mapas, ...).
• CSurface: Es una zona de memoria que se puede dibujar. Un ejemplo sería una imagen cualquiera, que es una "superficie" de bits que se puede mostrar en pantalla.   
• CSprite: Hereda de CSurface, un sprite es algo más que una simple imagen, tienen varios estados, direcciones de movimiento, animaciones, detección de colisiones...
• CTtf: También hereda de CSurface, esta clase representa textos en fuentes True Type (.ttf), las mismas que podemos encontrar en Windows. Permite mostrar textos de forma fácil con diferentes modos de renderizado.
• CMixChunck: Lleva los sonidos de los juegos, por ejemplo el ruido que se puede hacer al pulsar un botón, tocar algo, etc.
• CMixMusic: Parecida al anterior, pero se encarga de gestionar una música de fondo.
• CKey: Gestiona las teclas y botones.
• CEvent: Clase para manejar los eventos del juego.

Dicho esto, empecemos con el código, puedes descargar la abstracción desde la noticia de SDL_Gorrister.

Primera parte

Presentación: Mostraremos una fondo en la pantalla con un texto y una música.

Clases Usadas:

• CSDL
• Csurface
• CTtf (hereda de CSurface)
• CMixMusic

     1	#include <pspkernel.h>
     2	#include <pspdebug.h>
     3	#include <iostream>
     4	
     5	#include "pspbuttons.h"
     6	#include "SDL_gorrister/SDL_gorrister.h"
     7	
     8	using namespace std;
     9	
    10	extern "C" int SDL_main(int argc, char *argv[]);
    11	int SDL_main( int argc, char* argv[] )
    12	{
    13	    CSDL sdl;
    14	    CSurface fondo;
    15	    CTTF titulo;
    16	    CMixMusic musica;
    17	
    18		if (!sdl.SetPSPVideoMode()) {
    19	        cerr << "Error al iniciar modo de video: " << SDL_GetError() << endl;
    20	        return 1;
    21	    }
    22	
    23	    if (sdl.InitTTF() < 0) {
    24	        cerr << "Error al iniciar fuentes TrueType: " << SDL_GetError() << endl;
    25	        return 1;
    26	    }
    27	
    28	    if (sdl.OpenAudio(44100, AUDIO_S16SYS, 2, 4096) < 0) {
    29	        cerr << "Error al iniciar el audio: " << SDL_GetError() << endl;
    30	        return 1;
    31	    }
    32	
    33	    fondo.Load("data/img/fondo.jpg");
    34	    fondo.SetXY(0, 0);
    35	
    36	    titulo.Open("data/fnt/foptitles.ttf", 38);
    37	    titulo.SetFgColor(0xff, 0xf6, 0);
    38	    titulo.SetRenderMethod(TTF_RENDER_BLENDED);
    39	    titulo.SetXY(100,120);
    40	    titulo.RenderText("<< RUBIALES >>");
    41	
    42	    musica.Load("data/snd/intro.ogg");
    43	    musica.Play(-1);
    44	
    45	    sdl.Blit(&fondo);
    46	    sdl.Blit(&titulo);
    47	    sdl.Flip();
    48	    sdl.GetTicks();
    49	    sdl.Wait(5000);
    50	}

Lineas 1 y 2 contienen los ficheros básicos para poder compilar una aplicación de PSP, la linea 3 include iostream, que se usa simplemente para mostrar posibles errores al inicializar SDL.

La 5 incluye un fichero que contiene la definición de las teclas, esto es así porque SDL trata las mismas de forma distinta, tienen otra numeración. SDL_gorrister.h contiene todo lo necesario para enlazar al resto de clases.

La 11 no se trata de un main "normal", sino que se inicializa el juego a través de SDL_main(), no he encontrado el motivo de esto pero teniéndolo en cuenta, es poner esas 2 lineas sin más.

De la 13 a la 16, creamos los diferentes objetos que vamos a usar. De la 18 a la 31 inicializamos el modo de video, el uso de fuentes y el audio, si hubiera algún problema, se mostraría un mensaje y se terminaría.

Ahora vamos a inicializar las propiedades de los diferentes objetos. Empezamos con el objeto fondo de la clase CSurface, le indicamos qué imagen usaremos y donde la colocaremos, en este caso en la posición 0,0 (esquina sup. izda.), ya que esa es la posición idónea porque la imagen ocupa toda la pantalla (480x720).

A continuación, definimos la fuente. Hay que decir que la clase CTTF, hereda de CSurface porque SDL en realidad los textos los trata como imágenes, es decir un texto se convierte en una CSurface en términos prácticos. En 36 abrimos la fuente a usar y especificamos el tamaño. En 37 especificamos el color de la misma ("Foreground Color"), el método de renderizado usado para mostrarla, su posición con SetXY() y lo más importante, con RenderText(), le decimos el texto a renderizar. Si esto fuera un contador, tan sólo tendríamos que llamar a RenderText() para cambiarlo, el resto de los atributos no habría que inicializarlos más.

NOTA: Poniendo un color de fondo con SetBgColor() y usando otros métodos de renderizado como TTF_RENDER_SOLID y TTF_RENDER_SHADED, se pueden crear muchos efectos, pero aqui vamos a darle un uso sencillo. Os invito a que probéis por vuestra cuenta.

En 42, cargamos la música de fondo, es un tema de NeXuS, un grupo de los tantos que podéis encontrar en jamendo.com, donde podréis descargar música con licencia libre para vuestros juegos (siempre se agradece que los pongáis en los créditos). Aunque yo use música en formato OGG, porque es libre, ocupa menos y da más calidad, podéis también usar MP3 sin problemas. Para acabar con la música, llamamos a Play() e inmediatamente comienza a sonar. Le ponemos -1 para que la repita siempre, si quisieramos que sonara un par de veces, pondríamos 2, etc.

En 45, usamos el método Blit() de CSDL, para decir que vamos a poner un objeto en la memoria de video intermédia, en el argot se conoce como "blitear". Colocamos el fondo, el título (por ese orden, sino el fondo taparía el título) y luego con el método Flip(), volcamos dichos objetos a la "pantalla real".

NOTA: El método Blit admite "punteros de objetos", por eso le ponemos el ampersan delante "&", no pasamos el objeto, sino SU DIRECCIÓN DE MEMORIA. Puedes ver más sobre punteros aqui.

Para terminar, queremos poner una pausa de 5 segundos antes de que comience el juego (en este caso antes de terminar, aún nos falta código). Por eso en la 48 usamos el método GetTicks() de CSDL, recoge los "ticks" de reloj actuales y nos sirve para inicializar las medidas de tiempo. Acabamos con un sdl.Wait(), que hace una pausa en milisegundos.

Segunda parte

Fuego: Mostraremos un fuego en la pantalla que tendrá una animación.

Clases Usadas:

• CSDL
• CSprite (también hereda de CSurface)
• CMixChunck

     1	#include <pspkernel.h>
     2	#include <pspdebug.h>
     3	#include <iostream>
     4	
     5	#include "pspbuttons.h"
     6	#include "SDL_gorrister/SDL_gorrister.h"
     7	
     8	using namespace std;
     9	
    10	extern "C" int SDL_main(int argc, char *argv[]);
    11	int SDL_main( int argc, char* argv[] )
    12	{
    13	    CSDL sdl;
    14	    CSurface fondo;
    15	    CTTF titulo;
    16	    CMixMusic musica;
    17	    CSprite fuego;
    18	
    19		if (!sdl.SetPSPVideoMode()) {
    20	        cerr << "Error al iniciar modo de video: " << SDL_GetError() << endl;
    21	        return 1;
    22	    }
    23	
    24	    if (sdl.InitTTF() < 0) {
    25	        cerr << "Error al iniciar fuentes TrueType: " << SDL_GetError() << endl;
    26	        return 1;
    27	    }
    28	
    29	    if (sdl.OpenAudio(44100, AUDIO_S16SYS, 2, 4096) < 0) {
    30	        cerr << "Error al iniciar el audio: " << SDL_GetError() << endl;
    31	        return 1;
    32	    }
    33	
    34	    fondo.Load("data/img/fondo.jpg");
    35	    fondo.SetXY(0, 0);
    36	
    37	    titulo.Open("data/fnt/foptitles.ttf", 38);
    38	    titulo.SetFgColor(0xff, 0xf6, 0);
    39	    titulo.SetRenderMethod(TTF_RENDER_BLENDED);
    40	    titulo.SetXY(100,120);
    41	    titulo.RenderText("<< RUBIALES >>");
    42	
    43	    fuego.Load("data/img/fuego.bmp", 3, 1);
    44	    fuego.SetXY(350, 75);
    45	    fuego.SetTransparency(255, 0, 255);
    46	    fuego.SetAnimType(ANIM_BOUNCE);
    47	    fuego.SetMovFrames(STATE_NORMAL, MOV_NONE, 0, 2);
    48	    fuego.SetAnimDelay(150);
    49	
    50	    musica.Load("data/snd/intro.ogg");
    51	    musica.Play(-1);
    52	
    53	    sdl.Blit(&fondo);
    54	    sdl.Blit(&titulo);
    55	    sdl.Flip();
    56	    sdl.GetTicks();
    57	    sdl.Wait(5000);
    58	    while (true) {
    59	        sdl.Blit(&fondo);
    60	        sdl.Blit(&fuego);
    61	        sdl.Flip();
    62	        fuego.NextFrame();
    63	        sdl.Wait(20);
    64	    }
    65	}

Hemos añadido un objeto Sprite, el objeto Sprite, es una clase que hereda de CSurface, porque es "más" que una superficie. Un sprite es una superficie, pero además tiene algunas características nuevas: Puede moverse, puede "animarse" y puede detectar si ha colisionado.

En este caso, hemos querido que el fuego no sea un dibujo estático, sino que parezca crepitar, para dar esa sensación, usaremos esta imagen:

En la linea 17, lo definimos. Ahora entre las lineas 43 y 48, vamos a indicar las características del objeto. Como esta imagen tiene 3 columnas y 1 fila para generar la animación, al definir el sprite, tenemos que decirle al abrilo con Open(), las mismas. La clase ya deduce el tamaño del sprite, no hay que especificarlo, si os dais cuenta, en ningún momento hemos usado el ancho y alto de la imagen.

En la linea 45, indicamos qué color queramos que sea transparente, en formato (R,G,B), le indicamos el famoso rosa fucsia de los sprites. Si usamos una imagen PNG, automáticamente se cogerán las transparencias, la he puesto en formato BMP (que no maneja transparencias) para que se vea el funcionamiento.

En 46, le dicemos el tipo de animacion ANIM_BOUNCE, nos dice que "rebota", mostrará los diferentes frames como 0,1,2,1,0,1,2,...

En la linea 47, está lo que personamente más me gusta de la clase CSprite, la forma de definir las animaciones. Puede parecer un poco difícil, pero una vez se entiende, permite crear animaciones de una forma muy sencilla. Hemos dicho que un CSprite, es como un CSurface, pero con características adicionales, tiene un estado que le podemos asignar, por defecto STATE_NORMAL, y un movimiento, por defecto MOV_NONE (no se mueve).

Pues bien, aquí le estamos diciendo que cuando el sprite esté en estado normal (STATE_NORMAL), y no se mueva (MOV_NONE), que realize la animación desde el frame 0 al 2, y lo hará "rebotando" la animacion como ya dijimos en la linea de arriba.

Para terminar de definir el objeto, le decimos el retardo que tendrá la animación en milisegundos con AnimDelay(). Si no ponemos ningún valor la animación iría demasiado rápido.

En la linea 58, hemos creado un bucle, para mostrar la animación del fuego, fijáos en la linea 62, después de "blitear" la imagen del fuego, pasamos al siguiente "frame" de la animación que se mostrará en la siguiente vuelta del bucle. Hay que destacar que el clase se encarga de coger el siguiente frame por nosotros, según el estado y el movimiento que hayamos definido.

Hay que recordar que para salir de este programa tenemos que apagar la PSP, porque aún no le hemos definido ningún evento para terminar.

Tercera parte

Rubiales: Crearemos un personaje que moveremos con los cursores por la pantalla.

Clases Usadas:

• CSprite (con movimiento)
• CKey (ver NOTA)
• CEvent (ver NOTA)

NOTA: Aunque la clase CKey y CEvent puede usarse de forma individual, he decidido usarlas a través de CSDL, cuando veáis el código en el que movemos el sprite, internamente están trabajando estas 2 clases, pero al usarlo a través de CSDL, es todo más fácil.

     1	#include <pspkernel.h>
     2	#include <pspdebug.h>
     3	#include <iostream>
     4	
     5	#include "pspbuttons.h"
     6	#include "SDL_gorrister/SDL_gorrister.h"
     7	
     8	using namespace std;
     9	
    10	extern "C" int SDL_main(int argc, char *argv[]);
    11	int SDL_main( int argc, char* argv[] )
    12	{
    13	    CSDL sdl;
    14	    CSurface fondo;
    15	    CTTF titulo;
    16	    CMixMusic musica;
    17	    CSprite fuego;
    18	    CSprite rubiales;
    19	    CMixChunk pasos;
    20	    bool salir = false;
    21	    int boton_pulsado = NULL;
    22	
    23		if (!sdl.SetPSPVideoMode()) {
    24	        cerr << "Error al iniciar modo de video: " << SDL_GetError() << endl;
    25	        return 1;
    26	    }
    27	
    28	    if (sdl.InitTTF() < 0) {
    29	        cerr << "Error al iniciar fuentes TrueType: " << SDL_GetError() << endl;
    30	        return 1;
    31	    }
    32	
    33	    if (sdl.OpenAudio(44100, AUDIO_S16SYS, 2, 4096) < 0) {
    34	        cerr << "Error al iniciar el audio: " << SDL_GetError() << endl;
    35	        return 1;
    36	    }
    37	
    38	    if (sdl.InitJoystick() < 0) {
    39	        cerr << "Error al iniciar el joystick: " << SDL_GetError() << endl;
    40	        return 1;
    41	    }
    42	    sdl.JoystickOpen(0);
    43	
    44	    fondo.Load("data/img/fondo.jpg");
    45	    fondo.SetXY(0, 0);
    46	
    47	    titulo.Open("data/fnt/foptitles.ttf", 38);
    48	    titulo.SetFgColor(0xff, 0xf6, 0);
    49	    titulo.SetRenderMethod(TTF_RENDER_BLENDED);
    50	    titulo.SetXY(100,120);
    51	    titulo.RenderText("<< RUBIALES >>");
    52	
    53	    fuego.Load("data/img/fuego.bmp", 3, 1);
    54	    fuego.SetXY(350, 75);
    55	    fuego.SetTransparency(255, 0, 255);
    56	    fuego.SetAnimType(ANIM_BOUNCE);
    57	    fuego.SetMovFrames(STATE_NORMAL, MOV_NONE, 0, 2);
    58	    fuego.SetAnimDelay(150);
    59	
    60	    pasos.Load("data/snd/pasos.ogg");
    61	
    62	    rubiales.Load("data/img/rubiales.png", 4, 4);
    63	    sdl.CenterXY(&rubiales);
    64	    rubiales.SetAnimType(ANIM_CYCLE);
    65	    rubiales.SetMovFrames(STATE_NORMAL, MOV_B, 0, 3);
    66	    rubiales.SetMovFrames(STATE_NORMAL, MOV_T, 12, 15);
    67	    rubiales.SetMovFrames(STATE_NORMAL, MOV_R, 8, 11);
    68	    rubiales.SetMovFrames(STATE_NORMAL, MOV_L, 4, 7);
    69	    rubiales.SetFrameIndex(3);
    70	
    71	    musica.Load("data/snd/intro.ogg");
    72	    musica.Play(-1);
    73	
    74	    sdl.Blit(&fondo);
    75	    sdl.Blit(&titulo);
    76	    sdl.Flip();
    77	    sdl.GetTicks();
    78	    sdl.Wait(5000);
    79	    while (!salir) {
    80	        sdl.Blit(&fondo);
    81	        sdl.Blit(&fuego);
    82	        sdl.Blit(&rubiales);
    83	        sdl.Flip();
    84	        fuego.NextFrame();
    85	
    86	        while (sdl.PollEvent()) {
    87	            if  (sdl.EventType() == SDL_QUIT)
    88	                salir = true;
    89	
    90	            if (sdl.EventType() == SDL_JOYBUTTONDOWN)
    91	                boton_pulsado = sdl.JoyButton();
    92	
    93	            if (sdl.EventType() == SDL_JOYBUTTONUP)
    94	                boton_pulsado = NULL;
    95	
    96	        }
    97	            if (boton_pulsado != NULL) {
    98	                if (boton_pulsado == PSP_BUTTON_UP) {
    99	                    pasos.Play();
   100	                    rubiales.Move(0, -4);
   101	                }
   102	                if (boton_pulsado == PSP_BUTTON_DOWN) {
   103	                    pasos.Play();
   104	                    rubiales.Move(0, 4);
   105	                }
   106	                if (boton_pulsado == PSP_BUTTON_LEFT) {
   107	                    pasos.Play();
   108	                    rubiales.Move(-4, 0);
   109	                }
   110	                if (boton_pulsado == PSP_BUTTON_RIGHT) {
   111	                    pasos.Play();
   112	                    rubiales.Move(4, 0);
   113	                }
   114	                if (boton_pulsado == PSP_BUTTON_CIRCLE)
   115	                    salir = true;
   116	            }
   117	    }
   118	    sceKernelExitGame();
   119	}

Aquí vamos a "complicar" la cosa un poco, de momento de la linea 18 a la 21 hemos creado 4 nuevas variables:

• rubiales, otro sprite en este caso el muñeco rubio que moveremos por la pantalla.
• pasos, un objeto CMixChuck, haremos que suene un paso cada vez que se mueva rubiales.
• salir, lo usaremos en el bucle principal para terminar el programa.
• boton_pulsado, llevará el botón que se ha pulsado en la PSP.

De la 38 a la 42, como ahora sí usaremos el Joystick, lo inicializamos, es decir decimos a SDL que inicialize el sistema de Joystick. Y si se puede inicializar, abrimos el Joystick 0 (la PSP sólo tiene un Joystick y siempre es el 0).

En la 60, cargamos el sonido de pasos de la misma forma que hicimos con la música, no necesita más explicación.

Ahora, de la 62 a la 69, viene lo más complejo y a la vez potente de la clase CSprite, vamos a definir su comportamiento según el estado y movimiento que tenga el sprite. En la 62 cargamos la imagen con 4 columna y 4 filas, de forma similar a como hicimos con el fuego, como esta es una imagen PNG, ya tiene la transparencia, por lo que no hace falta definirle ningún color alfa.

En la 63, usamos un método que tiene la clase CSDL, pasándole un objeto CSurface o heredero de éste (Csprite hereda de CSurface), el método CenterXY(), se encarga de modificar las coordenadas del mismo para que quede centrado en pantalla.

En la 64, definimos el tipo de animanción, en este caso será ANIM_CYCLE, al contrario de "bounce", ésta se realiza haciendo un ciclo en los frames, ejemplo: 0,1,2,3,0,1,2,3,....

En la siguiente linea, se definen los frames que tendrá rubiales según su movimiento, en este ejemplo vamos a usar el estado STATE_NORMAL, pero se pueden usar diferentes estado por ejemplo podríamos usar el STATE_1 cuando el prota, coja una barra de energía que aumente su tamaño durante un tiempo, o el STATE_2 que lo haga "transparente", similar a los juegos que te dan unos segundos de inmunidad cuando empiezas a jugar después de que te maten, etc.

Bien fijémonos en la primera asignación de movimiento, porque las otras son similares, le decimos que para el estado normal (STATE_NORMAL), y si se mueve hacia abajo (MOV_B ottom), mostrará los frames del 0 al 3 "de forma cíclica". El primer elemento siempre es el 0, no el 1. Lo mismo con los demás movimientos: MOV_T op, MOV_L eft y MOV_R ight.

En la linea 69, le forzamos a que use un determinado frame, en este caso el 3 que aparece nuestro rubiales de frente. Esto es así porque inicialmente no tiene ninguna dirección hasta que lo movamos, con ese pequeño apaño, aparecerá mirando de frente.

Bien, en la linea 79, comenzamos un bucle hasta que no pongamos la variable salir a true. Mostramos los objetos por pantalla, y luego en 86, realizamos otro bucle, haciendo que el objeto sdl, lea los eventos. Un evento es cualquier cosa que pasa, una pulsación de botón, una petición de cerrar ventana, un movimiento de ratón, etc.

A nosotros nos interesan 3 tipos de eventos, el evento SDL_QUIT, que en la PSP ocurre cuando se pulsa el botón HOME y se selecciona salir al XMB. Si esto ocurriera, pondríamos la variable salir a true para terminar   
   
En la 90 si el evento es un botón pulsado, guardamos dicho el valor de dicho botón. Luego en la 93, si es un botón "levantado", borramos el valor del botón pulsado.

Ahora de la 97 a la 116, comprobamos si hay algún botón pulsado. Tenemos en cuenta los botones de dirección, si hay alguno pulsado, hacemos sonar el sonido de "paso" y movemos el sprite en consecuencia. Si se pulsa círculo, hacemos que termine.

Por ultimo fijase en una cosa muy importante. EN NINGÚN MOMENTO HEMOS TENIDO QUE DECIR QUE FRAME DEL SPRITE RUBIALES MOSTRAR. El mismo sprite ya sabe en qué dirección de movimiento lo está haciendo y actualiza su frame en consecuencia, tampoco le hemos definido una pausa (delay) entre frame y frame, ya que se mueve conforme se pulsa.

Finalizando

He pretendido que veáis la mecánica de un juego al programar con clases, a la hora de gestionar lo que mostremos por pantalla. Además como todo el trabajo lo realizan las clases, nos queda un código simplificado, fijáos que con pocas lineas hemos puesto musica y dos sprites en pantalla.

Las ventajas de la programación orientada a objetos, son muchas, como habéis podido ver una de ellas es la herencia. La clase CSprite y la clase CTTF, al heredar de CSurface, ya tienen toda la parte del código de ésta, por lo que no es necesario reescribirlo de nuevo.

La librería todavía está muy verde, y aunque no hemos visto todas sus clases, falta implementar muchas cosas, la más importante es la gestión de colisiones, implemetar mapas isométricos, además, viendo los tutoriales de pipagerardo, he pesando incluir una clase BitMapFont,  etc. También veréis el cursor en la parte superior izda., tan sencillo de arreglar como creando el método sdl.ShowCursor(false), que aún no he implementado a la hora de crear este tuto.