1

CMPCD2041CMPCD2041 Computer Game Design, Programming and Computer Game Design, Programming and EngineeringEngineering

Lecture 14-BLecture 14-B2007/20082007/2008

2D Graphical Techniques2D Graphical TechniquesDr. SudirmanDr. Sudirman

Slides prepare by Mike BaskettSlides prepare by Mike Baskett

22

2D Game2D Game

Different techniques to represent and implement efficiently 2D Games:Different techniques to represent and implement efficiently 2D Games:ClippingClipping : draw only what is seen, and redraw only what has changed since : draw only what is seen, and redraw only what has changed since the last cyclethe last cycleScrollingScrolling : To manage a large environment : To manage a large environmentTiled WorldTiled World: Memory Efficient, allow to manage interaction: Memory Efficient, allow to manage interactionParallaxParallax : To add depth and produce 3D effect by composition of layer : To add depth and produce 3D effect by composition of layer moving at different velocity (perspective not in the object size, but on their moving at different velocity (perspective not in the object size, but on their relative speed)relative speed)IsometricIsometric : To add depth and produce 3D effect by applying parallel : To add depth and produce 3D effect by applying parallel projection at 45-degree angleprojection at 45-degree angle (no perspective) (no perspective)These different techniques can be composed: e.g Tiled Isometric scrolling These different techniques can be composed: e.g Tiled Isometric scrolling worldworld

Tiled Isometric scrolling

33

Double Buffering and ClippingDouble Buffering and ClippingTo create smoother graphics you can use two techniques: To create smoother graphics you can use two techniques: double bufferingdouble buffering and and clippingclipping. .

Double buffering is the technique of doing all your drawing into an Double buffering is the technique of doing all your drawing into an offscreenoffscreen buffer, buffer, and then copying the contents of the buffer to the screen all at once. This prevents and then copying the contents of the buffer to the screen all at once. This prevents flickering that would otherwise result from erasing and redrawing the figure. flickering that would otherwise result from erasing and redrawing the figure.

ClippingClipping is the second important technique for smoother graphics. It often happens is the second important technique for smoother graphics. It often happens that only a small region of a larger area has to be erased and redrawn. that only a small region of a larger area has to be erased and redrawn.

44

Double Buffering and ClippingDouble Buffering and Clipping

In general the technique specifies an area that need to be redrawn, which will In general the technique specifies an area that need to be redrawn, which will include the area just vacated and the new new area moved to.include the area just vacated and the new new area moved to.This computed by measuring a rectangle around the moving picture and redrawing This computed by measuring a rectangle around the moving picture and redrawing the union of the the initial position and the destination position.the union of the the initial position and the destination position.

The rectangle placed at (x,y) is moving to a new position at (x1,y1). The Union of The rectangle placed at (x,y) is moving to a new position at (x1,y1). The Union of both positions will be bounded by the area starting at (x,y) with an opposite corner both positions will be bounded by the area starting at (x,y) with an opposite corner at (x2,y2) .at (x2,y2) .

(x,y)

(x1,y1)

(x2,y2)

r.width

r.height

55

Scrolling WorldScrolling World

One of the most popular genres of video games are scrolling gamesOne of the most popular genres of video games are scrolling gamesIt is based on the concept the game world is larger than what the user can see in the It is based on the concept the game world is larger than what the user can see in the screenscreenWe can have for example a large environment that is 4000x3600 pixels large but We can have for example a large environment that is 4000x3600 pixels large but only a 400x360-pixel window of it is visible at any timeonly a 400x360-pixel window of it is visible at any timeThe player moves the window around the larger environment, and the contents of The player moves the window around the larger environment, and the contents of the window are mapped to the video screen or video buffer.the window are mapped to the video screen or video buffer.Using this technique players can immerse themselves in a huge environmentUsing this technique players can immerse themselves in a huge environment

Game Environment

Video Window

66

Scrolling WorldScrolling World

