GUIDE: Collisions

[Jeffery]

I made this tutorial because I've seen a lot of people having problems with collisions in their games, and a lot of requests for a guide.

GUIDE:

Lets say that you want to make a game where you have 2 squares, one for the player and one for the enemy, and both of the squares are 32 pixels in height and length. You want the enemy square to constantly move back and forth jumping randomly, and for the player square to move when you press the D-dad and jump when you press X. The code for that would look something like this (disregard the extra spaces inserted by the forums):

 
system.usbDiskModeActivate() 
 
red = Color.new(255,0,0)
black = Color.new(0,0,0)
blue = Color.new(0,0,255)
black = Color.new(0,0,0)
 
leftorright = 2
 
player1 = Image.createEmpty(32,32)
ground = Image.createEmpty(480,10)
sky = Image.createEmpty(480,262)
enemy1 = Image.createEmpty(32,32)
 
player1:clear(red)
sky:clear(blue)
ground:clear(black)
enemy1:clear(red)
 
player = {}
player.y = 230
player.x = 50
player.jumpspeed = 10
player.jumpstate = "ground"
player.gravity = 230
 
enemy = {}
enemy.y = 230
enemy.x = 430
enemy.jumpspeed = 10
enemy.jumpstate = "ground"
enemy.gravity = 230
 
while true do
 
pad = Controls.read()
 
screen:clear()
 
if pad:left() then
player.x = player.x - 2
end
 
if pad:right() then
player.x = player.x + 2
end
 
if (pad:cross()) and (player.jumpstate == "ground") then
player.jumpstate = "jumping"
end
 
