How can I make my bounding box collision detection better?

[grodt]

I drew on top of the image the blue parts. I have a bounding box around the Android guy, but what bothers me is that all my graphics will have to be drawn in a square style. As you can see, if I shoot on the bottom left/right areas, the bullet will stop as it collides with the box, but it looks bad to the player since that black area looks empty/open. Any ideas on how I can fix this?

Code: Select all

-- Check collisions
function check_collision(player, players_bullets, enemy)
	enemy.color = enemy.safe
	for i=#players_bullets, 1, -1 do 
        bullet = players_bullets[i]
        if (bullet.y >= enemy.y and bullet.y <= (enemy.y + enemy.height) and bullet.x >= enemy.x and bullet.x <= (enemy.x + enemy.width)) then
			table.remove(players_bullets, i)
			enemy.color = enemy.hit
			enemy.hit_sound:play()
			player.score = player.score + 1
        end
	end
end

[Dattorz]

I think the simplest way to go about this is to model collision using multiple bounding boxes and circles that conform roughly to the sprite's shape. They don't all have to treat collision differently - they would give the same response on bullet impact.

[artofwork]

You could cycle through the image for certain pixels at x,y coordinates which can be cpu intensive or use a specific color and test it against the bullets color since the background of your image is clear it it will pass through the image until it reaches the threshold color.

Code: Select all

enemy.bounds = {153, 204, 0}

bullet.color = -- whatever the bullet color is

function check_collision(player, players_bullets, enemy)
   enemy.color = enemy.safe
   for i=#players_bullets, 1, -1 do 
        bullet = players_bullets[i]
        if (bullet.y >= enemy.y and bullet.y <= (enemy.y + enemy.height) and bullet.x >= enemy.x and bullet.x <= (enemy.x + enemy.width)) 
		and unpack(bullet.color) == unpack(enemy.bounds) then
         table.remove(players_bullets, i)
         enemy.color = enemy.hit
         enemy.hit_sound:play()
         player.score = player.score + 1
        end
   end
end

[davisdude]

A fast way to do this is as follows:
- Keep the main bounding box. This will be used as a preliminary check for the next code:
- Break the body into parts (i.e. leg, head, etc.). Break this up however you choose. For example, the arms could be circles connected by a rectangle. There are posts all over the forums and internet to check out how to do this.

[artofwork]

You don't need extra bounding boxes or to break up the object any further, the object itself is already a bounding box you can just test collision using colors of the object, why make things more complicated then they have to be?

Remember the object is not an empty entity it has properties that you can set and test against other object's properties.

[grodt]

You could cycle through the image for certain pixels at x,y coordinates which can be cpu intensive or use a specific color and test it against the bullets color since the background of your image is clear it it will pass through the image until it reaches the threshold color.

Code: Select all

enemy.bounds = {153, 204, 0}

bullet.color = -- whatever the bullet color is

function check_collision(player, players_bullets, enemy)
   enemy.color = enemy.safe
   for i=#players_bullets, 1, -1 do 
        bullet = players_bullets[i]
        if (bullet.y >= enemy.y and bullet.y <= (enemy.y + enemy.height) and bullet.x >= enemy.x and bullet.x <= (enemy.x + enemy.width)) 
		and unpack(bullet.color) == unpack(enemy.bounds) then
         table.remove(players_bullets, i)
         enemy.color = enemy.hit
         enemy.hit_sound:play()
         player.score = player.score + 1
        end
   end
end

What does this part mean?

Code: Select all

enemy.bounds = {153, 204, 0}

I implemented the stuff you showed and for the unpack line I get "Error: main.lua:273: bad argument #1 to 'unpack' (table expected, got nil)"

[zorg]

You don't need extra bounding boxes or to break up the object any further, the object itself is already a bounding box you can just test collision using colors of the object, why make things more complicated then they have to be?

Remember the object is not an empty entity it has properties that you can set and test against other object's properties.

You can not test collision using colors simply.

To be more specific, you'd need to render to a canvas, loop through either all of it, or just the area where your one bounding box is, the image itself (if doing this per-bullet, it's enough to check near the bullets' edges) check for a specific color. (or a range between some values, either in RGB or HSV or any other space representation)

But who's to say that there won't be any backgrounds that may be a similar color? And when the detection kicks in, it will slow down the game depending on many factors, like the area of the image, and the size and number of bullets.

One solution could be to use multiple canvases, but one canvas for one image would pretty much be a waste of resources.

Using multiple bounding boxes is easier. Less to calculate (4 and-ed booleans if Axis-aligned per box), and it doesn't have any such "hidden" extra requirements like color testing per-pixel.

Also, just a thought, people would probably rather play a game where the hitbox is smaller than the sprite, rather than the reverse, since it would be less fair

[Dattorz]

I think a more efficient method for this would be to keep the ImageData of your sprite and test pixels on that instead of a Canvas, since ImageData sits on the main RAM instead of the GPU.

[zorg]

That's still less-efficient than multiple bounding boxes, especially with larger images.
And you'd have to account for rotation and scaling, if not translation, so the pixels in the imagedata might not align to a perfect grid in reality, on the screen, making testing whether two object's imagedata containing pixels with positions and color above/below a certain treshold "colliding" still a pretty inefficient way to test collision.

But hey, make a little test program, i might be wrong.