1. 1 CMPCD2041 Computer Game Design, Programming and Engineering Lecture 14-B 2007/2008 2D Graphical Techniques Dr. Sudirman Slides prepare by Mike Baskett

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

3. 3 Double Buffering and Clipping To create smoother graphics you can use two techniques: double buffering and clipping. Double buffering is the technique of doing all your drawing into an offscreen buffer, 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. Clipping 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.

4. 4 Double Buffering and Clipping 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. This computed by measuring a rectangle around the moving picture and redrawing 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 both positions will be bounded by the area starting at (x,y) with an opposite corner at (x2,y2). (x,y) (x1,y1) (x2,y2) r.width r.height

5. 5 Scrolling World One of the most popular genres of video games are scrolling games It is based on the concept the game world is larger than what the user can see in the screen 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 time The player moves the window around the larger environment, and the contents of the window are mapped to the video screen or video buffer. Using this technique players can immerse themselves in a huge environment Game Environment Video Window

6. 6 Scrolling World The first incarnation of the scrolling world can be thought of as the sideways scroller (Horizontal) 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 screen. 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 center point of the character would remain fixed. The movement would be applied to the graphic(s) that made up the background. More recent scrollers allow to move both background and character… Sideways Scrolling Breakdown Using this scheme the image scrolls from the right of the screen to the left, producing the illusion that the character is moving One way to do this is to use an image the width of the world, and then move the image across the viewable area from right to left…

7. 7 Scrolling World 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. It would as well limit the size of the image the program can load and move in real- time. 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 megabytes Obviously we need another technique… Demo 3

8. 8 Tiled World Tiles are a method for saving memory space in 2-D games. They are just square bitmaps, each storing a part of an image These images are used to produce the game environment on the following principle: Any areas that can be represented with the same graphics without destroying the illusion of seamless world should be.

9. 9 Tiled World Tiles are a method for saving memory space in 2-D games: 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 to be stored once in memory. This of course reduces drastically the overall memory space needed to represent the world

10. 10 Tiled World Tile-based games store some bitmaps in one array, and the tile structures in another. Tile-based games store some bitmaps in one array, and the tile structures in another. This means that the maps are not stored as large bitmaps, but as smaller structures storing information about each tile-sized screen section. This means that the maps are not stored as large bitmaps, but as smaller structures storing information about each tile-sized screen section. 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 the screen. This means that many tiles can use the same picture, which are all based on one tile set (an array of pictures). 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 the screen. This means that many tiles can use the same picture, which are all based on one tile set (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, 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, 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} 0 1 2 3 4 5

11. 11 Tiled World 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. An array is very good for storing the tiles because each element in the array can correlate to the tile number. 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 tile image height. The array can then be iterated over and each element set to a newly instantiated Tile.

12. 12 Tiled World 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 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 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 on the screen. Since the map will likely be larger than the screen, only the portion that 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, 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, 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, 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, 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}};

13. 13 Tiled World 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 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 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 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 number of tiles in a column so that a check at each step doesn't have to be made.

14. 14 Tiled World Advantages Very easy to implement Saves storage space Quite quick to draw Allows easy changing of small sections Easy to associate events/objects with tiles: Collision detection,animation (burning fire, water fall, etc…), … Disadvantages Obviously repeated graphics at times "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 BeforeAfter Tile Transition

15. 15 Scrolling Tiled World We have seen the problems with scrolling using large bitmap to represent the game world. 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 as he moves. 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. 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 required.

16. 16 {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, 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, 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} Scrolling Tiled World Map coordinates and dimensions The first step before trying to scroll tiled world is to find the dimensions and coordinates of the map. 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 rows times the tile height. 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. All of the tile painting to the screen starts at the map x and y. 0 1 2 3 4 5

17. 17 Scrolling Tiled World Tile increments 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 of bounds exception. If everything is within range, the scroll increment needs to increment the map x or y in a certain direction. 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. 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 x increment and a y increment are calculated. Taking the modulus (remainder) of the tile dimensions with the map coordinates yields the desired increments. 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 number. The indexes can be found simply by dividing the map coordinates by the tile dimensions. Demo 7

18. 18 Collision Detection Collision detection, as used in the games community, usually means intersection detection of any form Intersection detection is the general problem: find out if two geometric entities intersect – typically a static problem Interference detection is the term used in the solid modeling literature – typically a static problem Collision detection in the research literature generally refers to a dynamic problem – find out if and when moving objects collide

19. 19 Collision Applications Determining if the player or characters has a hit a wall or obstacle To stop them walking through it Determining if a projectile has hit a target Detecting points at which behavior should change A car in the air returning to the ground Cleaning up animation Making sure a motion-captured characters feet do not pass through the floor

20. 20 Collision Detection: Sprites AND for each pixel in sprites: Test for a collision between two sprites by logically ANDing theirs bitmaps together in image space. If there is a region that both sprites are occupying at the same time, the result of the logical AND will be a non- zero area of pixels. If any such area exists during the test, the sprites have collided… Image Data Collision or BIOT Binary Image Overlap Testing

21. 21 Collision Detection: Sprites BIOT Advantages and Drawbacks: BIOT is the most precise method of collision detection between bitmapped images. Unfortunately, there is one important drawback: The test will probably take more time than drawing the sprites! 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 collision detection. this technique requires far more overhead than other method based on rectangle collision detection and is often a major bottleneck in performance. There are computer systems that actually perform these kinds of tests in hardware, but implementing them in software is too intensive.

22. 22 Collision Detection: Sprites Collision Detection Approximation The solution is to simplify the collision detection by approximating the objects geometry with a shape that can be more easily tested The problem is with a sprites bitmap is that it could be of any shape What if we were to use the bounding box of a sprite as the test shape ?

23. 23 Collision Detection: Sprites Collision Detection: an Approximation Using the bounding box of a bitmap or sprite object for collision detection is a popular technique that gives good results most of the time and is orders of magnitude faster than BIOT Principle: Say we have two sprites and we wish to test if they have collided What we can do is represent them with their respective bounding boxes. Then instead of testing the sprites images for overlap, we test if the bounding boxes have overlapped.

24. 24 Collision Detection: Sprites If any of the following conditions is true, the boxes are colliding: (X1 X2 and X1 <X2+width2) or (X1+width1 X2 and X1+width1 < X2+width2) and (Y1 Y2 and Y1 <Y2+height2) or (Y1+height21 Y2 and Y1+height1 < Y2+height2) Basically the test check if the four corners points of sprite 1 are within sprites 2 rectangular bounding box. Rectangle Collision Detection (0,0) +y +x (X1,Y1) (X2,Y2) width1 width2 height2 height1

25. 25 Collision Detection: Sprites Rectangle Collision Detection: Accuracy In general the technique works fine But sometimes collisions are miscalculated The program will sometimes detect collisions that didnt happen This occur when the bounding boxes of the sprites or 2D games objects overlap, but the actual bitmaps dont.

26. 26 Collision Detection: Sprites Rectangle Collision Detection: Improvement The only workable solution is to shrink the bounding box of the sprites to make sure that the box contain most of the mass of the sprites (85%). And when a collision is detected it is a solid collision and not just an arm or grazing hit

27. 27 Collision Detection on Tiled World 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 to move. If there's an object there, movement is not allowed. If the spot is open, movement is allowed. Basically there are three things we must check: 1.Has the character reached the boundary of the map? 2.Is the character attempting to walk into a solid object on the map? 3.Is the character attempting to walk into another character? The first one is a complete triviality. 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 the size of the map to keep the info locations of object and NPCs, and compare with coordinate in the map of character.