The first incarnation of the scrolling world can be thought of as the ‘The first incarnation of the scrolling world can be thought of as the ‘sidewayssideways scrollerscroller ’ (Horizontal) ’ (Horizontal)This works in the same way when applied to vertically oriented games.This works in the same way when applied to vertically oriented games.In ‘sideways’ scrolling world. The player will have a character, somewhere on the In ‘sideways’ scrolling world. The player will have a character, somewhere on the screen. screen. In the earliest scrollers, the character almost always did not move. Instead, the In the earliest scrollers, the character almost always did not move. Instead, the character would animate such that it would appear to walk or run or jump, but the character would animate such that it would appear to walk or run or jump, but the center point of the character would remain fixed. The ‘movement’ would be applied center point of the character would remain fixed. The ‘movement’ would be applied to the graphic(s) that made up the background.to the graphic(s) that made up the background.

More recent scrollers allow to move both background and character…More recent scrollers allow to move both background and character…

Move All non-Char graphics this way…

Don’t move Char this way

Sideways Scrolling Breakdown

Using this scheme the image scrolls from Using this scheme the image scrolls from the right of the screen to the left, the right of the screen to the left, producing the illusion that the character is producing the illusion that the character is movingmovingOne way to do this is to use an image the One way to do this is to use an image the width of the world, and then move the width of the world, and then move the image across the viewable area from right image across the viewable area from right to left…to left…

77

Scrolling WorldScrolling World

Using an image as representation of the whole environment is not very efficient,as it Using an image as representation of the whole environment is not very efficient,as it would destroy the ability of the game to work on any low-end platform.would destroy the ability of the game to work on any low-end platform.It would as well limit the size of the image the program can load and move in real-It would as well limit the size of the image the program can load and move in real-time.time.This is due to memory requirement : with a single 320x200-pixel window costing This is due to memory requirement : with a single 320x200-pixel window costing 64,000 bytes, a 10x10 screen game environment would need 6.4 megabytes64,000 bytes, a 10x10 screen game environment would need 6.4 megabytes

Obviously we need another technique…Obviously we need another technique…

Demo 3

88

Tiled WorldTiled World

Tiles are a method for saving memory space in 2-D games.  They Tiles are a method for saving memory space in 2-D games.  They are just square bitmaps, each storing a part of an imageare just square bitmaps, each storing a part of an imageThese images are used to produce the game environment on the These images are used to produce the game environment on the following principle:following principle:

Any areas that can be represented with the same graphics Any areas that can be represented with the same graphics without destroying the illusion of seamless world should be.without destroying the illusion of seamless world should be.

99

Tiled WorldTiled World

Tiles are a method for saving memory space in 2-D games:Tiles are a method for saving memory space in 2-D games:While the graphic may be referenced in the map more than once, While the graphic may be referenced in the map more than once, and possibly drawn in the screen more than once, it will only need and possibly drawn in the screen more than once, it will only need to be stored once in memory.to be stored once in memory.This of course reduces drastically the overall memory space This of course reduces drastically the overall memory space needed to represent the worldneeded to represent the world

1010

Tiled WorldTiled WorldTile-based games store some bitmaps in one array, and the tile Tile-based games store some bitmaps in one array, and the tile structures in another.  structures in another.  This means that the maps are This means that the maps are notnot stored as large bitmaps, but as stored as large bitmaps, but as smaller structures storing information about each tile-sized screen smaller structures storing information about each tile-sized screen section.  section.  When a tile needs to be drawn, the array index for its picture is When a tile needs to be drawn, the array index for its picture is taken from the appropriate tile structure and the picture drawn to taken from the appropriate tile structure and the picture drawn to the screen.  This means that many tiles can use the same picture, the screen.  This means that many tiles can use the same picture, which are all based on one which are all based on one tile settile set (an array of pictures).  (an array of pictures). 

{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},{1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 1, 1, 1, 1, 1, 1, 1},{1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 2, 0, 0, 0, 3, 1},{1, 1, 0, 1, 1, 1, 1, 2, 0, 3, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1},{1, 1, 5, 0, 0, 3, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1},{1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1},{1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1},{1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 5, 0, 4, 1, 1, 1, 0, 1},{1, 1, 2, 0, 0, 4, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1},{1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1},{1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1},{1, 1, 5, 0, 3, 1, 1, 0, 1, 5, 0, 0, 0, 0, 0, 0, 0, 0, 4, 1},{1, 1, 1, 1, 5, 0, 0, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}

