1 cmpcd2041 computer game design, programming and engineering lecture 14-b 2007/2008 2d graphical...
TRANSCRIPT
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.