if (enemy.x == math.random(20,420)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (enemy.x == math.random(5,420)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (enemy.x == math.random(10,420)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (enemy.x == math.random(20,400)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (enemy.x == math.random(15,430)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (player.jumpstate == "jumping") then
player.jumpspeed = player.jumpspeed - 0.5
player.gravity = player.gravity - player.jumpspeed
end
 
if (enemy.jumpstate == "jumping") then
enemy.jumpspeed = enemy.jumpspeed - 0.5
enemy.gravity = enemy.gravity - enemy.jumpspeed
end
 
if (player.gravity < 0) then
player.jumpstate = "falling"
end
 
if (enemy.gravity < 0) then
enemy.jumpstate = "falling"
end
 
if (player.gravity < 230) and (player.jumpstate == "falling") then
player.gravity = player.gravity + (player.jumpspeed + 3)
end
 
if (enemy.gravity < 230) and (enemy.jumpstate == "falling") then
enemy.gravity = enemy.gravity + (enemy.jumpspeed + 3)
end
 
if (player.gravity == 230) then
player.jumpspeed = 10
player.jumpstate = "ground"
end
 
if (enemy.gravity == 230) then
enemy.jumpspeed = 10
enemy.jumpstate = "ground"
end
 
if (player.gravity > 230) then
player.gravity = 230
end
 
if (enemy.gravity > 230) then
enemy.gravity = 230
end
 
if (enemy.x == 448) then
leftorright = 1
end
 
if (enemy.x == 0) then
leftorright = 2
end
 
if (player.x == 448) then
player.x = player.x - 2
end
 
if (player.x == 0) then
player.x = player.x + 2
end
 
if (leftorright == 1) then
enemy.x = enemy.x - 2
end
 
if (leftorright == 2) then
enemy.x = enemy.x + 2
end
 
if pad:start() then
break
end
 
player.y = player.gravity
enemy.y = enemy.gravity
 
screen:blit(0,0,sky)
screen:blit(0,262,ground)
screen:blit(player.x,player.y,player1)
screen:blit(enemy.x,enemy.y,enemy1)
 
screen.waitVblankStart()
 
screen.flip()
 
end

At this point of the game the two squares would pass right over each other without doing anything. This is because there is no collision detection. Here are a few things that you should know about the player1 and enemy1 images and collision detection:

1. The "player.x" and the "player.y" variables both refer to the pixel located at the top left-hand corner of the player1 image created (this is the point at which the PSP screen displayes the first pixel of the image).
2. The "enemy.x" and the "enemy.y" variables both refer to the pixel located at the top left-hand corner of the enemy1 image created (this is the point at which the PSP screen displayes the first pixel of the image).
3. In order to use collision detection, you must have the pixel coordinates of all but one of the corners (right now we only have one of them).

Here's is a picture of what the coordinates for the corners would be.

http://img217.imageshack.us/my.php?image=corners8aw.png

Ok, here is the actual collision detection part.

You obviously want to find out when and if any part of the player1 image touches any part of the enemy1 image. First we have to add these to the player and enemy arrays:

 
player.y32 = player.y + 32 --This is the bottom left-hand corner of player1
player.x32 = player.x + 32 --This is the top right-hand corner of player1
enemy.y32 = enemy.y + 32 --This is the bottom left-hand corner of enemy1
enemy.x32 = enemy.x + 32 --This is the top right-hand corner of enemy1

Now, using the corner coordinates we can create this if statement:

 
if (((player.x32 >= enemy.x) and (player.x <= enemy.x32)) and ((player.y32 >= enemy.y) and (player.y <= enemy.y32))) then
break
end

Basically what this if statement is saying is this.

"If the corners of the player1 image are in the same space as the enemy1 corners than exit the program"

Here is another picture of the corners, except this one is to disect the if statement.

http://img227.imageshack.us/my.php?i...cations3ow.png

I know that it may look/sound confusing at first (at least it did to me), but just go back and look at the corners image and the if statement, study them for a while, and I think that you will get it.



If anybody sees any errors in my tutorial please point them out and I will gladly change it.

NOTE: This is my first tutorial, and i'm not a very experienced coder. So, please be nice :icon_smil with the comments and such.

[TheMarioKarters]

Wow, nice tut. Will help a lot of folks.

[PSPHax0r9]

Awesome! Thanks for taking the time to make all this man.

[Twenty 2]

Wow, nice tut. Will help a lot of folks.

Like you xD

[Lezombi]

the code is fine except the colors you defined don't really match the colors you assigned to the objects.

 
system.usbDiskModeActivate() 
 
red = Color.new(255,0,0)
black = Color.new(0,0,0)
blue = Color.new(0,0,255)
black = Color.new(0,0,0)
 
leftorright = 2
 
player1 = Image.createEmpty(32,32)
ground = Image.createEmpty(480,10)  
sky = Image.createEmpty(480,262  )
enemy1 = Image.createEmpty(32,32)
 
player1:clear(red)
sky:clear(blue)
ground:clear(black)
enemy1:clear(red)
 
player = {}
player.y = 230
player.x = 50
player.jumpspeed = 10
player.jumpstate = "ground"
player.gravity = 230
 
enemy = {}
enemy.y = 230
enemy.x = 430
enemy.jumpspeed = 10
enemy.jumpstate = "ground"
enemy.gravity = 230
 
while true do
 
pad = Controls.read()
 
screen:clear()
 
if pad:left() then
player.x = player.x - 2
end
 
if pad:right() then
player.x = player.x + 2
end
 
if (pad:cross()) and (player.jumpstate == "ground") then
player.jumpstate = "jumping"
end
 
if (enemy.x == math.random(20,420)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (enemy.x == math.random(5,420)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (enemy.x == math.random(10,420)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (enemy.x == math.random(20,400)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (enemy.x == math.random(15,430)) and (enemy.jumpstate == "ground") then
enemy.jumpstate = "jumping"
end
 
if (player.jumpstate == "jumping") then
player.jumpspeed = player.jumpspeed - 0.5
player.gravity = player.gravity - player.jumpspeed
end
 
if (enemy.jumpstate == "jumping") then
enemy.jumpspeed = enemy.jumpspeed - 0.5
enemy.gravity = enemy.gravity - enemy.jumpspeed
end
 
if (player.gravity < 0) then
player.jumpstate = "falling"
end
 
if (enemy.gravity < 0) then
enemy.jumpstate = "falling"
end
 
if (player.gravity < 230) and (player.jumpstate == "falling") then
player.gravity = player.gravity + (player.jumpspeed + 3)
end
 
if (enemy.gravity < 230) and (enemy.jumpstate == "falling") then
enemy.gravity = enemy.gravity + (enemy.jumpspeed + 3)
end
 
if (player.gravity == 230) then
player.jumpspeed = 10
player.jumpstate = "ground"
end
 
if (enemy.gravity == 230) then
enemy.jumpspeed = 10
enemy.jumpstate = "ground"
end
 
if (player.gravity > 230) then
player.gravity = 230
end
 
if (enemy.gravity > 230) then
enemy.gravity = 230
end
 
if (enemy.x == 448) then
leftorright = 1
end
 
if (enemy.x == 0) then
leftorright = 2
end
 
if (player.x == 448) then
player.x = player.x - 2
end
 
if (player.x == 0) then
player.x = player.x + 2
end
 
if (leftorright == 1) then
enemy.x = enemy.x - 2
end
 
if (leftorright == 2) then
enemy.x = enemy.x + 2
end
 
if pad:start() then
break
end
 
player.y = player.gravity
enemy.y = enemy.gravity
 
screen:blit(0,0,sky)
screen:blit(0,262,ground)  
screen:blit(player.x,player.y,player1)
screen:blit(enemy.x,enemy.y,enemy1)
 
screen.waitVblankStart()
 
screen.flip()
 
end

other than that, the code is fine

[Mr.Game]

this is a great guide and should be a sticky. I have a ton of problems with collisions and this helps a lot

[PopcOrn DeVil]

Yay, you made many people happy.

[imhotep]

if you're interested, here's my own code (borrowed a bit from ps2dev

function detect_collision(enemyX,enemyY,enemyWidth,enemyHeight)

--attack area

--		x1---x2	
--		|     |   player	
--		|  X  |   X=centre
--		|     |	--> collision when centre is hit by centre of enemy
--		y1---y2	

collision=1

x1=xpos
x2=xpos+playerWidth
y1=ypos
y2=ypos+playerHeight

e_x1=enemyX
e_x2=enemyX+enemyWidth
e_y1=enemyY
e_y2=enemyY+enemyHeight

x_centre=xpos+( (x2-x1)/2 )
y_centre=ypos+( (y2-y1)/2 )

e_x_centre=enemyX+( (e_x2-e_x1)/2 )
e_y_centre=enemyY+( (e_y2-e_y1)/2 )


if math.abs(e_x_centre-x_centre)>=enemyWidth/2		then collision=0
elseif math.abs(e_y_centre-y_centre)>=enemyHeight/2	then collision=0 
end

return collision

end

if not, delete :P

[Kameku]

I don't understand how people think collisions are so difficult. I just hate when if it's going too fast, and it overlaps. I've found ways around that, though. :]

[legacyxero]

STICKY PLEASE.

Great job on the tut, man!

[ro0kie42]

Thank you for this!

[Jeffery]

:icon_smil Thanks for all of the comments guys. (BTW: These forums are the best!)

[PSPduh]

Thank you so much! This should definetly be a sticky since people constantly ask about collision detection.

[Mast3r_Shak3]

Instead of using player.x n player.y can I use variable I already have like cursorx and cursory?

[Jeffery]

I think that you could do that. Just replace the "player.y32 = player.y + 32" and "player.x32 = player.x + 32" with "curserxcorner = cursorx + (width of the cursor)" and "curserycorner = cursory + (height of the cursor)".

Let me know if that works. :icon_smil

[FLai]

this better get stickied

[Altair]

Instead of using player.x n player.y can I use variable I already have like cursorx and cursory?

That definately works

[Bronx]

thanks man!

[Zettablade]

meh, it's just lua. Charlie from EvilMana already made tut about tutorials. But that's beside the fact that C++ is so much better :Punk:

[Bronx]

thanks a lot!

[SG57]

... Why not use my function for collision? it totally saves a billion lines, not to mention takes 1 line to actually check for collision... but whatever, awesome to see this done on a more specific app.

[Bronx]

... Why not use my function for collision? it totally saves a billion lines, not to mention takes 1 line to actually check for collision... but whatever, awesome to see this done on a more specific app.

dont worry, i'll read both ;)