A estas altura empezare el tutorial suponiendo que ya teneis instalado el Cygwin y el PSPtoolchain, entendeis como compilar un codigo fuente en un eboot ejecutable para psp y por lo menos teneis un conocimiento basico del lenguaje C de programacion.Si no cumples estos requisitos leete la leccion 1,2 y 3 vuelve cuando te las sepas. Si hace mucho que has instalado el toolchain deberas actualizado debido a que necesitamos el png.h, y os teneis que asegurar de tener las librerias zlib y libpng si necesitas recordar como actualizarlo o instalar librerias ve a la leccion 1.

(Este paso es opcional) En que caso de que queramos podemos limpiar archivos que no sirven o carpetas eliminandolas simplemente.Para eliminar archivos via linux shell usamos el comando rm. Nosotros no solo queremos eliminar un archivo, sino que queremos eliminar toda la carpeta con sus contenidos, por lo que añadimos el comando -R. Basicamente estp significa que queremos borrar la carpeta yo lo que hya dentro de ella. Ademas añadimos el comando -f para modificar el comando y forzar la eliminacion. Por lo que el comando quedara de la siguiente forma

rm -Rf zlib
rm -Rf libpng

Para empezar nuestro programa, necesitamos descargar este archivo y extrais todos los archivos en una carpeta nueva en el directorio ~/ ¿Qué no sabes de que estoy habalando?. bueno excepto que tengas experiencia con nix no tienes porque saberlo, basicamente ~/ es sinonimo del directorio de usuario en un sistema nix, asi que eso aplicadico a nuestro programa es C:/cygwin/home/yourUsername, asi que crea la carpeta ahi y extrae los archivos dentro de ella.Ahora abre tu editor y crea un archivo nuevo para empezar con un nuevo codigo fuente para programacion en C.Recuerda que que se tiene que llamar main.c (leccion 2 en caso de necesitar algun repaso)y en este caso debe estar guardado en el mismo directorio que la carpeta con los archivos que habiamos extraido.Ahora vamos a poner un comentario a nuestro programa, no tiene porque ser este y recordar que es totalmente opcional.

/*
          Mi programa con imagenes
          Autor: Vuestro nombre
          Fecha: Fecha de hoy
 
*/ 

 Ahora debemos introducir las siguientes lineas, muchas ya las vimos en tutoriales anteriores y otras seran nuevas:

#include <pspdisplay.h>
#include <pspctrl.h>
#include <pspkernel.h>
#include <pspdebug.h>
#include <pspgu.h>
#include <png.h>
#include <stdio.h>
#include "graphics.h"
 
#define printf pspDebugScreenPrintf
#define MAX(X, Y) ((X) > (Y) ? (X) : (Y))
 
PSP_MODULE_INFO("Image Display Program", 0, 1, 1);
 
/* Exit callback */
int exit_callback(int arg1, int arg2, void *common) {
          sceKernelExitGame();
          return 0;
}
 
/* Callback thread */
int CallbackThread(SceSize args, void *argp) {
          int cbid;
 
          cbid = sceKernelCreateCallback("Exit Callback", exit_callback, NULL);
          sceKernelRegisterExitCallback(cbid);
 
          sceKernelSleepThreadCB();
 
          return 0;
}
 
/* Sets up the callback thread and returns its thread id */
int SetupCallbacks(void) {
          int thid = 0;
 
          thid = sceKernelCreateThread("update_thread", CallbackThread, 0x11, 0xFA0, 0, 0);
          if(thid >= 0) {
                    sceKernelStartThread(thid, 0, 0);
          }
 
          return thid;
}

¿Te resulta familiar? Bien continuemos.Una vez hecho esto vamos a continuar con la funcion de main()

