next »

[FTLRalph]

Hey guys, running into an issue here.

I have a map made of tiles, each tile is either a full wall or not (for the time being).  I also have a free-moving object.

To detect if this free-moving object is hitting a wall, I simply check the center point, for example:

Code:

if (isWall(x + originX, y + originY) == true)
// is in a wall tile

Now here's my issue.  How can I figure out how to accurately "bounce" the object off of any given tile when all I have is if the current x, y position is or is not in a wall tile?

For example, if the object is going straight up and collides with a wall tile I want it to bounce and start moving down.  But if the object is moving diagonally northwest and enters a wall, how do I know whether to bounce the object off to the south or to the east?

I figure you all know what bouncing looks like, but here's an image.

I feel like I might need to mess around with detecting the collision normals and applying them to the object's velocity somehow, but I'm not sure how.

Any help appreciated, thanks!

[Gregg Williams]

I'd probably switch to polygon based collision. However you could also probably just do what tons of racing games use to do. Have multiple sensor bars coming off your objects and based on which ones hit the tile is the direction you bounce. Games like Super Sprint used techniques like this to handle reflecting off the race course walls correctly. Although those objects usually only had 16 or 32 angles in which they moved at.

[Saishy]

If your walls can only be in a X or Y vector direction. (Meaning that no walls are diagonally)
You can simply revert the X and Y components of a vector for a simply reflection.

Velocity.X = -Velocity.X;
Velocity.Y = -Velocity.Y;

It doesn't really matter the angle which the object collides as long as the walls are only horizontally or vertically aligned.

[Noogai03]

Saishy's method works, except you need to make sure you only flip the correct axis. One way to do this is check for collision separately on each axis and only reverse velocity on the one with collisions

[Qqwy]

Assuming you want your bouncing object to move freely, and not in full-tile steps, I would do something similar to what follows:

Code:

if(collidesWithTile(obj.x+velocity.x, obj.y, obj.width, obj.height){
velocity.x = -velocity.x;
}

if(collidesWithTile(obj.x, obj.y+velocity.y, obj.width, obj.height){
velocity.y = -velocity.y;
}

Now the collision function itself might be slightly harder to construct. The easiest would be to enter all the tiles you create in a big array, and through it checking against each of the tile's positions and sizes:

Code:

function collideWithTile(objx, objy, objwidth, objheight){
    var collides = false;
    foreach(tiles as tile){
        if(objx+objwidth > tile.x &&
           objx < tile.x+tile.width &&
           objy+objheight > tile.y &&
           objy < tile.y+tile.height){
              collides = true;
        }
    }
    return collides;
}

This is fine when using small tilemaps, but when using many tiles it might slow the game down significantly. If that's the case, you could use optimization techniques like QuadTrees to improve the speed.

[Quarry]

Code:

function collideWithTile(objx, objy, objwidth, objheight){
    var collides = false;
    foreach(tiles as tile){
        if(objx+objwidth > tile.x &&
           objx < tile.x+tile.width &&
           objy+objheight > tile.y &&
           objy < tile.y+tile.height){
              collides = true;
        }
    }
    return collides;
}

is pretty dumb so do this

Code:

function collideWithTile(objx, objy, objwidth, objheight){
    foreach(tiles as tile){
        if(objx+objwidth > tile.x &&
           objx < tile.x+tile.width &&
           objy+objheight > tile.y &&
           objy < tile.y+tile.height){
              return true;
        }
    }
    return false;
}

[Wilson Saunders]

To expand upon Gregg Williams's suggestion of using "sensor bars" here is a little code of how I would implement an Break out style bouncing dynamic which is what I think the OP is asking for:

Code:

function ReactWithBrick(Ball myBall, Brick myBrick){
  if(myBrick.IsInside(myBall.x - myBall.radius, myBall.y) && myBall.dx < 0){
    myBall.dx = -1*myBall.dx;
  }
  if(myBrick.IsInside(myBall.x + myBall.radius, myBall.y) && myBall.dx > 0){
    myBall.dx = -1*myBall.dx;
  }
  if(myBrick.IsInside(myBall.x, myBall.y - myBall.radius) && myBall.dy < 0){
    myBall.dy = -1*myBall.dy;
  }
  if(myBrick.IsInside(myBall.x, myBall.y + myBall.radius) && myBall.dy > 0){
    myBall.dy = -1*myBall.dy;
  }
}

[Qqwy]

@Quarry, thank you for correcting. I wrote that code very late at night. Indeed, not returning when a positive result is found would be dumb, since it is wastes performance time.
Thanks!

[z84c00]

Actually, if you make your tiles uniform ( i.e. 16x8 or something like that ) you don't even have to step through all your tiles and it just becomes a loopup into a 2d array.

Just a thought :-)

-Z8

[TheHermit]

Conceptually there are eight cases that can occur if you're bouncing a circular object off of a rectangular one. Four of those are 'object hits one of the flat walls', and the other four are 'object hits a corner'. Doing the collision with the corners is probably not necessary unless you're going for a game with precise physics that really matter to the game (like pool). However, if you want to do corner collisions, here's how:

- First, check if the bounding box of your object overlaps with the tile. If not, no collision.
- If the bounding box overlaps, check for each wall whether the center of your moving object is directly above the wall and whether that center is closer to the wall than the object's radius. For example, a tile whose extents are from (tx,ty) to (tx+w, ty+h) colliding with an object whose coordinates are (x,y) with radius r:

Code:

if ( (x>=tx)&&(x<=tx+w)&&(y+r<ty+h)&&(y+r>ty) )
   // collision with top wall
...

- If you have not collided with any of the flat segments, check the distance between your object center and all of the vertices at the corners of the tiles. If this is <= r, you have a corner collision. For a corner collision, you have some vector N = (x-cx, y-cy) where cx and cy are the coordinates of the corner. You want to update your velocity like so:

v' = v-2*(N dot v)*N / |N|^2

If you want an inelastic collision, replace 2 with (1-E), where E=0 is totally inelastic and epsilon=1 is E.

There's a bit of a subtle point to the corner collisions - you want to exclude vertices where two solid tiles meet, or you can get weird bounces at the tile intersections depending on the order you evaluate collisions in.


All of this is complicated by the fact that for finite timestep size, your object will slightly overlap the tile when you're determining collision, which can cause things like 'teleporting through a corner' or getting stuck inside the tile due to the collision code assigning a velocity insufficient to cause your object to exit the tile by the next frame.

Generally what I do is I not only invert the velocity along the normal (e.g. vx -> -vx for hitting the left/right sides of a tile) but I also re-position the object so its 'just touching'. That way I guarantee that it won't collide again next frame. This is especially important if you want the collisions to lose a bit of energy (so you do vx -> -0.9*vx, for example), since if you don't do this you're guaranteed to get 'trapped' in the tile.