Chapter 2
Graphics Programming with C++ and
the Dark GDK Library
Starting Out with
Games & Graphics in C++
Tony Gaddis
Addison Wesley
is an imprint of
© 2010 Pearson Addison-Wesley. All rights reserved.
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
Concept:
All C++ programs that use the Dark
GDK library start out with the same
code. The first step in learning to
write a graphics program is to learn
how to start a Dark GDK program
in C++.
Copyright © 2010 Pearson Addison-Wesley
1-2
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
Minimum framework of a C++/Dark GDK program
Figure 2-6 Summary of the
skeleton program
Copyright © 2010 Pearson Addison-Wesley
1-3
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
• Include directive – causes the
contents of a file to be included in a
program
– DarkGDK.h contains the setup code
needed for the Dark GDK library to work
correctly with our C++ programs
– We must include the DarkGDK.h file in every
program that will use the Dark GDK library
Copyright © 2010 Pearson Addison-Wesley
1-4
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
• Function – group of statements that
collectively has a name
– Function named DarkGDK is required by
any program that uses the Dark GDK
library
– DarkGDK function contains the
statements that will be executed when
program runs
Copyright © 2010 Pearson Addison-Wesley
1-5
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
• C++ is a case-sensitive language, which means
it regards uppercase letters as being entirely
different than their lowercase counterparts
• The name of the function DarkGDK must be written with
– uppercase D
– lowercase ark
– uppercase GDK
• Pay attention to the case!
– C++ does not see
• darkgdk the same as DarkGDK
• VOID the same as void
Copyright © 2010 Pearson Addison-Wesley
1-6
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
• Function Call – causes the statements in a
function to execute
• dbWaitKey – when this function is called,
it causes the program to pause until a key
is pressed on the keyboard
Copyright © 2010 Pearson Addison-Wesley
1-7
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
Comments
• Comments are:
– Short notes explaining how parts of a program
work
– Not intended for the compiler
– Intended for anyone who is reading the code
Copyright © 2010 Pearson Addison-Wesley
1-8
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
Comments
• Two types of comments:
– Line comments
• begin with two forward slashes
– // used to comment a single line
– Block comments
• Begin with /* and end with */
– /* used to comment
– multiple lines */
Copyright © 2010 Pearson Addison-Wesley
1-9
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
Comments
• An example of a program that contains line
comments:
Copyright © 2010 Pearson Addison-Wesley
1-10
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
Comments
• An example of how block comments may
be used:
Copyright © 2010 Pearson Addison-Wesley
1-11
2.1 Getting Your Feet Wet with C++
and the Dark GDK Library
Programming Style:
Making Your Code Easier to Read
• Use blank lines and indentations to create a sense of
visual organization
• For example, one convention virtually all programmers
follow is:
– indenting statements inside a function
• Following conventions, such as indenting statements
inside a function, is known as programming style
Copyright © 2010 Pearson Addison-Wesley
1-12
2.2 The Screen Coordinate System
Concept:
A system of X and Y coordinates is
used to identify the locations of
pixels in a window.
Copyright © 2010 Pearson Addison-Wesley
1-13
2.2 The Screen Coordinate System
• The images that are displayed on a
computer screen are made up of tiny dots
called pixels
• The default Dark GDK window is 640 pixels
wide and 480 pixels high
• It has a resolution of 640 by 480
Copyright © 2010 Pearson Addison-Wesley
1-14
2.2 The Screen Coordinate System
Figure 2-3 The width and height of the default window
Copyright © 2010 Pearson Addison-Wesley
1-15
2.2 The Screen Coordinate System
• A screen coordinate system is used to
identify the position of each pixel in the
window.
• Each pixel has
– X coordinate
• Identifies the horizontal position
And
– Y coordinate
• identifies the vertical position
Copyright © 2010 Pearson Addison-Wesley
1-16
2.2 The Screen Coordinate System
• Coordinates are written in the form (X, Y)
– For example:
• Upper-left corner pixel coordinates are (0, 0)
– X is 0
– Y is 0
• The X coordinates increase from left to right
• The Y coordinates increase from top to bottom
– This is different from the Cartesian coordinate system you learned
about in mathematics
• Coordinate numbering begins at 0 in the upper-left corner
– Lower-right corner pixel coordinates are (639, 479)
• X is 639
• Y is 479
Copyright © 2010 Pearson Addison-Wesley
1-17
2.2 The Screen Coordinate System
Figure 2-4 various pixel locations in a 640 by 480 window
Copyright © 2010 Pearson Addison-Wesley
1-18
2.2 The Screen Coordinate System
Drawing Dots with the dbDot Function
• The dbDot function draws a dot at a specific
pixel location in the Dark GDK window.
• Here is the general format of how you call the
dbDot function:
dbDot(x, y);
Copyright © 2010 Pearson Addison-Wesley
1-19
2.2 The Screen Coordinate System
Drawing Dots with the dbDot Function
• In the general format,
– the x argument is the X coordinate
– the y argument is the Y coordinate
• For example, the following statement draws a dot
at the X coordinate 319 and the Y coordinate
239:
dbDot(319, 239);
Copyright © 2010 Pearson Addison-Wesley
1-20
2.2 The Screen Coordinate System
• The values that you write inside the function’s
parentheses are called arguments
• Arguments are pieces of data that you send to a
function when you call it
• When an argument is sent to a function, you are
passing the argument to the function
Copyright © 2010 Pearson Addison-Wesley
1-21
2.2 The Screen Coordinate System
The dbWait Function
• The dbWait function causes the program to wait
for a specified amount of time before continuing
• Here is the general format of how you call the
dbWait function:
dbWait(time);
Copyright © 2010 Pearson Addison-Wesley
1-22
2.2 The Screen Coordinate System
The dbWait Function
• The value that you provide for the time
argument is the number of milliseconds you want
the program to wait.
– There are 1000 milliseconds in a second
• The following statement will cause the
program to wait for 1 second:
dbWait(1000);
Copyright © 2010 Pearson Addison-Wesley
1-23
2.2 The Screen Coordinate System
• Dark GDK function names start with the letters db
• For example:
– dbDot
– dbWait
– dbWaitKey
• The Game Creators, the software company that
created the Dark GDK library, have also created a
programming language called Dark BASIC
– Most Dark GDK functions are the C++ equivalents of
Dark BASIC commands
• For this reason, Dark GDK function names start
with the letters db, meaning Dark BASIC
Copyright © 2010 Pearson Addison-Wesley
1-24
2.3 Basic 2D Shapes
Concept:
The Dark GDK library contains
several functions for drawing basic
2D shapes.
Copyright © 2010 Pearson Addison-Wesley
1-25
2.3 Basic 2D Shapes
• Objects that appear in 2D have only two
dimensions:
– Width
– Height
Figure 2-6 A twodimensional game
character
Copyright © 2010 Pearson Addison-Wesley
1-26
2.3 Basic 2D Shapes
• The Dark GDK library provides several
functions for drawing simple 2D shapes
– Lines
– Circles
– Ellipses
– Rectangles
Copyright © 2010 Pearson Addison-Wesley
1-27
2.3 Basic 2D Shapes
Drawing Lines: The dbLine Function
• The dbLine function draws a line between two
points in the Dark GDK window.
• Here is the general format of how you call the
dbLine function:
dbLine(x1, y1, x2, y2);
Copyright © 2010 Pearson Addison-Wesley
1-28
2.3 Basic 2D Shapes
Drawing Lines: The dbLine Function
• You pass four arguments to the dbLine
function
– X1 and Y1 are the coordinates for the starting
point of the line
– X2 and Y2 are the coordinates for the line’s
ending point
Copyright © 2010 Pearson Addison-Wesley
1-29
2.3 Basic 2D Shapes
Drawing Lines: The dbLine Function
• For example, the following statement draws a line
between the points (80, 120) and (400, 520):
dbLine(80, 120, 400, 520);
Figure 2-6 A line drawn from
(80, 120) to (400, 520)
Copyright © 2010 Pearson Addison-Wesley
1-30
2.3 Basic 2D Shapes
Drawing Rectangles: The dbBox Function
• The dbBox function draws a filled rectangle
– Filled means it is filled with color
• Here is the general format of how you call the dbBox
function:
dbBox(x1, y1, x2, y2);
Copyright © 2010 Pearson Addison-Wesley
1-31
2.3 Basic 2D Shapes
Drawing Rectangles: The dbBox Function
• You pass four arguments to the dbBox
function
– X1 and Y1 are the X and Y coordinates for the
rectangle’s upper-left corner
– X2 and Y2 are the X and Y coordinates for the
rectangle’s lower-right corner
Copyright © 2010 Pearson Addison-Wesley
1-32
2.3 Basic 2D Shapes
Drawing Rectangles: The dbBox Function
• For example, look at the following statement:
dbBox(100, 80, 540, 380);
Figure 2-12 A rectangle with
corners at (100, 80) and (540, 380)
Copyright © 2010 Pearson Addison-Wesley
1-33
2.3 Basic 2D Shapes
Drawing Circles: The dbCircle Function
• The dbCircle function draws a circle
• Here is the general format of how you call
the dbCircle function:
dbCircle(x, y, radius);
Copyright © 2010 Pearson Addison-Wesley
1-34
2.3 Basic 2D Shapes
Drawing Circles: The dbCircle Function
• The x and y arguments are the coordinates
of the circle’s center point
• The radius argument specifies the circle’s
radius
– The radius is the distance, in pixels, from the
center point to the outer edge
Copyright © 2010 Pearson Addison-Wesley
1-35
2.3 Basic 2D Shapes
Drawing Circles: The dbCircle Function
• Here is an example:
dbCircle(320, 240, 100);
Figure 2-16 A circle with
its center at (320, 240)
and a radius of 100
Copyright © 2010 Pearson Addison-Wesley
1-36
2.3 Basic 2D Shapes
Drawing Ellipses: The dbEllipse Function
• The dbEllipse function draws an ellipse
– an ellipse is an oval shape
• Here is the general format of how you call
the dbEllipse function:
dbEllipse(x, y, xrad, yrad);
Copyright © 2010 Pearson Addison-Wesley
1-37
2.3 Basic 2D Shapes
Drawing Ellipses: The dbEllipse Function
• The x and y arguments are the coordinates
of the ellipse’s center point
• The xrad argument specifies the ellipse’s
radius along the X axis
• The yrad argument specifies the ellipse’s
radius along the Y axis
Copyright © 2010 Pearson Addison-Wesley
1-38
2.3 Basic 2D Shapes
Drawing Ellipses: The dbEllipse Function
• Here is an example:
dbEllipse(320, 240, 140, 100);
Figure 2-18 An ellipse’s
center point, x-radius, and
y-radius
Copyright © 2010 Pearson Addison-Wesley
1-39
2.3 Basic 2D Shapes
Drawing Outside the Dark GDK Window
• Any point that has
– X coordinate from 0 through 639
– Y coordinate from 0 through 479
• Is visible in the Dark GDK window
• You can use points that have coordinates
outside these ranges but…
– They are not visible in the window
Copyright © 2010 Pearson Addison-Wesley
1-40
2.3 Basic 2D Shapes
Drawing Outside the Dark GDK Window
• For example, the following statement draws
a dot at the coordinates (800, 600)
dbDot(800, 600);
• But because that location is outside the
Dark GDK window, it will not be visible
Copyright © 2010 Pearson Addison-Wesley
1-41
2.3 Basic 2D Shapes
Drawing Outside the Dark GDK Window
• Points that are above the
top row of pixels in the
window have a negative
Y coordinate
• Points that are to the left
of the leftmost column of
pixels have a negative X
coordinate
Figure 2-20 Negative coordinates
Copyright © 2010 Pearson Addison-Wesley
1-42
2.3 Basic 2D Shapes
Drawing Outside the Dark GDK Window
• The following statement draws
a circle with its center point
located at (-50, -20) and with a
radius of 200
dbCircle(-50, -20, 200);
Figure 2-21 Circle drawn partially offscreen
Copyright © 2010 Pearson Addison-Wesley
1-43
2.4 Displaying Text
Concept:
You can use the dbPrint, dbText, or
dbCenterText functions to display
text in the Dark GDK window. You can
use the dbSetWindowTitle function
to display text in the window’s title bar.
Copyright © 2010 Pearson Addison-Wesley
1-44
2.4 Displaying Text
Displaying Text Inside the Dark GDK Window
• You can use these functions to display text
in the Dark GDK Window
– dbPrint
– dbText
– dbCenterText
Copyright © 2010 Pearson Addison-Wesley
1-45
2.4 Displaying Text
Displaying Text Inside the Dark GDK Window
• The dbPrint function displays a string of
characters
– String is a term used in programming to mean
“string of characters”
• Here is the general format of how you call
the dbPrint function:
dbPrint(string);
Copyright © 2010 Pearson Addison-Wesley
1-46
2.4 Displaying Text
Displaying Text Inside the Dark GDK Window
• The string argument is the string you want to display
• The string is printed as a line of output in the Dark GDK
window
• If no argument is passed
– a blank line will be displayed
• The first call to the dbPrint function
– output is printed at the top of the window, justified along the
left side
• Each subsequent call to the dbPrint function
– prints a line of output below the previous line of output.
Copyright © 2010 Pearson Addison-Wesley
1-47
2.4 Displaying Text
Displaying Text Inside the Dark GDK Window
• The dbText function displays a string of
characters at a specific location in the
window
• Here is the general format of how you call
the dbText function:
dbText(x, y, string);
Copyright © 2010 Pearson Addison-Wesley
1-48
2.4 Displaying Text
Displaying Text Inside the Dark GDK Window
• The x and y arguments are a set of
coordinates
• The string argument is the string that is
to be displayed
• When the string is displayed
– The upper-left corner of the first character will
be positioned at the X and Y coordinates
Copyright © 2010 Pearson Addison-Wesley
1-49
2.4 Displaying Text
Displaying Text Inside the Dark GDK Window
• For example, the following statement displays the string
“Hello World” in the window
dbText(10, 10, “Hello World”);
Figure 2-23 Results of the
dbText function
Copyright © 2010 Pearson Addison-Wesley
1-50
2.4 Displaying Text
Displaying Text Inside the Dark GDK Window
• Text can be centered horizontally with the dbCenterText Function
• Here is an example:
dbCenterText(319, 239, “Game Over”);
Figure 2-25 A string
centered just below the
point at (319, 239)
Copyright © 2010 Pearson Addison-Wesley
1-51
2.4 Displaying Text
Displaying Text in the Window’s Title Bar
• The dbSetWindowTitle function displays
text in the window’s title bar
• Here is the general format of how you call
the dbSetWindowTitle function:
dbSetWindowTitle(string);
Copyright © 2010 Pearson Addison-Wesley
1-52
2.5 The Program Development Cycle
Concept:
When creating programs,
programmers typically follow a
process known as the program
development cycle.
Copyright © 2010 Pearson Addison-Wesley
1-53
2.5 The Program Development Cycle
Figure 2-37 The program development cycle
•
•
•
•
•
•
Design the Program
Write the Code
Correct Syntax Errors
Test the Program
Correct Logic Errors
Repeat until error free
Copyright © 2010 Pearson Addison-Wesley
1-54
Chapter 2
Graphics Programming with C++ and the
Dark GDK Library
QUESTIONS
Addison Wesley
is an imprint of
?
© 2010 Pearson Addison-Wesley. All rights reserved.