1. Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 2 Graphics Programming with C++ and the Dark GDK Library Starting Out with Games & Graphics in C++ Tony Gaddis

2. Copyright © 2010 Pearson Addison-Wesley 1-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. Copyright © 2010 Pearson Addison-Wesley 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library 1-3 Minimum framework of a C++/Dark GDK program Figure 2-6 Summary of the skeleton program

4. Copyright © 2010 Pearson Addison-Wesley 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 1-4

5. Copyright © 2010 Pearson Addison-Wesley 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 1-5

6. Copyright © 2010 Pearson Addison-Wesley 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library 1-6 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. Copyright © 2010 Pearson Addison-Wesley 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library 1-7 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. Copyright © 2010 Pearson Addison-Wesley 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library Comments are: –Short notes explaining how parts of a program work –Not intended for the compiler –Intended for anyone who is reading the code 1-8 Comments

9. Copyright © 2010 Pearson Addison-Wesley 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library 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 */ 1-9 Comments

10. Copyright © 2010 Pearson Addison-Wesley 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library 1-10 Comments An example of a program that contains line comments:

11. Copyright © 2010 Pearson Addison-Wesley 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library 1-11 Comments An example of how block comments may be used:

12. Copyright © 2010 Pearson Addison-Wesley 2.1 Getting Your Feet Wet with C++ and the Dark GDK Library 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 1-12 Programming Style: Making Your Code Easier to Read

13. Copyright © 2010 Pearson Addison-Wesley 1-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. Copyright © 2010 Pearson Addison-Wesley 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 1-14

15. Copyright © 2010 Pearson Addison-Wesley 2.2 The Screen Coordinate System 1-15 Figure 2-3 The width and height of the default window

16. Copyright © 2010 Pearson Addison-Wesley 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 1-16

17. Copyright © 2010 Pearson Addison-Wesley 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 1-17

18. Copyright © 2010 Pearson Addison-Wesley 2.2 The Screen Coordinate System 1-18 Figure 2-4 various pixel locations in a 640 by 480 window

19. Copyright © 2010 Pearson Addison-Wesley 2.2 The Screen Coordinate System 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: 1-19 dbDot(x, y); Drawing Dots with the dbDot Function

20. Copyright © 2010 Pearson Addison-Wesley 2.2 The Screen Coordinate System 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: 1-20 Drawing Dots with the dbDot Function dbDot(319, 239);

21. Copyright © 2010 Pearson Addison-Wesley 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 1-21

22. Copyright © 2010 Pearson Addison-Wesley 2.2 The Screen Coordinate System 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: 1-22 dbWait(time); The dbWait Function

23. Copyright © 2010 Pearson Addison-Wesley 2.2 The Screen Coordinate System 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: 1-23 dbWait(1000); The dbWait Function

24. Copyright © 2010 Pearson Addison-Wesley 2.2 The Screen Coordinate System 1-24 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. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 1-25 Concept: The Dark GDK library contains several functions for drawing basic 2D shapes.

26. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes Objects that appear in 2D have only two dimensions: –Width –Height 1-26 Figure 2-6 A two- dimensional game character

27. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes The Dark GDK library provides several functions for drawing simple 2D shapes –Lines –Circles –Ellipses –Rectangles 1-27

28. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 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: 1-28 dbLine(x1, y1, x2, y2); Drawing Lines: The dbLine Function

29. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 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 1-29 Drawing Lines: The dbLine Function

30. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes For example, the following statement draws a line between the points (80, 120) and (400, 520): 1-30 Drawing Lines: The dbLine Function dbLine(80, 120, 400, 520); Figure 2-6 A line drawn from (80, 120) to (400, 520)

31. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 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: 1-31 Drawing Rectangles: The dbBox Function dbBox(x1, y1, x2, y2);

32. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 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 1-32 Drawing Rectangles: The dbBox Function

33. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes For example, look at the following statement: 1-33 Drawing Rectangles: The dbBox Function dbBox(100, 80, 540, 380); Figure 2-12 A rectangle with corners at (100, 80) and (540, 380)

34. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes The dbCircle function draws a circle Here is the general format of how you call the dbCircle function: 1-34 Drawing Circles: The dbCircle Function dbCircle(x, y, radius);

35. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 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 1-35 Drawing Circles: The dbCircle Function

36. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes Here is an example: 1-36 Drawing Circles: The dbCircle Function dbCircle(320, 240, 100); Figure 2-16 A circle with its center at (320, 240) and a radius of 100

37. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes The dbEllipse function draws an ellipse –an ellipse is an oval shape Here is the general format of how you call the dbEllipse function: 1-37 Drawing Ellipses: The dbEllipse Function dbEllipse(x, y, xrad, yrad);

38. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 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 1-38 Drawing Ellipses: The dbEllipse Function

39. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes Here is an example: 1-39 Drawing Ellipses: The dbEllipse Function Figure 2-18 An ellipse’s center point, x-radius, and y-radius dbEllipse(320, 240, 140, 100);

40. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 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 1-40 Drawing Outside the Dark GDK Window

41. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes For example, the following statement draws a dot at the coordinates (800, 600) 1-41 Drawing Outside the Dark GDK Window dbDot(800, 600); But because that location is outside the Dark GDK window, it will not be visible

42. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes 1-42 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. Copyright © 2010 Pearson Addison-Wesley 2.3 Basic 2D Shapes The following statement draws a circle with its center point located at (-50, -20) and with a radius of 200 1-43 Drawing Outside the Dark GDK Window dbCircle(-50, -20, 200); Figure 2-21 Circle drawn partially off- screen

44. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text 1-44 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. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text You can use these functions to display text in the Dark GDK Window –dbPrint –dbText –dbCenterText 1-45 Displaying Text Inside the Dark GDK Window

46. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text 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: 1-46 Displaying Text Inside the Dark GDK Window dbPrint(string);

47. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text 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. 1-47 Displaying Text Inside the Dark GDK Window

48. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text 1-48 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: Displaying Text Inside the Dark GDK Window dbText(x, y, string);

49. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text 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 1-49 Displaying Text Inside the Dark GDK Window

50. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text For example, the following statement displays the string “Hello World” in the window 1-50 Displaying Text Inside the Dark GDK Window dbText(10, 10, “Hello World”); Figure 2-23 Results of the dbText function

51. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text Text can be centered horizontally with the dbCenterText Function Here is an example: 1-51 Displaying Text Inside the Dark GDK Window dbCenterText(319, 239, “Game Over”); Figure 2-25 A string centered just below the point at (319, 239)

52. Copyright © 2010 Pearson Addison-Wesley 2.4 Displaying Text The dbSetWindowTitle function displays text in the window’s title bar Here is the general format of how you call the dbSetWindowTitle function: 1-52 Displaying Text in the Window’s Title Bar dbSetWindowTitle(string);

53. Copyright © 2010 Pearson Addison-Wesley 2.5 The Program Development Cycle 1-53 Concept: When creating programs, programmers typically follow a process known as the program development cycle.

54. Copyright © 2010 Pearson Addison-Wesley 2.5 The Program Development Cycle Design the Program Write the Code Correct Syntax Errors Test the Program Correct Logic Errors Repeat until error free 1-54 Figure 2-37 The program development cycle

55. Addison Wesley is an imprint of © 2010 Pearson Addison-Wesley. All rights reserved. Chapter 2 Graphics Programming with C++ and the Dark GDK Library QUESTIONS ?