int main() {
          char buffer[200];
          Image* ourImage;

Hasta el momento lo unico que hemos hecho no se diferencia mucho al de otras lecciones exceptuando que en esta hay muchas mas cosas.Simpelemente hemos usado cuerdas, que mas adelante entraremos mas en profundidad en lo que es una cuerda, de momento vamos a decir que es una serie de caracteres.No existe algo tal que "Mi cuerda", realmente son solamente 8 caracteres variables situados a continuacion de otros pocos en la memoria, por lo que para que podamos crear una cuerda, antes de nada debemos asignarlo en la memoria proque tan pronto como hagamos algo mas (por ejemplo definir una variable) el espacio siguiente de la memoria siguiente a la cuerda se reservara por lo que nuestra cuerda no podra meterse en ese espacio, ese espacio sera llamado un buffer overflow pero no nos vamos a concentrar en eso, simplemente que sepais que generalmente es malo y es lo que hace que la psp se quede colgada.Asi que para definir una serie en lenguaje C simpelmente añade entre corchetes como de largo quieres que se la variable, esto debe ir despues del nombre de la variable.Entonces como te habaras dado cuenta cuando usamos la linea char buffer [200], estamos asignando un bloque de memoria de 200 caracteres variables, este es el maximo tamaño que puede tener la cuerda, aunque hay formas de cambiar el tamaño estan fuera de la perspectiva de este tutorial.

La segunda linea en nuestra funcion main() describe una nueva variable llamado ourImage, como podreis suponer es una variable de tipo imagen.Estos tipos de datos estan incluidos en graphics.h. Todo lo que vamos a hacer va a ser atraves del uso de otras funciones en el archivo graphics.h

Ahora vamos a introducir unas lineas mas que nos deberian ser familiares:

pspDebugScreenInit();
 
SetupCallbacks();
initGraphics();

Las dos primeras lineas de este codigo son las mismas que usamos en el contador o el hello world para iniciar la pantalla, la tercera tiene la funcion de preparar a la psp para mostrar graficos.Ahora vamos a empezar a trabajar con las imagenes (.PNG)

sprintf(buffer, "ourImage.png");
ourImage = loadImage(buffer);

Donde pone ourImage.png es donde deberia ir el nombre de nuestra imagen, para hacer este turorial yo recomiendo que no cambies nada, porque el archivo que hemos descargado y extraido al principio ya venia con una imagen y tenia ese nombre, por lo cual dejarlo todo tal y como esta y una vez lo hallais hecho funcionar ya os podeis poner a investigar y cambiar cosas.

La primera linea de ese codigo es similar al comando printf(), la unica deiferencia es que en vez de escribir en la patalla escribe en la cuerda.El primer parametro que sprintf() coge es el caracter en serie que tu quieres sacar.Nosotros usamos el buffer en serie que hemos definido y el resto es como el printf(). Nosotros solo buscamos almacenar el camino de nuestras imagenes en el buffer, pero si hubiesemos querido, tambien podriamos haber usado esto para insertar variables en una cuerda uniendoles de la misma forma que con printf() (si no te acuerdas de como hacerlo deberias revisar la leccion 3).

La siguiente linea carga nuestra imagen dentro de las variables que hemos definido antes. loadImage() es otra funcion definida en graphics.h , este coge un parametro y esa es la cuerda que contiene el camino a la imagen.Ahora vamos a proceder a hacer un chequeo para ver que la imagen se ha cargado correctamente

 if (!ourImage) {
                    //Image load failed
                    printf("Image load failed!\n");
          } else { 

Si al cargar la imagen hay algun fallo, va a poner el valor de nuestra variable en 0 (falso) y nos alertara del error. Esperemos no encontrar ningun fallo, de ser asi el siguiente codigo se ejecutara

                    int x = 0;
                    int y = 0;
                    sceDisplayWaitVblankStart(); 

Esto sirve solo para que se ejecute nuestra imagen en la pantalla, no deberia resultar extraño, solo declara unos pocos integers y despues llama a sceDisplayWaitVblankStart () explicado en lecciones anterior.Ahora vamos a dar una vuelta por toda la pantalla. La pantalla mide 480 pixels de ancho por 272 pixel de alto

                    while (x < 480) {
                          while (y < 272) {

Estos son simples while loops, deberias recordarlos de la leccion 3. La parte externa del loop continua cuando x es menor que 480 y el resto continua simpre que y sea menor que 272.Ahorra dentro de eso vamos a poner el codigo para mostrar nuestra imagen en la pantalla.

                                blitAlphaImageToScreen(0 ,0 ,32 , 32, ourImage, x, y);
                                y += 32;
                           } 

La primera linea es tu llave. Muestra la imagen a 32bits en la pantalla. esto incluye un canal alpha. Alpha es sinonimo de transparente. La funcion blitAlphaImageToScreen coge 7 parametros. Los dos primeros estan sin poner. Si estas usando PNGs separados para cada una de tus imagenes, estos deberian ser 0.Estos parametros los puedes utilizar por ejemplo si kieres mostrar solo una parte de la imagen.El tercero y cuarto parametro es para definir el tamaño de la imagen el priemero es el ancho de imagen y el segundo es el alto. El quinto parametro es para decirle a la funcion que variable queremos usar (obviamente usaremos nuestra variable ourImage). Y finalmente los dos ultimos parametros son para definir la x y de la posicion de la imagen, para que nos enteremos todos, es para decir donde queremos que este la imagen. La x lo mueve de derecha a izquierda e y de arriba a abajo.

La siguiente linea solo incrementa nuestro counter. Nosotros lo incrementamos 32 poruqe es el alto de nuestra imagen. El "+=" incrementa la variable, esto es "x +=32" es igual que "x = x +32". El objetivo es hacer un azulejo de tu imagen en la pantalla.Por lo que ahora incrementaremos x de la siguiente forma

                              x += 32;
                              y = 0;
                    } 

Esto mueve horizaontalmente la imagen 32 pixel, la anchura de nuestra imagen, asi que esencialmente nos estaremos moviendo sobre una columna. Entonces pondremos y = 0 otra vez por lo que podra empezar de nuevo en la parte de arriba de la columna y continuar su camino hacia abajo.

Nuestra imagen ya esta dibujo, pero todavia falta un paso mas.

                    flipScreen();
          } 

El flipScreen() esta definido en graphics.h, basicamente es lo que actualmente actualiza nuestra pantalla.Finalmente pararemos nuestro programa para poder admirar nuestra preciosa creación.

          sceKernelSleepThread();
          return 0;
} 

Ya hemos completado nuestro programa, ahora hay que hacer un makefile como el de la leccion 2 y 3 pero con algunos añadidos y cambios. El resultado deberia ser este

TARGET = hello
OBJS = main.o graphics.o framebuffer.o
 
CFLAGS = -O2 -G0 -Wall
CXXFLAGS = $(CFLAGS) -fno-exceptions -fno-rtti
ASFLAGS = $(CFLAGS)
 
LIBDIR =
LIBS = -lpspgu -lpng -lz -lm
LDFLAGS =
 
EXTRA_TARGETS = EBOOT.PBP
PSP_EBOOT_TITLE = Image Example
 
PSPSDK=$(shell psp-config --pspsdk-path)
include $(PSPSDK)/lib/build.mak 

Ahora ya solo queda coger el cygwin y compilarlo para crear el eboot.pbp que meteremos en la psp.

                                     IMPORTANTE