Chapter 7 The Game Loop and Animation Starting Out … 7 gaddis.pdfAddison Wesley is an imprint of...

Addison Wesley

is an imprint of

© 2010 Pearson Addison-Wesley. All rights reserved.

Chapter 7

The Game Loop and Animation

Starting Out with

Games & Graphics in C++

Tony Gaddis

Copyright © 2010 Pearson Addison-Wesley

7.1 The Game Loop

1-2

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.


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

1-3


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:

1-4


7.1 The Game Loop

1. Disable automatic screen refreshing

2. Establish a refresh rate

3. Test and synchronize the game loop

4. Display graphics

5. Refresh the screen

1-5

• Here is the general format of the game loop:

Figure 7-1 Game loop code


7.1 The Game Loop

• 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

1-6

Giving Control Back to the Dark GDK


7.2 Simple Animation

1-7

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!



• Clear the screen

• Draw the shape

• Calculate the new XY coordinates

• Refresh the screen

1-8

Program 7-3 (MovingBall.cpp) partial listing

Figure 7-2 Output of Program 7-3



• Always clear the screen before drawing a shape

• Otherwise, all drawings of the shape will appear on the screen

1-9

Clearing the Screen in the Game Loop

Figure 7-3 Drawing the ball without clearing the screen


7.3 Controlling Objects with the

Keyboard

1-10

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.



Keyboard

1-11

• 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



Keyboard

• Here is an example that determines whether the user is pressing the spacebar:

1-12

• 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



Keyboard

1-13

Figure 7-4 Example output of Program 7-4

• A message is displayed during each iteration of the game loop for the key the user is pressing



Keyboard

1-14



Keyboard

• 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

1-15

Letting the User Move an Object



Keyboard

1-16

• 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

Letting the User Move an Object



Keyboard

• Increasing and decreasing the radius of a circle

1-17

Performing Other Operations with the Keyboard


7.4 Sprites

1-18

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.


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:

1-19


7.4 Sprites

• 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

– Is an integer

– Number of the image you want to use for the sprite

1-20

Creating a Sprite


7.4 Sprites

• 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

1-21

Creating a Sprite


7.4 Sprites

• 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

1-22

Creating a Sprite


7.4 Sprites

1-23

Figure 7-6 The space.bmp and UFO.bmp images

Figure 7-7 Output of Program 7-7


7.4 Sprites

• 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

1-24

Moving a Sprite


7.4 Sprites

• 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

1-25

Getting a Sprite’s X and Y coordinates


7.4 Sprites

• 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

1-26

Getting the Width and Height of a Sprite


7.4 Sprites

• dbRotateSprite rotates a sprite around its insertion point, which by default is the sprite’s upper-left corner

• 0 through 359 degrees

1-27

Rotating a Sprite

• SpriteNumber is the number of the sprite you want to rotate

• Angle is a floating-point value indicating the angle of rotation, in degrees


7.4 Sprites

1-28

Rotating a SpriteFigure 7-8 UFO.sprite rotated at different angles


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

1-29


7.4 Sprites

• 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:

1-30

Offsetting a Sprite’s Insertion Point

• 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


7.4 Sprites

1-31


Figure 7-9 A sprite before and after it has been offset


7.4 Sprites

• 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:

1-32


• 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:


7.4 Sprites

• The dbHideSprite function prevents a sprite from being displayed

1-33

Showing and Hiding Sprites

• The dbShowSprite function causes a hidden sprite to be displayed

• You can hide all sprites with the dbHideAllSprites function

• And display all hidden sprites with the dbShowAllSprites function

• 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


7.4 Sprites

• dbSizeSprite(SpriteNumber, Xsize, Ysize);

– Sprite Number

– Size in pixels along the X axis

– Size in pixels along the Y axis

• dbStretchSprite(SpriteNumber, Xstretch, Ystretch);

– Sprite Number

– 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);

1-34

Resizing a Sprite


7.4 Sprites

• 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

1-35

Setting a Sprite’s Priority

• 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


7.4 Sprites

• 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

1-36

Determining Whether a Sprite Exists


7.4 Sprites

• Call the dbSprite function

– Sprite number

– X coordinate

– Y coordinate

– New image number

• Call the dbSetSpriteImage function

– Sprite number

– New image number

• The dbSpriteImage function can get the current image number

1-37

Changing the Sprite Image


7.4 Sprites

• 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)

1-38

Flipping and Mirroring a SpriteFigure 7-10 A flipped sprite

Figure 7-11 A mirrored sprite


7.4 Sprites

• 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

1-39

Setting the Back Save and Transparency Features

Back Save Enabled, Transparency Disabled

Back Save Disabled, Transparency Enabled


• 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

1-40

7.4 Sprites

Using a Sprite’s Alpha Value to Change its Opacity

Figure 7-12 Example output of the stealthJet program


7.4 Sprites

• Remove a sprite from memory by calling the dbDeleteSprite function

• For example, this statement removes sprite

number 10 from memory.

1-41

Deleting a Sprite from Memory


7.4 Sprites

• Two ways to copy a sprite:

– Pasting and cloning

• 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

1-42

Pasting and Cloning Sprites


7.5 Cel Animation and Sprite Sheets

1-43

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.



1-44

• 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



1-45

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



• 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

1-46

Playing Sprite Animations with the Dark GDK

• 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


7.6 Sprite Collision Detection

1-47

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.


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

1-48

Figure 7-20 A sprite displayed

inside its bounding rectangle

Chapter 7 The Game Loop and Animation Starting Out … 7 gaddis.pdfAddison Wesley is an imprint of...

Documents

Transcript of Chapter 7 The Game Loop and Animation Starting Out … 7 gaddis.pdfAddison Wesley is an imprint of...