# Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

### Code Snippets / [DBP] - Advanced grid-based collision

Message
Posted: 13th Feb 2013 02:07 Edited at: 13th Feb 2013 02:13
This is a little different than simply checking if a tile is occupied on a grid map. Using a fixed grid size, that is one in which every tile is of equal size with equal spacing, we check for collision with the tiles by checking the horizontal and vertical lines of the grid.

Create a line segment to represent movement from point A to B. Line CD represents the vertical and horizontal lines. By knowing the size of the grid tiles which are evenly spaced, we can narrow down the number of line intersections that need checked. For instance, a line moving downwards which starts at y-coord 150px, there's no need to check horizontal lines below the 150px mark.

Next step, check for intersection between AB and CD. For vertical lines, we're checking for collision along the X-axis. When we hit a line, find the intersection point then extrapolate which tile that is. Similarly, do the same for horizontal lines along the Y-axis.

Why not simply divide the destination point by the tile size of the map to determine the collision tile? For several reasons.
1. In a fast-paced game, it would be possible to skip over tiles that you should have collided with if your velocity is greater than the size of a tile.
2. This method allows you to determine what side of a tile you hit.
3. Paves the way for more advanced collision response.
4. Consider an RTS game moving a unit from A to B. This can quickly tell you if the path is clear or not without the need for A*

Granted this method may not be as fast check for the current tile underneath a specific point, but it's much more powerful in terms of flexibility.

What does this demo do? Aside from the steps I discussed above, move the mouse around which will form the AB line segment. It will then color any box on the map that is occupied with green. A yellow box will mark the earliest collision.

After typing this entire page, I accidently closed the tab! I clicked on recently closed to bring this page back up (after yelling much profanity) and to my amazement, Chrome still had everything I typed in it! Chrome just redeemed itself in my eyes!

"You're not going crazy. You're going sane in a crazy world!" ~Tick