1. Game Programming Algorithms and Techniques
Chapter 2
2D Graphics

2. Chapter 2 Objectives 2D Rendering Foundations
Learn the basics how monitors work
Cover color buffers, vertical sync, and screen tearing
Sprites
Learn about both basic and animated sprites
Learn how sprite sheets can save space
Scrolling
Single-axis and infinite scrolling
Using the parallax effect to give an illusion of depth
Implementing four-direction scrolling
Tile Maps
Learn how to use basic tile maps
Using isometric tile maps

3. CRT Monitor Basics
CRTs contain an array of picture elements known as pixels:
For color displays, each pixel contains a red, green, and blue sub-pixel.
Resolution determines the total number of pixels:
300x200 means each row or scan line has 300 pixels and there's a total of 200 rows.
CRTs use an electron gun to activate the various pixels.

4. CRT Monitor Basics, Cont'd
Electron gun draws one scan line at a time.
When it gets to bottom-right corner, it takes some time to get the aim back to top left (vertical blank interval or VBLANK).
Basic CRT drawing

5. Screen tearing caused by updating video data while the CRT is drawing
Color Buffer
A buffer is memory that stores the color data for all the pixels on the screen.
With only a single color buffer, writing to it outside of VBLANK will result in screen tearing.
Screen tearing caused by updating video data while the CRT is drawing

6. Double Buffering Use two color buffers:
While buffer A is written to, display buffer B.
Then next frame, write to B and display A.
As long as the swap occurs during VBLANK, there is no screen tearing:
This corresponds to the VSYNC setting in many games.
Triple buffering is when there are three color buffers.

7. Sprites 2D visual objects used to represent: Characters
Other dynamic objects
For simple games, backgrounds
The corresponding image format can vary depending on the platform (PNG, TGA, and PVR are all potential options).

8. Basic Sprite Object
class Sprite ImageFile image int drawOrder int x, y function Draw() // Draw the image at the correct (x,y) ... end

9. Painter’s algorithm applied to a 2D space scene
Sprites are drawn from back to front.
Painter’s algorithm applied to a 2D space scene

10. Animating Sprites Like flipbook animations.
Animation FPS can vary (24 is a common rate).
Animated run cycle

11. AnimatedSprite Implementation
AnimFrameData struct stores:
Starting frame of animation
Total number of frames of animation
AnimData struct stores:
Array of images used for all the frames
Array of AnimFrameData

12. AnimatedSprite Members
class AnimatedSprite inherits Sprite // All of the animation data (includes ImageFiles and FrameData) AnimData animData // The particular animation that is active int animNum // The frame number of the active animation that's being displayed int frameNum // Amount of time the current frame has been displayed float frameTime // The FPS the animation is running at (24FPS by default). float animFPS = 24.0f function Initialize(AnimData myData, int startingAnimNum) function UpdateAnim(float deltaTime) function ChangeAnim(int num) end

13. Updating the Animation
If animation FPS is higher than game FPS, we may need to skip frames in the animation, so:
frameNum += frameTime * animFPS
If frameNum > the number of frames:
Use modulus to figure out new frame number.
Similarly, use fmod to determine what amount to reset frameTime.

14. Sprite Sheets
Rather than separate image files per sprite, pack them all into a single image file.
Can greatly reduce empty space, thus reducing size.
Individual sprites (a), and those sprites packed in a sprite sheet (b)

15. Single-Axis Scrolling
Game scrolls in a single direction, like Jetpack Joyride.
Single-direction scrolling in Jetpack Joyride. The dotted line demonstrates a boundary.

16. Single-Axis Scrolling, Cont'd
Easiest with screen-sized background sprites.
Create a list of background sprites with their x-positions set as appropriate.
While scrolling, change the camera position based on the player's position:
camera.x = clamp(player.x, screenWidth / 2,
hCount * screenWidth – screenWidth / 2)

17. Single-Axis Scrolling, Cont'd
Once the appropriate background image is determined, offset the position based on the camera:
draw s at (s.x – camera.x + screenWidth/2, 0)
Then draw the subsequent image, in case it, too, is visible.

18. Infinite Scrolling
When the game continues to scroll until the player loses.
There can't be an infinite number of background segments, so segments must be repeated.
Increasing the unique images increases variety, as does randomizing sequences of images.

19. Space scene broken into three layers to facilitate parallax scrolling
Separate the background into layers, and then scroll them at different speeds.
This gives the illusion of depth.
Space scene broken into three layers to facilitate parallax scrolling

20. Scene broken up into four segments to support four-way scrolling
When the game world scrolls horizontally and vertically.
Code is similar to single-axis, just in two directions.
Scene broken up into four segments to support four-way scrolling

21. Tile Maps Partition world into squares (or other polygon).
Size of a tile is game-specific.
Each square references a particular image in the tile set.
Scene from the classic platformer Jazz Jackrabbit 2, which uses tile maps for its levels

22. Basic Level Format
Represent each tile onscreen with a number specifying the index into the tile set:
0,0,1,0,0
0,1,1,1,0
1,1,2,1,1

23. Sample isometric scene
Isometric Tile Map
Can create a greater sense of depth.
Used in games like Diablo II.
Tiles are usually parallelograms or hexagons.
Sample isometric scene
© denis_pc/fotolia