Friday, October 10, 2008

Bounding Box Collision Detection

Collision Detection
Detecting collisions is a major component of making games. There are several other methods which will be covered in other posts. So lets start with the basic method of collision detection and work our way from there. The first method that most beginners will come across is bounding box collision detection.

A bounding box is an invisible rectangle that defines an area where moving (i.e. dynamic objects) cannot move into or are contained within.

To define a bounding box you would use the following:
x coordinate
y coordinate
width of box
height of box

The x and y coordinates can be the location of the object. Say for instance all your objects are 32x32 pixel sprites then your bounding box may be (x,y,32,32) where x,y is the location of the object. In some cases you want your objects x and y to be the center of the actual image and in that case the bounding box may be offset from the x and y location. Such as (x-16, y-16, 32, 32).

Collision Checking
So, once you have a bounding box defined for your game objects you now need to check collisions only when necessary of every object with every other object and discard objects you've already checked against. There are many methods of separating your world to determine objects that might possibly collide. Including binning, binary space partitioning, quad trees, etc... Used in both 2D and 3D games.

So you have two rectangles rect1 and rect2 and you want to know if these two rectangles intersect.

So you need to check every point of one rectangle to see if any points are inside the other rectangle.

The four points are:
x,y
x+width, y
x, y+height
x+width, y+height

Here is how we check to see if a point is within the rectangle.
boolean inside(int x, int y, Rectangle rect) {
return (x > rect.x && x < rect.x+rect.width) &&
(y > rect.y && y < rect.y+rect.height);
}
The method above will return true if the point (x,y) is inside the rectangle. We can allow for collisions with the edges of the rectangle by changing the '>' and '<' operators to be '>=' and '<=' in the above function respectively, thus our function name might need to be changed to 'hitCheck'.
boolean hitCheck(int x, int y, Rectangle rect) {
return (x >= rect.x && x <= rect.x+rect.width) &&
(y >= rect.y && y <= rect.y+rect.height);
}
Final Step
So now that we can detect whether a point is inside, or hitting a rectangle we can now do our collision check between two rectangles.
boolean collisionCheck(Rectangle rect1, Rectangle rect2) {
return hitCheck(rect1.x, rect1.y, rect2) ||
hitCheck(rect1.x+rect1.width, rect1.y, rect2) ||
hitCheck(rect1.x, rect1.y+rect1.height, rect2) ||
hitCheck(rect1.x+rect1.width,
rect1.y+rect1.height, rect2);
}
We can use the inside function, although that would mean our objects may appear to overlap when doing collisions.

Handling Collisions
So now that you can detect a collision what should you do when a collision happens. Well in a lot of games you usually only have a single moving object (player/avatar) that the user is controlling. A lot of static objects (buildings, walls, obstacles, etc...) So you don't need to collide a non-moving object (static object) with another non-moving object (i.e. two walls). And the player may not be moving all the time so you don't need to check collisions if he hasn't moved from the last time you checked collisions.

Therefore, only check collisions with moving objects and only if those moving objects have moved since the last time you checked for collisions. So here are the steps:
  1. Loop for all moving objects
  2. Did they move since the last time I checked them
  3. If they have, check collisions
  4. If we have a collision with an obstacle then revert to my last known position
Step 4 is common when moving objects around a level that has walls. Basically the object is moving it self to a new position but before we redraw him at that new position we check to see if he collides with anything, if he does then move him back to his original position.

The other option is to check collisions at the position the moving object wants to move and only do the move if there are no collisions with static objects at that point.

Example Code in C using SDL:


This code was tested with Dev-Cpp and SDL on WindowsXP. Any bugs or fixes please feel free to comment.

Monday, August 18, 2008

Introduction to Silverlight

If you haven't already encountered it among the interactive and browser games websites of the web, Silverlight is the relatively new web application framework created by Microsoft to directly compete with Adobe Flash. Like the familiar Flash applications, Silverlight provides user-interactive graphics (2D and 3D), animation, media-playback, and other features on web pages via an easy to install browser plugin. Currently there is not a great number of websites with Silverlight content, mainly due to the fact that version 2.0 is still in beta (the final release is due in early fall) and offers huge improvements over version 1.0 (latest release in April this year), but links are given to some examples/games in a section below. Both versions of Silverlight are based on WPF (Windows Presentation Foundation) - the new user-interface framework for Windows, intended to replace the long-standing Windows Forms infrastructure on the desktop and also take its place on the web. The declarative/XML-based approach of WPF tends to be very suitable for web development. The availability of a substantial portion of the .NET Framework 3.5 in Silverlight 2 adds many powerful features including network communication. Silverlight is also likely to take a main role in media playback/streaming with its in-built support for the WMV, WMA and MP3 codecs and free streaming service.

Silverlight or Flash?

Official support for Silverlight on Mac OS and the recent development of Moonlight for Linux distributions (supported by Microsoft) could very well encourage Silverlight to be adopted on all main OSs, therefore being able to compete with Flash on more than just Windows. It is also stable across all main browsers.

There are no apparent significant disadvantages of Silverlight compared to Adobe Flash. Listed here are some of the potential advantages of developing with Silverlight:
  • Power of the .NET Framework - unlike ActionScript (the language used to develop in Flash), C# and VB.NET (as well as the dynamic languages such as IronPython and IronRuby) are popular fully-fledged languages in which many developers are already skilled. The additional learning required to develop with Silverlight rather than Flash is therefore hugely lower (even without any knowledge of WPF). Furthermore, much of the .NET Framework 3.5 and its associated technologies such as WPF and LINQ are available to fully utilise.
  • Visual Studio - it is widely regarded (at least among Windows users) that Visual Studio (the 2008 release) is the best IDE around, possibly on any OS. Although Visual Studio and the Adobe Flash software are both commercial, Visual Studio Professional edition (required for Silverlight development) is available for free to students via the DreamSpark scheme. Microsoft Expression Blend, a design application for WPF/Silverlight, is also available to students via the same scheme.
  • Graphics & Animation - XAML and the WPF animation model provide a much more straightforward system to use that Adobe, which relies on binary formats for specifying graphics/shapes and only a frame-based (as opposed to time-based) animation system.
  • Windows Live Silverlight Streaming - Microsoft is offering free hosting and streaming for videos to Silverlight applications with your Windows Live account. Maximum bandwidth usage will be unlimited once it is out of beta. See silverlight.live.com for more information.
  • Microsoft has a huge ability to mass-distribute Silverlight to all Windows user, thereby enabling it to dominate or certainly at least challenge the current predominance of Flash. Depending on the success of the Moonlight project, Silverlight could gain populartity on Linux even before Flash.
Getting Started with Development

Everything you need to get started with developing using Silverlight 1.0 or 2.0, including instructions for setting up the development environment and beginner to intermediate-level tutorials/videos, can be found here.

Links to Silverlight Examples/Games

Silverlight Showcase

Microsoft Popfly (create your own games/mashups)

Line Rider (game)

Zero Gravity (game)

Diver (game)

Other games (game)