0123

4

5

1111

Tiled WorldTiled WorldDrawing the tiles to a graphics context :Drawing the tiles to a graphics context :

The tiles first need to be created and stored in order to draw the tiles to the screen. The tiles first need to be created and stored in order to draw the tiles to the screen. An array is very good for storing the tiles because each element in the array can An array is very good for storing the tiles because each element in the array can correlate to the tile number. correlate to the tile number. This makes it easy to reference the tiles to be drawn. This makes it easy to reference the tiles to be drawn. To create the array, the length can be determined by dividing the gif image height by the To create the array, the length can be determined by dividing the gif image height by the tile image height. tile image height. The array can then be iterated over and each element set to a newly instantiated Tile.The array can then be iterated over and each element set to a newly instantiated Tile.

1212

Tiled WorldTiled WorldThe tile map matrix :The tile map matrix :

The next step is to create a map and draw the tiles to the screen that make up the map. The next step is to create a map and draw the tiles to the screen that make up the map. The map can be created with a matrix, where each entry represents a tile at the entry's The map can be created with a matrix, where each entry represents a tile at the entry's row and column location on the screen. The matrix can be created by hand; inserting the row and column location on the screen. The matrix can be created by hand; inserting the tiles desired in each entry. Once the map has been constructed, it can be drawn to the tiles desired in each entry. Once the map has been constructed, it can be drawn to the screen if the x and y locations in the matrix can be translated to the x and y coordinates screen if the x and y locations in the matrix can be translated to the x and y coordinates on the screen. Since the map will likely be larger than the screen, only the portion that on the screen. Since the map will likely be larger than the screen, only the portion that actually fits should be drawn. actually fits should be drawn.

Demo 4

static final byte[][] bgmap ={ {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}, {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}, {1, 1, 2, 0, 0, 0, 0, 0, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}, {1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}, {1, 1, 0, 1, 1, 1, 1, 1, 5, 0, 0, 0, 0, 0, 0, 0, 0, 3, 1, 1}, {1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1}, {1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1}, {1, 1, 5, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1}, {1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1}, {1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1}, {1, 1, 1, 0, 1, 1, 1, 1, 2, 0, 0, 0, 0, 3, 1, 1, 1, 0, 1, 1}, {1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1}, {1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1}, {1, 1, 1, 5, 0, 0, 0, 0, 4, 1, 1, 1, 1, 5, 0, 0, 0, 4, 1, 1}, {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}, {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}};

1313

Tiled WorldTiled WorldDrawing the tile map matrix :Drawing the tile map matrix :

The simplest way to draw the map is to start at the upper left corner where the x and y The simplest way to draw the map is to start at the upper left corner where the x and y values are known to be (0, 0) and draw the map from that location. values are known to be (0, 0) and draw the map from that location. At this point the tiles can be drawn from left to right by incrementing at each matrix At this point the tiles can be drawn from left to right by incrementing at each matrix entry by the tile width until the edge of the screen is reached. entry by the tile width until the edge of the screen is reached. Then the y coordinate is incremented by the tile height and the next row is then drawn Then the y coordinate is incremented by the tile height and the next row is then drawn until the y coordinate is greater than the height of the screen. until the y coordinate is greater than the height of the screen. This process can be simplified by predetermining the amount of tiles in a row and the This process can be simplified by predetermining the amount of tiles in a row and the number of tiles in a column so that a check at each step doesn't have to be made. number of tiles in a column so that a check at each step doesn't have to be made.

1414

Tiled WorldTiled World

AdvantagesAdvantagesVery easy to implementVery easy to implementSaves storage spaceSaves storage spaceQuite quick to drawQuite quick to drawAllows easy changing of small sectionsAllows easy changing of small sectionsEasy to associate events/objects with tiles: Collision detection,animation (burning Easy to associate events/objects with tiles: Collision detection,animation (burning fire, water fall, etc…), …fire, water fall, etc…), …

