1. Chapter 2 Graphics Programming with C++ and the Dark GDK Library
Starting Out with
Games & Graphics in C++
Tony Gaddis

2. 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++.

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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 */

10. 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library
Comments
An example of a program that contains line comments:

11. 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library
Comments
An example of how block comments may be used:

12. 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

13. 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.

14. 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

15. 2.2 The Screen Coordinate System
Figure 2-3 The width and height of the default window

16. 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

17. 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

18. 2.2 The Screen Coordinate System
Figure 2-4 various pixel locations in a 640 by 480 window

19. 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);

20. 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);

21. 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

22. 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);

23. 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);

24. 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

25. 2.3 Basic 2D Shapes Concept:
The Dark GDK library contains several functions for drawing basic 2D shapes.

26. 2.3 Basic 2D Shapes
Objects that appear in 2D have only two dimensions:
Width
Height
Figure 2-6 A two-dimensional game character

27. 2.3 Basic 2D Shapes
The Dark GDK library provides several functions for drawing simple 2D shapes
Lines
Circles
Ellipses
Rectangles

28. dbLine(x1, y1, x2, y2); 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);

29. 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

30. 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)

31. dbBox(x1, y1, x2, y2); 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);

32. 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

33. 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)

34. dbCircle(x, y, radius); 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);

35. 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

36. 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

37. dbEllipse(x, y, xrad, yrad);
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);

38. 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

39. 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

40. 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

41. dbDot(800, 600); 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

42. 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

43. 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 off-screen

44. 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.

45. 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

46. dbPrint(string); 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);

47. 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.

48. dbText(x, y, string); 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);

49. 2.4 Displaying Text The x and y arguments are a set of coordinates
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

50. dbText(10, 10, “Hello World”);
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

51. dbCenterText(319, 239, “Game Over”);
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)

52. dbSetWindowTitle(string);
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);

53. 2.5 The Program Development Cycle
Concept:
When creating programs, programmers typically follow a process known as the program development cycle.

54. 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

55. Chapter 2 Graphics Programming with C++ and the Dark GDK Library
QUESTIONS ?