Lesson 04
Simple Image Processing
A crash course on adding images to your applications.
We're getting close to having a functioning program. This is part four of Lesson 04. If you haven't read parts
one, two, and three, go start this
tutorial from the beginning.
Now we have a few lines of setup code.
The first two lines of this code are the same as what we have been using in other programs to set up the screen. The third line calls another function in graphics.h
that gets the PSP ready to display graphics; it does all of the initial setup.
That's all of the setup that we needed to do before actually working with our images. Now we'll move on to loading our PNG file.
The next line loads our image into the ourImage variable that we defined earlier. loadImage() is another function that is defined in that graphics.h file. It takes one parameter, and that is the string containing the path to the image.
Now we'll do a quick check to see whether our loading of the image was successful:
Hopefully we won't encounter a problem loading the image, and if not, then the following code will execute:
Now we will loop through the entire screen. The screen is 480 pixels wide and 272 pixels high:
Now inside there, we are going to put the code to blit (or display) our image.
The next line just increments our counter. We are incrementing by 32 because that's the height of our image. The "+=" operator increments a variable. That is, "x += 32" is equivalent to "x = x +32." The goal is to make a tile of our image on the screen.
It's time to move on to last and final section of Lesson 04. Proceed.
Now we have a few lines of setup code.
pspDebugScreenInit();
SetupCallbacks();
initGraphics();
SetupCallbacks();
initGraphics();
sprintf(buffer, "ourImage.png");
ourImage = loadImage(buffer);
The first line of this code is similar to a printf() call. But instead of printing to the screen, this line prints into a string. It's very useful, trust me, before
I knew about this function, I tried to write my own. Man was that a mistake. The first paramater that sprintf() takes is the character array (AKA string) that you want
to output to. We're using the buffer array that we defined above. And then the rest is like a printf(). We only wanted to store the path of our image into the
buffer, but if we had wanted to, we could have used this to insert variables into a string as well, by parsing them the same way as with printf() (if you don't remember how
to do this, maybe a revisit to Lesson 03 is in order.ourImage = loadImage(buffer);
The next line loads our image into the ourImage variable that we defined earlier. loadImage() is another function that is defined in that graphics.h file. It takes one parameter, and that is the string containing the path to the image.
Now we'll do a quick check to see whether our loading of the image was successful:
if (!ourImage) {
//Image load failed
printf("Image load failed!\n");
} else {
If the loadImage function encounters a problem, it will set the value of our variable to 0 (or false), alerting us of the error. So we check this with a simple if
statement, and if there was a problem, we print out a short error message.//Image load failed
printf("Image load failed!\n");
} else {
Hopefully we won't encounter a problem loading the image, and if not, then the following code will execute:
int x = 0;
int y = 0;
sceDisplayWaitVblankStart();
This is just setup for our image display, it shouldn't look too foreign to you, it just declares and initializes a couple of integers and then calls a sceDisplayWaitVblankStart
(if you'll remember, this is the same function we used when we were reading from the control pad). This allows the "Home" button to work.int y = 0;
sceDisplayWaitVblankStart();
Now we will loop through the entire screen. The screen is 480 pixels wide and 272 pixels high:
while (x < 480) {
while (y < 272) {
These are simple while loops, you should remember them from Lesson 03. The outer loop will continue while x
is less than 480 (the screen's width), and the inner loop will continue while y is less than 272, the screen's height.while (y < 272) {
Now inside there, we are going to put the code to blit (or display) our image.
blitAlphaImageToScreen(0 ,0 ,32 , 32, ourImage, x, y);
y += 32;
}
This first line is your key. It will display a 32 bit image on the screen. That includes an alpha channel! Alpha is another word for transparency. The blitAlphaImageToScreen
function takes seven parameters. The first two are offsets. If you are using seperate PNGs for each of your images, these should be zero. What these two parameters allow for, though,
is for you to have one master image file containing all of your sprites. Basically, if you have two images in the same image file (next to each other for example), you can use the offsets
to tell your program which part of the master image you want to display. The second two parameters are for width and height respectively. Since our image is 32 pixels by 32 pixels, we
are using 32 for both of these values. The fifth parameter is to tell the function which image variable you want to use (obviously we're using our ourImage variable). And
finally, the last two parameters are for setting the x and y positions of the image on the screen. In programming, this is like an inverted coordinate plane. The x axis is the same as
it would be in math (that is, it increases as you move from left to right). The y axis, on the other hand, is upside down; as you increase the y, you move DOWN on the coordinate
plane. This can be confusing at first, if you're used to math coordinates, but you'll get the hang of it.y += 32;
}
The next line just increments our counter. We are incrementing by 32 because that's the height of our image. The "+=" operator increments a variable. That is, "x += 32" is equivalent to "x = x +32." The goal is to make a tile of our image on the screen.
It's time to move on to last and final section of Lesson 04. Proceed.