DisadvantagesDisadvantagesObviously repeated graphics at timesObviously repeated graphics at times"Blocky" look to your game : to solve this problem use tile transition techniques…"Blocky" look to your game : to solve this problem use tile transition techniques…

Reference ->“Tile/Map-Based Game Techniques: Handling Terrain Transitions”: http://www.gamedev.net/reference/articles/article934.asp

Before After

Tile Transition

1515

Scrolling Tiled WorldScrolling Tiled WorldWe have seen the problems with scrolling using large bitmap to represent We have seen the problems with scrolling using large bitmap to represent the game world.the game world.A more elegant solution is to use several small graphics, to ‘tile’ the A more elegant solution is to use several small graphics, to ‘tile’ the viewable area, and to move them all to the direction the character follows viewable area, and to move them all to the direction the character follows as he moves. as he moves. As a row of these tiles move off the screen to the left/right (up/down), those As a row of these tiles move off the screen to the left/right (up/down), those tiles are removed and more tiles are added to the right/left (down/up) edge. tiles are removed and more tiles are added to the right/left (down/up) edge. Tiling a screen is then a kind of shell game, keeping just enough graphics Tiling a screen is then a kind of shell game, keeping just enough graphics on the screen to completely cover the area, without using any more than are on the screen to completely cover the area, without using any more than are required. required.

1616

{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},{1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 1, 1, 1, 1, 1, 1, 1},{1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 2, 0, 0, 0, 3, 1},{1, 1, 0, 1, 1, 1, 1, 2, 0, 3, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1},{1, 1, 5, 0, 0, 3, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1},{1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1},{1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1},{1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 5, 0, 4, 1, 1, 1, 0, 1},{1, 1, 2, 0, 0, 4, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1},{1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1},{1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1},{1, 1, 5, 0, 3, 1, 1, 0, 1, 5, 0, 0, 0, 0, 0, 0, 0, 0, 4, 1},{1, 1, 1, 1, 5, 0, 0, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},{1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}

Scrolling Tiled WorldScrolling Tiled WorldMap coordinates and dimensionsMap coordinates and dimensions

The first step before trying to scroll tiled world is to find the dimensions and coordinates The first step before trying to scroll tiled world is to find the dimensions and coordinates of the map. of the map. Each entry in the matrix represents one tile, so the map width in pixels is equal to the Each entry in the matrix represents one tile, so the map width in pixels is equal to the tile width times the number of columns, and the map height is equal to the number of tile width times the number of columns, and the map height is equal to the number of rows times the tile height. rows times the tile height. Next the x and y of the current map position need to be stored. Whenever a scroll in any Next the x and y of the current map position need to be stored. Whenever a scroll in any direction is made, these values need to be updated to reflect that scroll. direction is made, these values need to be updated to reflect that scroll. All of the tile painting to the screen starts at the map x and y.All of the tile painting to the screen starts at the map x and y.

0123

4

5

1717

Scrolling Tiled WorldScrolling Tiled World

Tile incrementsTile incrementsBefore a scroll in any direction can occur, a check must be made to see whether the new Before a scroll in any direction can occur, a check must be made to see whether the new map x or y will cause one of the border tiles to go out of range, resulting in an array out map x or y will cause one of the border tiles to go out of range, resulting in an array out of bounds exception. of bounds exception. If everything is within range, the scroll increment needs to increment the map x or y in a If everything is within range, the scroll increment needs to increment the map x or y in a certain direction. certain direction. This will likely result in scrolling to a position that does not mark the beginning of This will likely result in scrolling to a position that does not mark the beginning of another tile, but rather a location in the middle of a tile. another tile, but rather a location in the middle of a tile. This means only a portion of the tiles that are drawn first will be on the screen. This means only a portion of the tiles that are drawn first will be on the screen. In order to find the coordinates in the tile, which mark the portion of the tile to display, a In order to find the coordinates in the tile, which mark the portion of the tile to display, a x increment and a y increment are calculated. x increment and a y increment are calculated. Taking the modulus (remainder) of the tile dimensions with the map coordinates yields Taking the modulus (remainder) of the tile dimensions with the map coordinates yields the desired increments. the desired increments. Now that the increments have been found, the only other information necessary for Now that the increments have been found, the only other information necessary for drawing the map after a scroll is the indexes into the map matrix that give the tile drawing the map after a scroll is the indexes into the map matrix that give the tile number. number. The indexes can be found simply by dividing the map coordinates by the tile The indexes can be found simply by dividing the map coordinates by the tile dimensions. dimensions.

