1. Chapter 7 The Game Loop and Animation
Starting Out with
Games & Graphics in C++
Tony Gaddis

2. 7.1 The Game Loop
Concept:
The game loop is a special loop used in games and animation programs. It synchronizes the refreshing of the screen with the program’s other operations.

3. 7.1 The Game Loop
Virtually all games and animation programs have a loop of some sort that continuously performs operations such as
Calculations
Gathering input
Moving objects on the screen
Playing sounds
And so forth
In such a program, the loop must allow the screen to be updated at the appropriate time
In other words, you must synchronize the loop with the updating of the screen

4. 7.1 The Game Loop
The Dark GDK provides the following functions you can use for synchronizing the loop with the updating of the screen:

5. 7.1 The Game Loop Figure 7-1 Game loop code
Here is the general format of the game loop:
Figure 7-1 Game loop code
Disable automatic screen refreshing
Establish a refresh rate
Test and synchronize the game loop
Display graphics
Refresh the screen

6. 7.1 The Game Loop Giving Control Back to the Dark GDK
The Dark GDK library has a function called dbSyncOff that causes automatic screen updating to start again
Not needed very often
Can be helpful in some situations
For example:
When prompting the user to enter a value during the game loop
The prompt won’t display until after the screen is refreshed with the dbSync function
To display the prompt and resume the game loop:
Call dbSyncOff just before displaying the prompt
Call dbSyncOn after the user enters a value

7. 7.2 Simple Animation Concept:
A simple way to create an animation is to write a game loop that draws a shape at a different location during each iteration. Be sure to clear the screen of anything displayed during the previous iteration, though!

8. 7.2 Simple Animation Figure 7-2 Output of Program 7-3
Program 7-3 (MovingBall.cpp) partial listing
Clear the screen
Draw the shape
Calculate the new XY coordinates
Refresh the screen
Figure 7-2 Output of Program 7-3

9. 7.2 Simple Animation Clearing the Screen in the Game Loop
Always clear the screen before drawing a shape
Otherwise, all drawings of the shape will appear on the screen
Figure 7-3 Drawing the ball without clearing the screen

10. 7.3 Controlling Objects with the Keyboard
Concept:
The Dark GDK provides functions that let you know whether certain keys, such as the arrow keys, spacebar, Enter key, and so forth are being pressed. Many games and animation programs allow the user to control objects on the screen with such keys.

11. 7.3 Controlling Objects with the Keyboard
Games commonly allow the player to use keys on the keyboard to control objects on the screen
The Dark GDK provides the functions listed in Table 7-1 for the purpose of detecting whether the user has pressed these keys

12. 7.3 Controlling Objects with the Keyboard
Here is an example that determines whether the user is pressing the spacebar:
If the user is pressing the spacebar
The dbSpaceKey function returns a value of 1 (true)
The message “You pressed the spacebar.” is displayed
If the user is not pressing the spacebar
The dbSpaceKey function returns a value of 0 (false)
The message is not displayed

13. 7.3 Controlling Objects with the Keyboard
A message is displayed during each iteration of the game loop for the key the user is pressing
Figure 7-4 Example output of Program 7-4

14. 7.3 Controlling Objects with the Keyboard

15. 7.3 Controlling Objects with the Keyboard
Letting the User Move an Object
To move a circle with the arrow keys:
Prepare the circle:
Declare and initialize RADIUS constant
Declare and initialize x and y coordinate variables with starting values
Prepare the game loop:
Turn on manual refresh
Set the maximum refresh rate

16. 7.3 Controlling Objects with the Keyboard
Letting the User Move an Object
Inside the game loop:
Clear the screen
Draw the circle
Update x and y values
Check arrow keys:
If up arrow key is pressed
Decrement value of y
If down arrow key is pressed
Increment value of y
If left arrow key is pressed
Decrement value of x
If right arrow key is pressed
Increment value of x
Refresh the screen

17. 7.3 Controlling Objects with the Keyboard
Performing Other Operations with the Keyboard
Increasing and decreasing the radius of a circle

18. 7.4 Sprites
Concept:
A sprite is a graphic image that is used as an element in a game. Sprites can be moved and manipulated in various ways.

19. 7.4 Sprites
The graphic images that perform actions in a computer game are commonly known as sprites
To create a sprite, you perform two actions:
Load an image into memory with the dbLoadImage function
Designate the image as a sprite and display it with the dbSprite function
Here is the general format of how you call the dbSprite function:

