Access_Denied's Forums

In this lesson, we'll be focusing on images. We'll finally be able to add some life to our programs. Loading images in Lua is very easy. Example:

ourImage = Image.load("image_name.png")

Simple, no? What we did, is loaded the image under the variable "ourImage". So if we want to use the image, we identify it as "ourImage". Also, Lua supports .PNG and .JPG Here's another example

theImage = Image.load("Photos/001.png")

What we just did, is we loaded an image that was in the folder "Photos". Now we have to learn how to print them to the screen. Exapmle:

screen:blit(100,30,ourImage,0,0,100,200)

Whoa, that a lot of info! Don't worry, I'll explain. The first is the command to print an image to the screen, screen:blit. Next, we have the x and y coordinates of where we want to print our image. You should know about this from printing text. The next four numbers, you usually don't need. What these numbers are for is tilesets. One image, with many small images on it. But I'll explain them anyway. The first two 0's are the x and y coordinates of where the image begins. So if we had a tileset and the tile you wanted to use was 30 pixels down from the top and 60 pixels over from the left, we would put 60,30. Get it? The last two numbers are the width and height of the tile.

Now on to our program:

--Images
--August 19,3006
white = Color.new(255,255,255)

Nothing new there. Now on to our image loading. Image loading is done usually after colors.

Player = Image.load("Player.png")
Grass = Image.load("Grass.png")

What we did is load those images. In case you were wondering, I've included two images with this download. They should be name "Player" and "Grass". Put these images where you main script is in order for it to work. We're also going to need a table for this program.

ourTable = {}
ourTable = {x = 100, y = 100}

Now on to the loop:

while true do
pad = Controls.read()
screen:clear()

Now here's where we'll print our image.

screen:blit(0,0,Grass)
screen:blit(ourTable.x,ourTable.y,Player)

You're probably wondering, "Wait, those aren't x and y coordinates." Well, they are. The coordinates are in our table. We did it this way so we can have a moveable player. If we put 100,100 , the player would always be in the same place. But since we are using a table, we have the ability to move our player. But we want to be able to move our player with a button, right? So we need some if/then statements.

if pad:right() then
ourTable.x = ourTable.x - 2
end
if pad:left() then
ourTable.x = ourTable.x + 2
end
if pad:up() then
ourTable.y = ourTable.y - 2
end
if pad:down() then
ourTable.y = ourTable.y + 2
end

This makes it, so if we press a button, then ourTable's x and y value changes. And since we put our player, on the x and y value of the table, our player's x and y value will change too. When you run it, you'll know what I mean. Now one last thing before we finish:

screen:print(10,10,ourTable.x,white)
screen:print(10,20,ourTable.y,white)

This is so you can see your player's x and y coordinates. Now finish up:

screen.waitVblankStart()
screen.flip()
end

No if you run it, you'll notice your player can go off the edge. Well put these in after you button statements to fix that:

if ourTable.x < 0 then
ourTable.x = 0
end
if ourTable.x > 460 then
ourTable.x = 460
end
if ourTable.y < 0 then
ourTable.y = 0
end
if ourTable.y < 252 then
ourTable.y = 252
end

This make it so you player can't go offscreen. One thing you might notice, is that I put 460 and 252. Well isn't the PSP's screen 480 by 272? Yes it is, but our player is 20 wide and 20 tall. So we have to subtract 20 off each one to make it work right. Now you know how to load images. See ya in the next tut!