Demo 7

1818

Collision DetectionCollision Detection

Collision detectionCollision detection, as used in the games , as used in the games community, usually means intersection detection community, usually means intersection detection of any formof any form

Intersection detectionIntersection detection is the general problem: find out if is the general problem: find out if two geometric entities intersect – typically a static two geometric entities intersect – typically a static problemproblem

Interference detectionInterference detection is the term used in the solid is the term used in the solid modeling literature – typically a static problemmodeling literature – typically a static problem

Collision detectionCollision detection in the research literature generally in the research literature generally refers to a dynamic problem – find out if and when refers to a dynamic problem – find out if and when moving objects collidemoving objects collide

1919

Collision ApplicationsCollision Applications

Determining if the player or characters has a hit a Determining if the player or characters has a hit a wall or obstaclewall or obstacle

To stop them walking through itTo stop them walking through it

Determining if a projectile has hit a targetDetermining if a projectile has hit a target

Detecting points at which behavior should changeDetecting points at which behavior should changeA car in the air returning to the groundA car in the air returning to the ground

Cleaning up animationCleaning up animationMaking sure a motion-captured character’s feet do not pass Making sure a motion-captured character’s feet do not pass through the floorthrough the floor

2020

Collision Detection: SpritesCollision Detection: Sprites

AND for each AND for each pixel in sprites:pixel in sprites:

Test for a collision Test for a collision between two sprites by between two sprites by logically ANDing theirs logically ANDing theirs bitmaps together in bitmaps together in image space.image space.

If there is a region that If there is a region that both sprites are both sprites are occupying at the same occupying at the same time, the result of the time, the result of the logical AND will be a non-logical AND will be a non-zero area of pixels.zero area of pixels.

If any such area exists If any such area exists during the test, the during the test, the sprites have collided…sprites have collided…

Image Data CollisionImage Data Collisionor BIOTor BIOT

Binary Image Overlap Binary Image Overlap TestingTesting

2121

Collision Detection: SpritesCollision Detection: Sprites

BIOT Advantages and Drawbacks:BIOT Advantages and Drawbacks:BIOT is the most precise method of collision detection between BIOT is the most precise method of collision detection between bitmapped images.bitmapped images.

Unfortunately, there is one important drawback: The test will probably Unfortunately, there is one important drawback: The test will probably take more time than drawing the sprites!take more time than drawing the sprites!This is because the logical operation must be done for every single This is because the logical operation must be done for every single pixel in the sprites, and this is too much computation to waste on pixel in the sprites, and this is too much computation to waste on collision detection.collision detection.

this technique requires far more overhead than other method based this technique requires far more overhead than other method based on rectangle collision detection and is often a major bottleneck in on rectangle collision detection and is often a major bottleneck in performance. performance.

There are computer systems that actually perform these kinds of There are computer systems that actually perform these kinds of tests in hardware, but implementing them in software is too intensive. tests in hardware, but implementing them in software is too intensive.

2222

Collision Detection: SpritesCollision Detection: Sprites

Collision Detection ApproximationCollision Detection ApproximationThe solution is to simplify the collision detection by The solution is to simplify the collision detection by approximating the object’s geometry with a shape that approximating the object’s geometry with a shape that can be more easily testedcan be more easily tested

The problem is with a sprite’s bitmap is that it could be of The problem is with a sprite’s bitmap is that it could be of any shapeany shape

What if we were to use the bounding box of a sprite as What if we were to use the bounding box of a sprite as the test shape ?the test shape ?