20. 7.4 Sprites Creating a Sprite SpriteNumber Is an integer
Assigned to the sprite
In the range 1 through 65,535
Used to identify the sprite in subsequent operations
X and Y
Are integers
Specify the screen coordinates where the sprite’s upper-left corner will be positioned
ImageNumber
Number of the image you want to use for the sprite

21. 7.4 Sprites Creating a Sprite
The first statement loads the LadyBug.bmp file as image number 1
The second statement designates that image as sprite number 1, and positions it at the screen coordinates (320, 240)
When this statement executes, the sprite will be displayed on the screen

22. 7.4 Sprites Creating a Sprite
By default, black (RGB = 0, 0, 0) is used as the key color for sprite transparency
You can use the dbSetImageColorKey function to designate a different key color
Program 7-7 demonstrates how we can set the key color to green, and then display the UFO image on top of the space image

23. 7.4 Sprites Figure 7-6 The space.bmp and UFO.bmp images
Figure 7-7 Output of Program 7-7

24. 7.4 Sprites Moving a Sprite
You can move an existing sprite to a new location on the screen by calling the dbSprite function and passing different values for the X and Y coordinates

25. 7.4 Sprites Getting a Sprite’s X and Y coordinates
You can get the current screen coordinates of an existing sprite by
Calling the dbSpriteX and dbSpriteY functions
Passing the sprite number as an argument

26. 7.4 Sprites Getting the Width and Height of a Sprite
You can get the width and height of an existing sprite by
Calling the dbSpriteWidth and dbSpriteHeight functions
Passing the sprite number as an argument

27. 7.4 Sprites Rotating a Sprite
dbRotateSprite rotates a sprite around its insertion point, which by default is the sprite’s upper-left corner
0 through 359 degrees
SpriteNumber is the number of the sprite you want to rotate
Angle is a floating-point value indicating the angle of rotation, in degrees

28. 7.4 Sprites Rotating a Sprite
Figure 7-8 UFO.sprite rotated at different angles

29. 7.4 Sprites
You can get the angle of a sprite by calling the dbSpriteAngle function with the sprite number you want to get the angle for
For example, the following statement:
declares a float variable named angle
Initializes it with sprite number 1’s current angle of rotation

30. 7.4 Sprites Offsetting a Sprite’s Insertion Point
By default, a sprite’s insertion point is its upper-left corner
You can change the sprite’s insertion point by calling the dbOffsetSprite function
Here is the general format of how you call the function:
SpriteNumber is the number of the sprite you want to offset
XOffset is an integer value for the amount you want to offset from the insertion point along the X axis
YOffset is an integer value for the amount you want to offset from the insertion point along the Y axis

31. 7.4 Sprites Offsetting a Sprite’s Insertion Point
Figure 7-9 A sprite before and after it has been offset

32. 7.4 Sprites Offsetting a Sprite’s Insertion Point
You can get the current X offset of a sprite by calling the dbSpriteOffsetX function, passing the sprite number as an argument
For example, the following statement stores the X offset of sprite 1 in the variable sprite1OffsetX:
You can get the current Y offset of a sprite by calling the dbSpriteOffsetY function, passing the sprite number as an argument
For example, the following statement stores the Y offset of sprite 1 in the variable sprite1OffsetY:

33. 7.4 Sprites Showing and Hiding Sprites
The dbHideSprite function prevents a sprite from being displayed
The dbShowSprite function causes a hidden sprite to be displayed
You can tell if a sprite is visible with the dbSpriteVisible function
Pass sprite number as an argument
Returns 1 (true) if visible
Returns 0 (false) if hidden
You can hide all sprites with the dbHideAllSprites function
And display all hidden sprites with the dbShowAllSprites function

34. 7.4 Sprites Resizing a Sprite
dbSizeSprite(SpriteNumber, Xsize, Ysize);
Sprite Number
Size in pixels along the X axis
Size in pixels along the Y axis
dbStretchSprite(SpriteNumber, Xstretch, Ystretch);
Percentage to scale along the X axis
Percentage to scale along the Y axis
Get the X and Y scale amounts of a sprite with:
dbSpriteScaleX(SpriteNumber);
dbSpriteScaleY(SpriteNumber);

