[PSdonkey]

Here is Lesson 3 which will deal with loading images and sprite movement. This is simple sprite movement not animation. Animation of sprites with sprite sheets will be in the next lesson, lesson 4.

Lesson 3 - Image loading and sprite movement

What we are going to do is load a background image onto the PSP and then load a game sprite onto that image and move the sprite around with the D-pad.
Here is the background image we are going to use:


Here is the game sprite we are going to use:


Notice how the sprite image is surrounded by a pink color. We need our image to be surrounded by a color which will be set as our transparent color. So once the sprite is displayed on the PSP, you will only see the sprite image and no pink color anywhere. It can be any color that you would like but it can't be any where else in your background image or your map since we are going to set the color pink as transparent. I will get more into that later.

Here is the Makefile which we will use for our program:

TARGET = Donkey_Lesson3
OBJS = main.o

INCDIR = 
CFLAGS = -G4 -Wall -O2 
CXXFLAGS = $(CFLAGS) -fno-exceptions -fno-rtti
ASFLAGS = $(CFLAGS)

LIBDIR =
LDFLAGS =
STDLIBS= -losl -lpng -lz \
		-lpspsdk -lpspctrl -lpspumd -lpsprtc -lpsppower -lpspgu -lpspaudiolib -lpspaudio -lm
LIBS=$(STDLIBS)$(YOURLIBS)


EXTRA_TARGETS = EBOOT.PBP
PSP_EBOOT_TITLE = Donkey_Lesson3


PSPSDK=$(shell psp-config --pspsdk-path)
include $(PSPSDK)/lib/build.mak

Again, our Makefile is the same as the previous lessons I gave except of the target name and EBOOT name change.

Here is the source code we will be using:

//OSlib header file
#include <oslib/oslib.h>

//Necessary to create eboot
PSP_MODULE_INFO("OSLib Sample", 0, 1, 1);
PSP_MAIN_THREAD_ATTR(THREAD_ATTR_USER | THREAD_ATTR_VFPU);

//declaration of the pointers of our images
OSL_IMAGE *background, *sprite;

int main()
{
	//Initialization of the Oslib library
	oslInit(0);

	//Initialization of the graphics mode
	oslInitGfx(OSL_PF_8888, 1);

	//Sets the transparency color (pink)
	oslSetTransparentColor(RGB(255,0,255));

	//loads our images into memory
	background = oslLoadImageFile("background.png", OSL_IN_RAM, OSL_PF_5551);
	sprite = oslLoadImageFile("sprite.png", OSL_IN_RAM, OSL_PF_5551);

	//Disables the transpaent color (pink)
	oslDisableTransparentColor();

	//Verification that all files are present
	if (!background || !sprite)
		oslDebug("It is impossible to load one or more of the images that are required in this program. Please make sure you have all the files required in the eboot folder");

	//Main while loop
	while (!osl_quit)
	{
		//To be able to draw on the screen
		oslStartDrawing();
		
		//initiate the PSP's buttons
		oslReadKeys();
		
		//Sprite movement
		if (osl_keys->held.down) sprite->y += 2;
		if (osl_keys->held.up) sprite->y -= 2;
		if (osl_keys->held.left) sprite->x -= 2;
		if (osl_keys->held.right) sprite->x += 2;

		//Draw the images to the screen
		oslDrawImage(background);
		oslDrawImage(sprite);

		//Ends drawing mode
		oslEndDrawing();

		//Synchronizes the screen 
		oslSyncFrame();		
	}
	
	//Terminate the program
	oslEndGfx();
	oslQuit();
	return 0;
}

Explanation of code:

1) OSL_IMAGE *background, *sprite;
This just defines the pointers of our images. You need a pointer for each image and make sure you do this at the beginning of your code.

2) oslSetTransparentColor(RGB(255,0,255));
This code is used to tell the PSP which color NOT to display on the screen. That is why I surrounded my sprite in a nice boxed shape with the pink color. This code will set the transparent color at (255,0,255) which is pink. That way, the game sprite will be drawn in a uniform shape and not in a boxed shape. The pink is used to fill up the box we need to load the sprite.
Tip: If you have pink in your background image or in your map, set the transparent color to another color that is not used since no pink color will show in your game. Then surround your sprite with that new transparent color. (I used pink because I figured that no one would probably use pink in their game, but you never know :)
Note: color is stored as RGB values, ranging from 0 to 255, thus (255,0,255) means 255 red, 0 green and 255 blue. So that basically means a mix of red and blue, with no green (red+blue=pink).

3) <variable> = oslLoadImageFile("background.png", OSL_IN_RAM, OSL_PF_5551);
This loads the image into memory with the name (<variable>) specified. In our case the names are background and sprite.
OSL_IN_RAM simply means that we are loading our image in RAM and not VRAM.
OSL_PF_5551 means the pixel formate that we are choosing for our images. Here we are using just 16bit pixel formate as we are using just simple sprites. You can use 32bt pixel formate for more advanced images.
Tip: you cannot load background images larger then 512x512 pixels. That is the limit on the PSP. If you want larger, you have to transform your image into a map for larger view area. I will explain this in a future lesson.

4) oslDisableTransparentColor ();
This simply disables the transparent color that we set earlier. In our case it is the pink color at (255,0,255)

5) if (!background || !sprite)
oslDebug("It is impossible to load <...>
This basically means "If background or sprite is not found then print on screen this "It is impossible to load <...>"
This code should be placed in all your programs as it makes sure everything is included before continuing your program.
oslDebug() is a nice little function call which will pop up a window message on your PSP with what ever message you would like to send to the user. In our case it lets the user know that he is missing a file or image in the EBOOT folder.

6) if (osl_keys->held.down) sprite->y += 2;
This is the actual movement of the sprite. If you hold down the d-pad down button, the sprite will move down 2 pixels. The code y+=2 actual means y=y+2. That means that where ever the sprite originally was placed on the screen (y), move it down 2 pixels when the d-pad down button is pressed. The same goes for when you press the up button or left button or right button. y coordinate is for up and down and X coordinate is for left and right.
You can also make your sprite move faster by increasing the coordinate increase. So instead of y+=2; you can use y+=3; etc

7) oslDrawImage(background); oslDrawImage(sprite);
This code first draws the background image and then the sprite image on top of the background image.
You can also use the code
oslDrawImageXY (X, y, image)
to specify where exactly on the screen you would like to draw your sprite to begin with. X,Y would be the coordinates you would like to draw the sprite on the screen and image would be the name of your image you are using. This can be useful for static images on your screen like "lives" and "score"


So this concludes Lesson 3 on image loading and sprite movement. On the next lesson, I will either show you how to load music and use sound effects in your game or I will jump to sprite animation and sprite sheets. I'll let you know.


Here is the files and source code you need to compile your program. I also included the compiled EBOOT here in case you want to try it on your PSP.
http://www.mediafire.com/?c5zeayiznn4