2323

Collision Detection: SpritesCollision Detection: Sprites

Collision Detection: an ApproximationCollision Detection: an ApproximationUsing the bounding box of a bitmap or sprite object for Using the bounding box of a bitmap or sprite object for collision detection is a popular technique that gives good collision detection is a popular technique that gives good results most of the time and is orders of magnitude faster results most of the time and is orders of magnitude faster than BIOTthan BIOT

Principle: Say we have two sprites and we wish to test if Principle: Say we have two sprites and we wish to test if they have collided they have collided

What we can do is represent them with their respective What we can do is represent them with their respective bounding boxes.bounding boxes.

Then instead of testing the sprites images for overlap, we Then instead of testing the sprites images for overlap, we test if the bounding boxes have overlapped.test if the bounding boxes have overlapped.

2424

Collision Detection: SpritesCollision Detection: Sprites

If If anyany of the following of the following conditions is true, the boxes conditions is true, the boxes are are collidingcolliding: : (X1 (X1 X2 X2 andand X1 <X2+width2) X1 <X2+width2) oror

(X1+width1 (X1+width1 X2 X2 andand X1+width1 < X2+width2) X1+width1 < X2+width2) andand

(Y1 (Y1 Y2 Y2 andand Y1 <Y2+height2) Y1 <Y2+height2) oror

(Y1+height21 (Y1+height21 Y2 Y2 andand Y1+height1 < Y2+height2) Y1+height1 < Y2+height2)

Basically the test check if the four corners points Basically the test check if the four corners points of sprite 1 are within sprite’s 2 rectangular of sprite 1 are within sprite’s 2 rectangular bounding box.bounding box.

Rectangle Collision Rectangle Collision DetectionDetection

(0,0)

+y

+x

(X1,Y1)(X2,Y2)width1

width2

height2height1

2525

Collision Detection: SpritesCollision Detection: Sprites

Rectangle Collision Detection: Rectangle Collision Detection: AccuracyAccuracy

In general the technique works fineIn general the technique works fine

But sometimes collisions are miscalculatedBut sometimes collisions are miscalculated

The program will sometimes detect collisions that didn’t The program will sometimes detect collisions that didn’t happenhappen

This occur when the bounding boxes of the sprites or 2D This occur when the bounding boxes of the sprites or 2D game’s objects overlap, but the actual bitmaps don’t.game’s objects overlap, but the actual bitmaps don’t.

2626

Collision Detection: SpritesCollision Detection: Sprites

Rectangle Collision Detection: Rectangle Collision Detection: ImprovementImprovement

The only workable solution is to shrink the bounding box of The only workable solution is to shrink the bounding box of the sprites to make sure that the box contain most of the the sprites to make sure that the box contain most of the mass of the sprites (85%).mass of the sprites (85%).

And when a collision is detected it is a solid collision and And when a collision is detected it is a solid collision and not just an arm or grazing hitnot just an arm or grazing hit

2727

Collision Detection on Tiled WorldCollision Detection on Tiled World

Collision detection in a tile game like is simple Collision detection in a tile game like is simple All we have to do is look at the map at the place to which we want All we have to do is look at the map at the place to which we want to move. If there's an object there, movement is not allowed. If the to move. If there's an object there, movement is not allowed. If the spot is open, movement is allowed. spot is open, movement is allowed. Basically there are three things we must check:Basically there are three things we must check:1.1. Has the character reached the boundary of the map? Has the character reached the boundary of the map? 2.2. Is the character attempting to walk into a solid object on the Is the character attempting to walk into a solid object on the

map? map? 3.3. Is the character attempting to walk into another character? Is the character attempting to walk into another character?

The first one is a complete triviality. The first one is a complete triviality. The second and third are easy as well, as long as we have a way to The second and third are easy as well, as long as we have a way to keep track of that information. Basically define a data-structure of keep track of that information. Basically define a data-structure of the size of the map to keep the info locations of object and NPCs, the size of the map to keep the info locations of object and NPCs, and compare with coordinate in the map of character.and compare with coordinate in the map of character.