35. 7.4 Sprites Setting a Sprite’s Priority
Priority controls the order sprite’s are drawn
All sprites have a default priority of 0
Drawn in order they appear in code
Change priority with the dbSetSpritePriority function
Higher priority sprites are drawn last, regardless of where they appear
In the code above, sprite 1 will be drawn last and appear on top of sprites 2 and 3

36. 7.4 Sprites Determining Whether a Sprite Exists
Determine whether a sprite exists by calling the dbSpriteExist function
Accepts a sprite number
Returns 1 (true) if sprite exists
Returns 0 (false) if sprite does not exist

37. 7.4 Sprites Changing the Sprite Image Call the dbSprite function
Sprite number
X coordinate
Y coordinate
New image number
Call the dbSetSpriteImage function
The dbSpriteImage function can get the current image number

38. 7.4 Sprites Flipping and Mirroring a Sprite
Figure 7-10 A flipped sprite
The dbFlipSprite function flips a sprite vertically
The dbMirrorSprite function mirrors a sprite horizontally
To determine if a sprite is mirrored or flipped call:
dbSpriteFlipped
dbSpriteMirrored
Returns 1 (true)
Returns 0 (false)
Figure 7-11 A mirrored sprite

39. 7.4 Sprites Setting the Back Save and Transparency Features
By default a sprite is set to
Restore its background
Use transparency
To disable one or both of these features
Call the dbSetSprite function
Sprite Number
Back Save
Transparency
0 disables the feature
1 enables the feature
Back Save Enabled, Transparency Disabled
Back Save Disabled, Transparency Enabled

40. 7.4 Sprites Using a Sprite’s Alpha Value to Change its Opacity
Sprites are normally opaque
Use the alpha value to make the sprite semitransparent
Call the dbSetSpriteAlpha function to change the alpha value
0 through 255
Call the dbSpriteAlpha function to get the alpha value
Figure 7-12 Example output of the stealthJet program

41. 7.4 Sprites Deleting a Sprite from Memory
Remove a sprite from memory by calling the dbDeleteSprite function
For example, this statement removes sprite number 10 from memory.

42. 7.4 Sprites Pasting and Cloning Sprites Two ways to copy a sprite:
Pasting is dependent on the original sprite
Pasted sprites are drawn to the screen immediately
Cloning is independent of the original sprite
Cloned sprites must be drawn with the sprite function

43. 7.5 Cel Animation and Sprite Sheets
Concept:
You can create a simple animation by displaying a sequence of images one after the other. This can be done by manually loading and displaying separate images, or via an animated sprite sheet.

44. 7.5 Cel Animation and Sprite Sheets
Simple cel animations are created by displaying a sequence of images, one after the other, in the same location on the screen
When played in order, slight changes in each cel create the illusion of movement
Figure 7-17 Cel animation images

45. 7.5 Cel Animation and Sprite Sheets
Simplifying Animation with Sprite Sheets
A sprite sheet contains all the frames of an animation sequence in one file
Simpler way to store animations
Organized into rows and columns
Images are displayed from left to right
Images are numbered, starting with 1, from left to right
Figure 7-18 A sprite sheet
Figure 7-19 A sprite sheet with two rows and four columns

46. 7.5 Cel Animation and Sprite Sheets
Playing Sprite Animations with the Dark GDK
You use the dbCreateAnimatedSprite function to create a single animated sprite from a sprite sheet by specifying a sprite number, file name, columns, rows, and image number
Once you have created an animated sprite, the dbPlaySprite function can be used to play the animation by specifying a sprite number, start frame, end frame, and delay between frames
The dbPlaySprite function does not display the sprite
Call the dbSprite function to display an animated sprite

47. 7.6 Sprite Collision Detection
Concept:
A collision between sprites occurs when one sprite’s bounding rectangle comes in contact with another sprite’s bounding rectangle. Collisions between sprites can be detected.

48. 7.6 Sprite Collision Detection
Sprites have a bounding rectangle that is the width and height of the image used to display them
A collision occurs when bounding rectangles overlap
The dbSpriteCollision function can be used to detect collisions between two sprites by passing their sprite numbers as arguments
Returns 1 (true) if collisions occur or 0 (false) otherwise
Passing 0 as the second argument can detect a collision between the sprite and any other sprite
Figure 7-20 A sprite displayed inside its bounding rectangle

49. Chapter 7 The Game Loop and Animation
QUESTIONS ?