Tile-Based Collision Basics (1 hour video)

Oct 18, 2013

Although 2D grid/tile-based collision is a subject I’ve touched upon a few times before (links below, for further reading), since it’s a topic also of use to students in one of the classes that I teach programming for at Georgia Tech I’ve recently made and recorded an hour video tutorial walking through a simple example implementation in detail:

This is currently the latest in my series of videos I’ve been recording for that class that uses the free development/prototyping environment from Processing.org. I encourage reviewing those other videos, especially the earlier ones in the Programming series, if you’re newer to programming or could use some warm up to the Processing prototyping environment.

Source from End of Video

In case you find yourself lost at some point in the video, run into an error you can’t seem to resolve, or simply want to first test the end result in your local Processing installation before following along (often a good habit when sample code is available, especially if you’re using a different/newer Processing version), you’re welcome to download the resulting source and image file from the video.

Slightly More Advanced Example

If you’d like to see an expanded version of the above code, complete with camera scrolling, code broken up into classes, use of PVector to group x/y coordinate pairs, support for level reset, an extra block type (“lava” that resets the world upon collision), setting player start position with a special tile number, and dealing with collision at boundaries of the character (left/top/right/bottom edge) rather than treating it as a center point, I’m also making available more advanced source with camera scroll, classes, and collision edges.

Much More Advanced Example

I previously prepared an example with Processing source that includes a more developed side-view environment and character: Platformer game source in Processing (2D animated character with gravity). If the above video and source make sense to you and you’re interested in learning how to implement a larger, animated character in a side-view platformer game, that entry would be a good place to head next.

Screenshot of Platforming Example

That post also includes some suggested exercises, to test and developer additional understanding of how it fits together and what’s involved in expanding upon it.

Related Diagram

This illustration from Platformer game source in Processing and an older entry about math for game programming may be handy for visualizing the concept of what’s going on here, and how it can relate to different types of games:

Illustration of Basic Tile Math

Know How Grid Collision Works!

This is one of those common patterns in game programming that comes up frequently. Whether you begin to refactor and organize code for reuse or just practice rewriting it (which inevitably happens anyway when shifting between programming languages), 2D grid collision is a really useful and practical coding concept to be familiar with since it enables large, efficient, easily authored, structured environments for your moving objects and characters to interact within, without much need for further complex optimization since collisions between any objects and the environment can be computing with just a few math operations done in constant time.



Learn and practice team game development with Gamkedo Club.
Membership worldwide. Professional support. Proven process.




Subscribe by e-mail to receive weekly updates with Gamkedo.Community interviews and YouTube training videos for game developers!



One Comment

  1. […] Lab Video 9 for 6310, about 2D tile-based collision, is posted too. It has its own entry with additi… […]

Leave a comment

Comments Form
  • Your email will not be used for any purpose other than to update you in replies to your comments. Your website address will be shown as a link from your name with your comment. Your profile photo is auto-magically provided by Gravatar.

All contents Copyright ©2017 Chris DeLeon.

Site production by Ryan Burrell.