http___programarcadegames.com_index.php_chapter_introduction_to_graphics_lang_tr_1.xml
1.1 2.1 3.1 3.2 4.1 4.2 5.1 5.2 6.1 6.2 7.1 8.1 9.1 9.2 9.3 9.4 10.1 10.2 10.3 10.4 11.1 11.2 11.3 12.1 12.2 12.3 12.4 13.1 14.1 14.2 14.3 14.4 14.5 15.1 15.2 15.3 15.4 16.1 17.1 17.2 18.1 19.1 20.1 21.1 22.1 23.1 24.1 24.2 25.1 26.1 26.2 27.1 27.2 27.3 28.1 29.1 29.2 29.3 29.4 29.5 29.6 29.7 29.8 30.1 30.2 30.3 30.4 31.1 31.2 31.3 31.4 31.5 32.1 33.1 33.2 33.3 33.4 33.5 34.1 35.1 36.1 37.1 37.2 38.1 38.2 39.1 40.1 40.2 40.3 41.1 42.1 42.2 44.1 45.1 45.2 45.3 45.4 46.1 47.1 47.2 47.3 47.4 47.5 47.6 47.7 48.1 48.2 48.3 48.4 48.5 48.6 48.7 48.8 48.9 48.10 49.1 50.1 51.1 52.1 52.2 52.3 52.4 53.1 53.2 54.1 54.2 54.3 54.4 54.5 54.6 55.1 55.2 55.3 55.4 55.5 56.1 57.1 57.2 57.3 57.4 58.1 58.2 58.3 58.4 59.1 59.2 59.3 60.1 60.2 61.1 61.2 61.3 61.4 61.5 61.6 61.7 61.8 62.1 62.2 63.1 64.1 64.2 64.3 64.4 64.5 64.6 64.7 65.1 65.2 65.3 65.4 65.5 65.6 66.1 67.1 68.1 69.1 70.1 71.1 72.1 73.1 74.1 75.1 75.2 75.3 75.4 75.5 76.1 76.2 76.3 76.4 76.5 77.1 78.1 78.2 79.1 79.2 80.1 81.1 82.1 82.2 83.1 84.1 84.2 85.1 85.2 85.3 86.1 87.1 87.2 87.3 87.4 87.5 88.1 88.2 89.1 89.2 90.1 91.1 91.2 91.3 92.1 93.1 93.2 93.3 93.4 93.5 93.6 93.7 93.8 94.1 95.1 96.1 97.1 97.2 97.3 97.4 98.1 99.1 99.2 99.3 100.1 101.1 102.1 103.1 103.2 104.1 105.1 105.2 106.1 107.1 107.2 107.3 108.1 108.2 109.1 109.2 109.3 109.4 110.1 111.1 111.2 111.3 112.1 112.2 112.3 112.4 113.1 113.2 113.3 113.4 113.5 113.6 114.1 115.1 116.1 117.1 117.2 117.3 118.1 119.1 119.2 120.1 121.1 122.1 123.1 124.1 124.2 125.1 125.2 125.3 126.1 126.2 126.3 126.4 127.1 128.1 129.1 129.2 130.1 130.2 130.3 131.1 131.2 131.3 131.4 132.1 133.1 134.1 134.2 134.3 134.4 135.1 135.2 135.3 136.1 136.2 136.3 137.1 138.1 138.2 138.3 138.4 138.5 138.6 139.1 140.1 141.1 141.2 141.3 142.1 142.2 143.1 144.1 145.1 145.2 145.3 145.4 145.5 145.6 146.1 146.2 146.3 147.1 148.1 148.2 148.3 148.4 149.1 150.1 150.2 150.3 151.1 152.1 152.2 153.1 154.1 155.1 156.1 157.1 158.1 158.2 159.1 160.1 161.1 161.2 161.3 161.4 161.5 161.6 161.7 161.8 161.9 161.10 161.11 161.12 161.13 161.14 161.15 162.1 163.1 164.1 165.1 166.1 168.1 169.1 169.2 170.1 171.1 172.1 173.1 174.1 175.1 176.1 177.1 178.1 179.1 180.1
Program Arcade GamesWith Python And Pygame Chapter 5: Introduction to Graphics Now that you can create loops, it is time to move on to learning how to create graphics. This chapter covers: - How the computer handles x, y coordinates. It isn't like the coordinate system you learned in math class. - How to specify colors. With millions of colors to choose from, telling the computer what color to use isn't as easy as just saying “red.” - How to open a blank window for drawing. Every artist needs a canvas. - How to draw lines, rectangles, ellipses, and arcs. 5.1 Computer Coordinate Systems The Cartesian coordinate system, shown in Figure 5.1 (Wikimedia Commons), is the system most people are used to when plotting graphics. This is the system taught in school. The computer uses a similar, but somewhat different, coordinate system. Understanding why it is different requires a quick bit of computer history. During the early '80s, most computer systems were text-based and did not support graphics. Figure 5.2 (Wikimedia Commons) shows an early spreadsheet program run on an Apple ][ computer that was popular in the '80s. When positioning text on the screen, programmers started at the top calling it line 1. The screen continued down for 24 lines and across for 40 characters. Even with plain text, it was possible to make rudimentary graphics by just using characters on the keyboard. See this kitten shown in Figure 5.3 and look carefully at how it is drawn. When making this art, characters were still positioned starting with line 1 at the top. Later the character set was expanded to include boxes and other primitive drawing shapes. Characters could be drawn in different colors. As shown in Figure 5.4 the graphics got more advanced. Search the web for “ASCII art” and many more examples can be found. Once computers moved to being able to control individual pixels for graphics, the text-based coordinate system stuck. The $x$ coordinates work the same as the Cartesian coordinates system. But the $y$ coordinates are reversed. Rather than the zero $y$ coordinate at the bottom of the graph like in Cartesian graphics, the zero $y$ coordinate is at the top of the screen with the computer. As the $y$ values go up, the computer coordinate position moved down the screen, just like lines of text rather than standard Cartesian graphics. See Figure 5.5. Also, note the screen covers the lower right quadrant, where the Cartesian coordinate system usually focuses on the upper right quadrant. It is possible to draw items at negative coordinates, but they will be drawn off-screen. This can be useful when part of a shape is off screen. The computer figures out what is off-screen and the programmer does not need to worry too much about it. 5.2 Pygame Library To make graphics easier to work with, we'll use “Pygame.” Pygame is a library of code other people have written, and makes it simple to: - Draw graphic shapes - Display bitmapped images - Animate - Interact with keyboard, mouse, and gamepad - Play sound - Detect when objects collide The first code a Pygame program needs to do is load and initialize the Pygame library. Every program that uses Pygame should start with these lines: # Import a library of functions called 'pygame' import pygame # Initialize the game engine pygame.init() If you haven't installed Pygame yet, directions for installing Pygame are available in the before you begin section. If Pygame is not installed on your computer, you will get an error when trying to run import pygame. Important: The import pygame looks for a library file named pygame. If a programmer creates a new program named pygame.py, the computer will import that file instead! This will prevent any pygame programs from working until that pygame.py file is deleted. 5.3 Colors Next, we need to add variables that define our program's colors. Colors are defined in a list of three colors: red, green, and blue. Have you ever heard of an RGB monitor? This is where the term comes. Red-Green-Blue. With older monitors, you could sit really close to the monitor and make out the individual RGB colors. At least before your mom told you not to sit so close to the TV. This is hard to do with today's high resolution monitors. Each element of the RGB triad is a number ranging from 0 to 255. Zero means there is none of the color, and 255 tells the monitor to display as much of the color as possible. The colors combine in an additive way, so if all three colors are specified, the color on the monitor appears white. (This is different than how ink and paint work.) Lists in Python are surrounded by either square brackets or parentheses. (Chapter 7 covers lists in detail and the difference between the two types.) Individual numbers in the list are separated by commas. Below is an example that creates variables and sets them equal to lists of three numbers. These lists will be used later to specify colors. # Define some colors BLACK = ( 0, 0, 0) WHITE = ( 255, 255, 255) GREEN = ( 0, 255, 0) RED = ( 255, 0, 0) BLUE = ( 0, 0, 255) Why are these variables in upper-case? Remember back from chapter one, a variable that doesn't change is called a constant. We don't expect the color of black to change; it is a constant. We signify that variables are constants by naming them with all upper-case letters. If we expect a color to change, like if we have sky_color that changes as the sun sets, then that variable would be in all lower-case letters. Using the interactive shell in IDLE, try defining these variables and printing them out. If the five colors above aren't the colors you are looking for, you can define your own. To pick a color, find an on-line “color picker” like the one shown in Figure 5.6. One such color picker is at: http://www.colorpicker.com/ Extra: Some color pickers specify colors in hexadecimal. You can enter hexadecimal numbers if you start them with 0x. For example: WHITE = (0xFF, 0xFF, 0xFF) Eventually the program will need to use the value of $\pi$ when drawing arcs, so this is a good time in our program to define a variable that contains the value of $\pi$. (It is also possible to import this from the math library as math.pi.) 5.4 Open a Window So far, the programs we have created only printed text out to the screen. Those programs did not open any windows like most modern programs do. The code to open a window is not complex. Below is the required code, which creates a window sized to a width of 700 pixels, and a height of 500: size = (700, 500) screen = pygame.display.set_mode(size) Why set_mode? Why not open_window? The reason is that this command can actually do a lot more than open a window. It can also create games that run in a full-screen mode. This removes the start menu, title bars, and gives the game control of everything on the screen. Because this mode is slightly more complex to use, and most people prefer windowed games anyway, we'll skip a detailed discussion on full-screen games. But if you want to find out more about full-screen games, check out the documentation on pygame's display command. Also, why size = (700, 500) and not size = 700, 500? The same reason why we put parentheses around the color definitions. Python can't normally store two numbers (a height and width) into one variable. The only way it can is if the numbers are stored as a list. Lists need either parentheses or square brackets. (Technically, parenthesis surrounding a set of numbers is more accurately called a tuple or an immutable list. Lists surrounded by square brackets are just called lists. An experienced Python developer would cringe at calling a list of numbers surrounded by parentheses a list rather than a tuple. Also you can actually say size = 700, 500 and it will default to a tuple but I prefer to use parentheses.) Lists are covered in detail in Chapter 7. To set the title of the window (which is shown in the title bar) use the following line of code: pygame.display.set_caption("Professor Craven's Cool Game") 5.5 Interacting With the User With just the code written so far, the program would create a window and immediately hang. The user can't interact with the window, even to close it. All of this needs to be programmed. Code needs to be added so that the program waits in a loop until the user clicks “exit.” This is the most complex part of the program, and a complete understanding of it isn't needed yet. But it is necessary to have an idea of what it does, so spend some time studying it and asking questions. # Loop until the user clicks the close button. done = False # Used to manage how fast the screen updates clock = pygame.time. Clock() # -------- Main Program Loop ----------- while not done: # --- Main event loop for event in pygame.event.get(): # User did something if event.type == pygame.QUIT: # If user clicked close done = True # Flag that we are done so we exit this loop # --- Game logic should go here # --- Drawing code should go here # First, clear the screen to white. Don't put other drawing commands # above this, or they will be erased with this command. screen.fill(WHITE) # --- Go ahead and update the screen with what we've drawn. pygame.display.flip() # --- Limit to 60 frames per second clock.tick(60) Eventually we will add code to handle the keyboard and mouse clicks. That code will go below the comment for main event loop on line 9. Code for determining when bullets are fired and how objects move will go below the comment for game logic on line 14. We'll talk about that in later chapters. Code to draw will go in below where the screen is filled with white on line 20. 5.5.1 The Event Processing Loop Alert! One of the most frustrating problems programmers have is to mess up the event processing loop. This “event processing” code handles all the keystrokes, mouse button clicks, and several other types of events. For example your loop might look like: for event in pygame.event.get(): if event.type == pygame.QUIT: print("User asked to quit.") elif event.type == pygame.KEYDOWN: print("User pressed a key.") elif event.type == pygame.KEYUP: print("User let go of a key.") elif event.type == pygame.MOUSEBUTTONDOWN: print("User pressed a mouse button") The events (like pressing keys) all go together in a list. The program uses a for loop to loop through each event. Using a chain of if statements the code figures out what type of event occurred, and the code to handle that event goes in the if statement. All the if statements should go together, in one for loop. A common mistake when doing copy and pasting of code is to not merge loops from two programs, but to have two event loops. # Here is one event loop for event in pygame.event.get(): if event.type == pygame.QUIT: print("User asked to quit.") elif event.type == pygame.KEYDOWN: print("User pressed a key.") elif event.type == pygame.KEYUP: print("User let go of a key.") # Here the programmer has copied another event loop # into the program. This is BAD. The events were already # processed. for event in pygame.event.get(): if event.type == pygame.QUIT: print("User asked to quit.") elif event.type == pygame.MOUSEBUTTONDOWN: print("User pressed a mouse button") The for loop on line 2 grabbed all of the user events. The for loop on line 13 won't grab any events because they were already processed in the prior loop. Another typical problem is to start drawing, and then try to finish the event loop: for event in pygame.event.get(): if event.type == pygame.QUIT: print("User asked to quit.") elif event.type == pygame.KEYDOWN: print("User pressed a key.") pygame.draw.rect(screen, GREEN, [50,50,100,100]) # This is code that processes events. But it is not in the # 'for' loop that processes events. It will not act reliably. if event.type == pygame.KEYUP: print("User let go of a key.") elif event.type == pygame.MOUSEBUTTONDOWN: print("User pressed a mouse button") This will cause the program to ignore some keyboard and mouse commands. Why? The for loop processes all the events in a list. So if there are two keys that are hit, the for loop will process both. In the example above, the if statements are not in the for loop. If there are multiple events, the if statements will only run for the last event, rather than all events. 5.5.2 Processing Each Frame The basic logic and order for each frame of the game: - While not done: - For each event (keypress, mouse click, etc.): - Use a chain of if statements to run code to handle each event. - Run calculations to determine where objects move, what happens when objects collide, etc. - Clear the screen - Draw everything - For each event (keypress, mouse click, etc.): It makes the program easier to read and understand if these steps aren't mixed togther. Don't do some calculations, some drawing, some more calculations, some more drawing. Also, see how this is similar to the calculator done in chapter one. Get user input, run calculations, and output the answer. That same pattern applies here. The code for drawing the image to the screen happens inside the while loop. With the clock tick set at 10, the contents of the window will be drawn 10 times per second. If it happens too fast the computer is sluggish because all of its time is spent updating the screen. If it isn't in the loop at all, the screen won't redraw properly. If the drawing is outside the loop, the screen may initially show the graphics, but the graphics won't reappear if the window is minimized, or if another window is placed in front. 5.6 Ending the Program Right now, clicking the “close” button of a window while running this Pygame program in IDLE will still cause the program to crash. This is a hassle because it requires a lot of clicking to close a crashed program. The problem is, even though the loop has exited, the program hasn't told the computer to close the window. By calling the command below, the program will close any open windows and exit as desired. pygame.quit() 5.7 Clearing the Screen The following code clears whatever might be in the window with a white background. Remember that the variable WHITE was defined earlier as a list of 3 RGB values. # Clear the screen and set the screen background screen.fill(WHITE) This should be done before any drawing command is issued. Clearing the screen after the program draws graphics results in the user only seeing a blank screen. When a window is first created it has a black background. It is still important to clear the screen because there are several things that could occur to keep this window from starting out cleared. A program should not assume it has a blank canvas to draw on. 5.8 Flipping the Screen Very important! You must flip the display after you draw. The computer will not display the graphics as you draw them because it would cause the screen to flicker. This waits to display the screen until the program has finished drawing. The command below “flips” the graphics to the screen. Failure to include this command will mean the program just shows a blank screen. Any drawing code after this flip will not display. # Go ahead and update the screen with what we've drawn. pygame.display.flip() 5.9 Open a Blank Window Let's bring everything we've talked about into one full program. This code can be used as a base template for a Pygame program. It opens up a blank window and waits for the user to press the close button. On the website, if you click the “Examples” button you can select “graphics examples” and then you will find this file as pygame_base_template.py. """ Pygame base template for opening a window Sample Python/Pygame Programs Simpson College Computer Science http://programarcadegames.com/ http://simpson.edu/computer-science/ Explanation video: http://youtu.be/vRB_983kUMc """ import pygame # Define some colors BLACK = (0, 0, 0) WHITE = (255, 255, 255) GREEN = (0, 255, 0) RED = (255, 0, 0) pygame.init() # Set the width and height of the screen [width, height] size = (700, 500) screen = pygame.display.set_mode(size) pygame.display.set_caption("My Game") # Loop until the user clicks the close button. done = False # Used to manage how fast the screen updates clock = pygame.time. Clock() # -------- Main Program Loop ----------- while not done: # --- Main event loop for event in pygame.event.get(): if event.type == pygame.QUIT: done = True # --- Game logic should go here # --- Screen-clearing code goes here # Here, we clear the screen to white. Don't put other drawing commands # above this, or they will be erased with this command. # If you want a background image, replace this clear with blit'ing the # background image. screen.fill(WHITE) # --- Drawing code should go here # --- Go ahead and update the screen with what we've drawn. pygame.display.flip() # --- Limit to 60 frames per second clock.tick(60) # Close the window and quit. pygame.quit() 5.10 Drawing Introduction Here is a list of things that you can draw: http://www.pygame.org/docs/ref/draw.html A program can draw things like rectangles, polygons, circles, ellipses, arcs, and lines. We will also cover how to display text with graphics. Bitmapped graphics such as images are covered in Chapter 11. If you decide to look at that pygame reference, you might see a function definition like this: pygame.draw.rect(Surface, color, Rect, width=0): return Rect A frequent cause of confusion is the part of the line that says width=0. What this means is that if you do not supply a width, it will default to zero. Thus this function call: pygame.draw.rect(screen, RED, [55, 50, 20, 25]) Is the same as this function call: pygame.draw.rect(screen, RED, [55, 50, 20, 25], 0) The : return Rect is telling you that the function returns a rectangle, the same one that was passed in. You can just ignore this part. What will not work, is attempting to copy the line and put width = 0 in the parentheses. # This fails and the error the computer gives you is # really hard to understand. pygame.draw.rect(screen, RED, [55, 50, 20, 25], width=0) 5.11 Drawing Lines The code example below shows how to draw a line on the screen. It will draw on the screen a green line from (0, 0) to (100, 100) that is 5 pixels wide. Remember that GREEN is a variable that was defined earlier as a list of three RGB values. # Draw on the screen a green line from (0, 0) to (100, 100) # that is 5 pixels wide. pygame.draw.line(screen, GREEN, [0, 0], [100, 100], 5) Use the base template from the prior example and add the code to draw lines. Read the comments to figure out exactly where to put the code. Try drawing lines with different thicknesses, colors, and locations. Draw several lines. 5.12 Drawing Lines With Loops and Offsets Programs can repeat things over and over. The next code example draws a line over and over using a loop. Programs can use this technique to do multiple lines, and even draw an entire car. Putting a line drawing command inside a loop will cause multiple lines being drawn to the screen. But here's the catch. If each line has the same starting and ending coordinates, then each line will draw on top of the other line. It will look like only one line was drawn. To get around this, it is necessary to offset the coordinates each time through the loop. So the first time through the loop the variable y_offset is zero. The line in the code below is drawn from (0,10) to (100, 110). The next time through the loop y_offset increased by 10. This causes the next line to be drawn to have new coordinates of (0, 20) and (100, 120). This continues each time through the loop shifting the coordinates of each line down by 10 pixels. # Draw on the screen several lines from (0, 10) to (100, 110) # 5 pixels wide using a while loop y_offset = 0 while y_offset < 100: pygame.draw.line(screen,RED,[0,10+y_offset],[100,110+y_offset],5) y_offset = y_offset + 10 This same code could be done even more easily with a for loop: # Draw on the screen several lines from (0,10) to (100,110) # 5 pixels wide using a for loop for y_offset in range(0, 100, 10): pygame.draw.line(screen,RED,[0,10+y_offset],[100,110+y_offset],5) Run this code and try using different changes to the offset. Try creating an offset with different values. Experiment with different values until exactly how this works is obvious. For example, here is a loop that uses sine and cosine to create a more complex set of offsets and produces the image shown in Figure 5.7. # For this code, make sure to have a line that says # "import math" at the top of your program. Otherwise # it won't know what math.sin is. for i in range(200): radians_x = i / 20 radians_y = i / 6 x = int(75 * math.sin(radians_x)) + 200 y = int(75 * math.cos(radians_y)) + 200 pygame.draw.line(screen, BLACK, [x,y], [x+5,y], 5) Multiple elements can be drawn in one for loop, such as this code which draws the multiple X's shown in Figure 5.8. for x_offset in range(30, 300, 30): pygame.draw.line(screen,BLACK,[x_offset,100],[x_offset-10,90],2) pygame.draw.line(screen,BLACK,[x_offset,90],[x_offset-10,100],2) 5.13 Drawing a Rectangle When drawing a rectangle, the computer needs coordinates for the upper left rectangle corner (the origin), and a height and width. Figure 5.9 shows a rectangle (and an ellipse, which will be explained later) with the origin at (20, 20), a width of 250 and a height of 100. When specifying a rectangle the computer needs a list of these four numbers in the order of (x, y, width, height). The next code example draws this rectangle. The first two numbers in the list define the upper left corner at (20, 20). The next two numbers specify first the width of 250 pixels, and then the height of 100 pixels. The 2 at the end specifies a line width of 2 pixels. The larger the number, the thicker the line around the rectangle. If this number is 0, then there will not be a border around the rectangle. Instead it will be filled in with the color specified. # Draw a rectangle pygame.draw.rect(screen,BLACK,[20,20,250,100],2) 5.14 Drawing an ellipse An ellipse is drawn just like a rectangle. The boundaries of a rectangle are specified, and the computer draws an ellipses inside those boundaries. The most common mistake in working with an ellipse is to think that the starting point specifies the center of the ellipse. In reality, nothing is drawn at the starting point. It is the upper left of a rectangle that contains the ellipse. Looking back at Figure 5.9 one can see an ellipse 250 pixels wide and 100 pixels tall. The upper left corner of the 250x100 rectangle that contains it is at (20, 20). Note that nothing is actually drawn at (20, 20). With both drawn on top of each other it is easier to see how the ellipse is specified. # Draw an ellipse, using a rectangle as the outside boundaries pygame.draw.ellipse(screen, BLACK, [20,20,250,100], 2) 5.15 Drawing an Arc What if a program only needs to draw part of an ellipse? That can be done with the arc command. This command is similar to the ellipse command, but it includes start and end angles for the arc to be drawn. The angles are in radians. The code example below draws four arcs showing four difference quadrants of the circle. Each quadrant is drawn in a different color to make the arcs sections easier to see. The result of this code is shown in Figure 5.10. # Draw an arc as part of an ellipse. Use radians to determine what # angle to draw. pygame.draw.arc(screen, GREEN, [100,100,250,200], PI/2, PI, 2) pygame.draw.arc(screen, BLACK, [100,100,250,200], 0, PI/2, 2) pygame.draw.arc(screen, RED, [100,100,250,200],3*PI/2, 2*PI, 2) pygame.draw.arc(screen, BLUE, [100,100,250,200], PI, 3*PI/2, 2) 5.16 Drawing a Polygon The next line of code draws a polygon. The triangle shape is defined with three points at (100, 100) (0, 200) and (200, 200). It is possible to list as many points as desired. Note how the points are listed. Each point is a list of two numbers, and the points themselves are nested in another list that holds all the points. This code draws what can be seen in Figure 5.11. # This draws a triangle using the polygon command pygame.draw.polygon(screen, BLACK, [[100,100], [0,200], [200,200]], 5) 5.17 Drawing Text Text is slightly more complex. There are three things that need to be done. First, the program creates a variable that holds information about the font to be used, such as what typeface and how big. Second, the program creates an image of the text. One way to think of it is that the program carves out a “stamp” with the required letters that is ready to be dipped in ink and stamped on the paper. The third thing that is done is the program tells where this image of the text should be stamped (or “blit'ed”) to the screen. Here's an example: # Select the font to use, size, bold, italics font = pygame.font. SysFont('Calibri', 25, True, False) # Render the text. "True" means anti-aliased text. # Black is the color. The variable BLACK was defined # above as a list of [0, 0, 0] # Note: This line creates an image of the letters, # but does not put it on the screen yet. text = font.render("My text",True,BLACK) # Put the image of the text on the screen at 250x250 screen.blit(text, [250, 250]) Want to print the score to the screen? That is a bit more complex. This does not work: text = font.render("Score: ", score, True, BLACK) Why? A program can't just add extra items to font.render like the print statement. Only one string can be sent to the command, therefore the actual value of score needs to be appended to the “Score: ” string. But this doesn't work either: text = font.render("Score: " + score, True, BLACK) If score is an integer variable, the computer doesn't know how to add it to a string. You, the programmer, must convert the score to a string. Then add the strings together like this: text = font.render("Score: " + str(score), True, BLACK) Now you know how to print the score. If you want to print a timer, that requires print formatting, discussed in a chapter later on. Check in the example code for section on-line for the timer.py example: ProgramArcadeGames.com/python_examples/f.php?file=timer.py 5.18 Full Program Listing This is a full listing of the program discussed in this chapter. This program, along with other programs, may be downloaded from: ProgramArcadeGames.com/index.php?chapter=example_code """ Simple graphics demo Sample Python/Pygame Programs Simpson College Computer Science http://programarcadegames.com/ http://simpson.edu/computer-science/ """ # Import a library of functions called 'pygame' import pygame # Initialize the game engine pygame.init() # Define some colors BLACK = (0, 0, 0) WHITE = (255, 255, 255) BLUE = (0, 0, 255) GREEN = (0, 255, 0) RED = (255, 0, 0) PI = 3.141592653 # Set the height and width of the screen size = (400, 500) screen = pygame.display.set_mode(size) pygame.display.set_caption("Professor Craven's Cool Game") # Loop until the user clicks the close button. done = False clock = pygame.time. Clock() # Loop as long as done == False while not done: for event in pygame.event.get(): # User did something if event.type == pygame.QUIT: # If user clicked close done = True # Flag that we are done so we exit this loop # All drawing code happens after the for loop and but # inside the main while not done loop. # Clear the screen and set the screen background screen.fill(WHITE) # Draw on the screen a line from (0,0) to (100,100) # 5 pixels wide. pygame.draw.line(screen, GREEN, [0, 0], [100, 100], 5) # Draw on the screen several lines from (0,10) to (100,110) # 5 pixels wide using a loop for y_offset in range(0, 100, 10): pygame.draw.line(screen, RED, [0, 10 + y_offset], [100, 110 + y_offset], 5) # Draw a rectangle pygame.draw.rect(screen, BLACK, [20, 20, 250, 100], 2) # Draw an ellipse, using a rectangle as the outside boundaries pygame.draw.ellipse(screen, BLACK, [20, 20, 250, 100], 2) # Draw an arc as part of an ellipse. # Use radians to determine what angle to draw. pygame.draw.arc(screen, BLACK, [20, 220, 250, 200], 0, PI / 2, 2) pygame.draw.arc(screen, GREEN, [20, 220, 250, 200], PI / 2, PI, 2) pygame.draw.arc(screen, BLUE, [20, 220, 250, 200], PI, 3 * PI / 2, 2) pygame.draw.arc(screen, RED, [20, 220, 250, 200], 3 * PI / 2, 2 * PI, 2) # This draws a triangle using the polygon command pygame.draw.polygon(screen, BLACK, [[100, 100], [0, 200], [200, 200]], 5) # Select the font to use, size, bold, italics font = pygame.font. SysFont('Calibri', 25, True, False) # Render the text. "True" means anti-aliased text. # Black is the color. This creates an image of the # letters, but does not put it on the screen text = font.render("My text", True, BLACK) # Put the image of the text on the screen at 250x250 screen.blit(text, [250, 250]) # Go ahead and update the screen with what we've drawn. # This MUST happen after all the other drawing commands. pygame.display.flip() # This limits the while loop to a max of 60 times per second. # Leave this out and we will use all CPU we can. clock.tick(60) # Be IDLE friendly pygame.quit() 5.19 Review 5.19.1 Multiple Choice Quiz Click here for a multiple-choice quiz. 5.19.2 Short Answer Worksheet Click here for the chapter worksheet. Click here for the chapter lab. You are not logged in. Log in here and track your progress. English version by Paul Vincent Craven Spanish version by Antonio Rodríguez Verdugo Russian version by Vladimir Slav Turkish version by Güray Yildirim Portuguese version by Armando Marques Sobrinho and Tati Carvalho Dutch version by Frank Waegeman Hungarian version by Nagy Attila Finnish version by Jouko Järvenpää French version by Franco Rossi Korean version by Kim Zeung-Il Chinese version by Kai Lin
1.1 2.1 3.1 4.1 5.1 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 35.1 36.1 37.1 38.1 39.1 41.1 42.1 43.1 44.1 45.1 46.1 47.1 48.1 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 60.1 61.1 62.1 63.1 64.1 65.1 66.1 67.1 68.1 69.1 70.1 71.1 72.1 73.1 74.1 75.1 76.1 77.1 78.1 79.1 80.1 81.1 82.1 83.1 84.1 85.1 86.1 87.1 88.1 89.1 90.1 91.1 92.1 93.1 94.1 95.1 96.1 97.1 98.1 99.1 100.1 101.1 102.1 103.1 104.1 105.1 106.1 107.1 108.1 109.1 110.1 111.1 112.1 113.1 114.1 115.1 116.1 117.1 118.1 119.1 120.1 121.1 122.1 123.1 124.1 125.1 126.1 127.1 128.1 129.1 130.1 131.1 132.1 133.1 134.1 135.1 136.1 137.1 138.1 139.1 140.1 141.1 143.1 144.1 145.1 146.1 147.1 148.1 149.1 150.1 151.1 152.1 153.1 154.1 155.1 156.1
Arcade Türü Oyun Programlamayıve Bilgisayar Bilimleri Öğrenin Chapter 5: Grafiklere Giriş Doğrudan grafik çizimlerine geçmek mükemmel olmakla birlikte, ilk olarak öğrenilecek birkaç şey var: - Bilgisayar x ve y koordinatlarını nasıl ele alır? Bu matematik derslerinde öğrendiğiniz koordinat sistemi gibi değildir. - Renkler nasıl belirtilir? Seçilebilecek milyonlarca renk olmakla birlikte, bilgisayara hangi rengin kullanılacağını söylemek sadece "kırmızı" demek kadar kolay değildir. - Çizim için boş bir pencere nasıl açılır? Her ressam bir tuvale ihtiyaç duyar. Bunun ardından, bu bölümde çizgilerin, dikdördgenlerin, elipslerin ve kavislerin nasıl çizileceğini gösterilecektir. 5.1 Bilgisayarın koordinat sistemleri Şekil 5.1'de de görüldüğü üzere (Wikimedia Commons'tan alınan grafik), Kartezyen koordinat sistemi çoğu insanın grafik çizerken kullandığı sistemdir. Bu okulun matematik derslerinde öğretilen standart sistemdir. Bilgisayar benzer, fakat biraz farklı bir koordinat sistemi kullanır. Neden farklı olduğunu anlamak birazcık bilgisayar tarihi gerektirir. 80'lerin başındayken, çoğu bilgisayar sistemi metin-bazlıydı ve grafikleri desteklemiyordu. Şekil 5.2(Wikimedia Commons'un grafiği) , Apple ][ üzerinde çalışan eski bir elektronik çizelge programını gösteriyor. Metin ekrana yerleştirilirken, programcılar üst kısmı 1. satır olarak adlandırmaya başladı. Ekran aşağı doğru 24 satır ve karşıya doğru 40 satır devam etti. Düz metinde bile, ilkel grafikleri yapmak sadece klavyede bulunan Şekil 5.3'te de görülen karakterlerle mümkündü. Bu kadarkterler de üstte birinci satırdan başlıyordu. Karakter seti, kutuları ve diğer ilkel şekil çizimlerini içerecek şekilde genişletildi. Karakterler farklı renklerde çizilebildi. Şekil 5.4'deki gibi grafikler daha üst seviyeye ulaştı. İnternette “ASCII art” araması yaparak çok daha fazla örnek bulunabilir. Bilgisayarlar pikselleri ayrı ayrı kontrol edebilecek seviyeye geldiğinde, metin-bazlı koordinat sistemleri bitti. $x$ koordinatları Kartezyen koordinat sistemiyle aynı şekilde çalışırken $y$ koordinatları tersine çevrilmiştir. $y$ koordinatının sıfırı Kartezyen grafiklerde olduğu gibi ekranın altından başlayacağına, ekranın üst kısmına $y$ koordinatının sıfırı denilmiştir. $y$ değerleri büyüdükçe bilgisayar koordinat pozisyonu ekranda aşağı kayar. Tıpkı Kartezyen grafikler yerine metindeki satırlar gibi. Ayrıca, ekranın Kartezyen koordinat sisteminin daima sağ üst çeyreğe odaklandığı yerde sağ alt çeyreği kapladığına dikkat edin. Negatif koordinatlarla öğeleri çizmek mümkündür, fakat onlar ekran dışına çizilmiş olacaklardır. Şeklenin bir kısmı ekranda gösterilmeyecekse bu kullanışlı olabilir. Bilgisayar neyin ekran dışında olduğunu hesaplar ve programcı onun hakkında çok fazla endişelenmeye ihtiyaç duymaz. 5.2 Pygame Kütüphanesi Grafiklerin daha rahat çalışılır hale gelmesi için, Pygame'i kullanacağız. Pygame farklı kişiler tarafından yazılan bir kod kütüphanesidir ve şunları yapmayı kolaylaştırır: - Grafik şekilleri çizmek - Bitmap resimleri göstermek - Animasyon yapmak - Klavye, fare ve oyun kolu etkileşimi - Ses dosyası oynatmak - Nesnelerin çarpıştığını tespit etmek Pygame'i hala yüklemediyseniz, Pygame kurulum yönergeleri burada mevcuttur. Pygame bilgisayarınızda yüklü değilse, import pygame'i çalıştırmayı denerken bir hata ile karşılaşacaksınız. Örnek Pygame programımıza koyulacak ilk şey Pygame kütüphanesini yükleyecek ve başlatacak Python kodudur. Pygame kullanan her program şu satırlarla başlamalıdır: # 'pygame' adı verilen fonksiyon kütüphanesini import et import pygame # Oyun motorunu başlat pygame.init() Önemli: import pygame komutu pygame isimli bir kütüphane dosyasını arar. Programcı pygame.py adıyla bir program oluşturmuşsa, bilgisayar bu dosyayı Pygame yerine import edecektir! Bu işlem pygame.py dosyası silinene kadar bütün pygame programlarının çalışmasını engelleyecekir. 5.3 Renkler Alttaki Python kodu programa kullanılacak olan renkleri tanımlamak için ekleniyor. Renkler üç rengin listesi olarak tanımlanır: kırmızı, yeşil ve mavi. Sayıların aralığı 0 ile 255 arasındadır. Sıfır o renkten hiç olmadığını belirtirken 255 ekranın o renkten mümkün olduğunca çok göstermesi anlamına gelir. Renkler birleşir ve böylece eğer üç renk de belirtilmişse, ekranın rengi beyaz olarak gözükür. Python'da listeler köşeli parantezler arasında yer alır. Farklı sayılar virgüllerle ayrılır. Altta değişkenler üreten ve onlara üçer sayıdan oluşan listeler atayan bir örnek yer almaktadır. Bu listeler daha sonra renkleri belirtmede kullanılacaktır. # Define some colors black = ( 0, 0, 0) white = ( 255, 255, 255) green = ( 0, 255, 0) red = ( 255, 0, 0) IDLE'de yer alan etkileşimli kabuğu kullanarak bu değişkenleri tanımlamayı ve ekrana yazdırmayı deneyin. Eğer yukarıdaki beş renk beklediğiniz renkler değilse kendi renklerinizi tanımlayabilirsiniz. Bir renk seçmek için, bir online "renk seçici" bulun. Örneğin: http://www.colorpicker.com/ Ekstra: Bazı renk seçiciler renkleri hegzadesimal(onaltılık) olarak belirtiler. Eğer sayılarınız 0x ile başlıyorsa onaltılık sayıları girebilirsiniz. Mesela: white=[0xFF, 0xFF, 0xFF] Sonunda, program eğrileri çizerken $\pi$ değerini kullanmaya ihtiyaç yuarcaktır. Yani şu an, $\pi$ değerini içeren bir değişken tanımlamak için iyi bir zaman. 5.4 Pencere açmak Şimdiye kadar oluşturduğumuz programlar sadece yazılan metni ekrana yazdırıyordu. Bu programlar Windows veya Mac'lerde olan modern programlar gibi pencereler açmazlar. Bir pencere açmak için gerekli kod karışık değildir. Alttaki, 700 piksel genişliğinde ve 500 piksel yüksekliğinde bir pencere oluşturmak için gerekli kodtur. # Ekranın genişliğini ve yüksekliğini belirle size=[700,500] screen=pygame.display.set_mode(size) Neden set_mode? Neden open_window değil? Bunun sebebi bu komutun aslında bir pencere açmaktan çok daha fazlasını yapması. O ayrıca tam ekran modta çalışan oyunlar oluşturabilir. Başlat menüsünü, durum çubuklarını siler ve ekrandaki her şeyin kontrolünü oyuna verir. Bu mod kullanım için biraz daha karışık olduğu ve çoğu kişi yine de pencereli oyun yapmayı tercih ettiği için tam ekran oyunlar hakkında detaylı bir tartışmayı pas geçeceğiz. Fakat tam ekran oyunlar hakkında daha fazla bilgi edinmek istiyorsanız, pygame'in display komutu adresinden dökümantasyona göz atabilirsiniz.. Ayrıca, neden size=700,500 değil de size=[700,500]? Python normalde iki değişkeni (yükseklik ve genişlik) tek bir değişkenin içerisinde saklayamaz. Bunu yapmanın tek yolu numaraların bir listede saklanmasıdır. Listeler birden çok sayının köşeli parantezler içerisine yazılması sonucu oluşturulur. Bu sonraki bölümlerde detaylı olarak tartışılmıştır, fakat pencere boyutunu ayarlarken aklınızda tutun. Pencerenin başlık çubuğundaki başlığını ve küçültüldüğünde görünecek başlığını ayarlamak için alttaki kodu kullanın: pygame.display.set_caption("Professor Craven's Cool Game") 5.5 Kullanıcı ile etkileşim Şu ana kadar yazılan kodla program bir pencere oluşturup hemen ardından onu tutabilir. Kullanıcı pencereyle etkileşime geçemez, kapatamaz bile. Tüm bunların programlanması gereklidir. Kullanıcı "çıkış."a basana kada programın bekleyeceği bir bir döngünün koda eklenmesi gerekmektedir. Bu programın en karmaşık kısmıdır ve bunun tamamen anlaşılması şu an için gerekli değildir. Gerekli olan ise bunun ne olduğu hakkında bir fikir sahibi olmaktır. Sonuç olarak, bunu çalışırken ve sorular sorarken biraz zaman harcayın. # Kullanıcı kapatma butonuna basana kadar çalışacak döngü done=False # Ekranın ne hızla güncelleneceğini yönetmek için kullanılır clock=pygame.time.Clock() # -------- Ana Program Döngüsü ----------- while done==False: # TÜM EVENT PROCESSING (OLAY İŞLEME) BU İÇERİĞİN ALTINDA YER ALMALIDIR. for event in pygame.event.get(): # Kullanıcı bir şey yaptı if event.type == pygame.QUIT: # Kullanıcı kapata bastıysa done=True # Bittiğimizi ve döngüden çıkılması gerektiğini belirt. # TÜM EVENT PROCESSING (OLAY İŞLEME) BU İÇERİĞİN ÜSTÜNDE YER ALMALIDIR # TÜM OYUN MANTIĞI BU YORUMUN ALTINDA YER ALMALIDIR # TÜM OYUN MANTIĞI BU YORUMUN ALTINDA ÜSTÜNDE ALMALIDIR # ÇİZİLECEK TÜM KOD BU YORUMUN ALTINDA YER ALMALIDIR # ÇİZİLECEK TÜM KOD BU YORUMUN ÜSTÜNDE YER ALMALIDIR # Saniyede 20 yenileme sınırı clock.tick(20) Son olarak, klavye ve fare tıklamalarını işleyecek olan kodumuzu ekleyeceğiz. Bu kod event processing(olay işleme) ile ilgili yorumların arasında yer alacak. Kurşunlar atıldığında nesnelerin nasıl hareket edeceğini belirleyen kod oyun mantığı ile ilgili yorumların arasında yer alacak. Bunun hakkında sonraki bölümlerde konuşacağız. Çizim yapacak olan kod uygun çizim-kodu yorumlarının arasında yer alacak. Oyunun her bir frame'i (çerçevesi) için sıralama ve basit oyun mantığı: - Bitmediği sürece: - Pencere istekleri, kullanıcının bastığı tuşları ve fare tıklamaları gibi her event'i işleme koy. - Nesnelerin nereye hareket ettiği, çarpıştıklarında nelerin meydana geleceği vb. olayları belirleyen hesaplamalar çalışacak. - Ekranı temizle ve her şeyi çiz. Bu aşamalar birbirine karışmadıysa bunlar programın okunmasını ve anlaşılmasını daha kolay bir hale getirir. Birazcık hesaplama, biraz çizim, biraz daha hesaplama, biraz daha çizim yapmayın. Ayrıca, bunun ilk bölümde yaptığımız hesap makinesine nasıl benzediğine bir bakın. Kullanıcıdan giriş alınıyor, hesaplamalar yapılıyor ve çıktı cevap oluyor. Aynı kalıp buraya uygulandı. Resmi ekrana çizdiren kod while döngüsünün içerisinde yer alır. Saatin işareti 10 olarak ayarlandığında, penceredeki içerik saniyede 10 kez çizilecektir. Bu çok hızlı gerçekleşirse bilgisayar ağır işlemeye vaşlar çünkü zamanın tümü ekranın yenilenmesinde kullanılır. Eğer çizim döngünün dışında yapılırsa, pencere düzgün şekilde yeniden çizim yapamayacaktır. Eğer döngünün dışında yapılırsa, ekran başlangıçta grafikleri gösterebilir fakat ekran simge durumuna getirilirse veya önde başka bir pencere yer alırsa tekrardan gözükmeye başlamayacaktır. 5.6 Programı sonlandırmak Şu an, Pygame programında IDLE ortamında çalışırken "Kapat" butonuna tıklamak hala programın çökmesine sebep olacaktır. Kapat tuşuna basıldığında çöken bir programı kapatmak çok şey istediği için bu zor bir durumdur. Sorun, döngüden çıkılmış olsa bile, program bilgisayara pencereyi kapatmasını henüz söylememiştir. Alttaki komutu çalıştırarak programa açık tüm pencerelerini kapaması ve dilendiği şekilde çıkılması söylenmiş olur. pygame.quit () 5.7 Ekranı temizlemek Alttaki kod ekranda olabilecek her şeyi beyaz bir arkaplanla temizliyor. white değişkeninin daha önce 3 RGB değerinin listesi olarak tanımlandığını hatırlayın. # Ekranı temizle ve ekran arkaplanını ayarla screen.fill(white) Bu çizim komutu tartışılmadan önce yapılmalıdır. Ekranı program grafikleri çizdikten sonra temizlemek kullanıcının sadece boş bir pencere görmesiyle sonuçlanacaktır. Bir pencere ilk oluşturulduğunda siyah bir arkaplana sahiptir. Ekranı başlangıçta temizlemek yine de önemlidir çünkü ekranı temiz başlamaktan alıkoyacak şeyler meydana gelebilir. Bir program boş bir çerçeveyi çizime hazır tuttuğunu varsaymamalıdır. 5.8 Ekranı çevirmek Çok önemli! Ekranı çizimin ardından çevirmelisiniz. (Ç.N çevirmek = flip) Bilgisayar grafikleri çizdiğinizde ekranda titremeye yol açacağı için onları göstermeyecektir. Bu program çizimi bitirene kadar ekranda göstermeyi bekletir. Alttaki komut grafiği ekrana "çevirir". Bu komutun içeri aktarılmasındaki başarısızlık, programın sadece boş bir ekran göstermesi anlamına gelir. Bu flipten sonra gelen hiçbir çizim kodu gösterilmeyecektir. # Devam et ve ekranı çizdiğimiz şekilde güncelle. pygame.display.flip() 5.9 Boş bir ekran açmak Bu kod bir Pygame programı için temel şablon olarak kullanılabilir. Boş bir ekran açar ve kullanıcı kapat butonuna basana kadar bekler. """ Pygame base template for opening a window Sample Python/Pygame Programs Simpson College Computer Science http://programarcadegames.com/ http://simpson.edu/computer-science/ Explanation video: http://youtu.be/vRB_983kUMc """ import pygame # Define some colors BLACK = (0, 0, 0) WHITE = (255, 255, 255) GREEN = (0, 255, 0) RED = (255, 0, 0) pygame.init() # Set the width and height of the screen [width, height] size = (700, 500) screen = pygame.display.set_mode(size) pygame.display.set_caption("My Game") # Loop until the user clicks the close button. done = False # Used to manage how fast the screen updates clock = pygame.time.Clock() # -------- Main Program Loop ----------- while not done: # --- Main event loop for event in pygame.event.get(): if event.type == pygame.QUIT: done = True # --- Game logic should go here # --- Screen-clearing code goes here # Here, we clear the screen to white. Don't put other drawing commands # above this, or they will be erased with this command. # If you want a background image, replace this clear with blit'ing the # background image. screen.fill(WHITE) # --- Drawing code should go here # --- Go ahead and update the screen with what we've drawn. pygame.display.flip() # --- Limit to 60 frames per second clock.tick(60) # Close the window and quit. pygame.quit() 5.10 Çizgi çizdirmek http://www.pygame.org/docs/ref/draw.html Dikdördgenler, çokgenler, daireler, elipsler, kavisler ve doğrular. Ayrıca bitmap grafikleri ve yazıları da anlatacağız. Alttaki kod ekrana bir doğrunun nasıl çizdirildiğini gösteriyor. Ekrana (0,0)'dan (100,100)'e kadar 5 piksel genişliğinde yeşil bir çizgi çizdiriyor. green'in daha önce üç RGB değerinin listesi olarak tanımladığımız bir değişken olduğunu unutmayın. # (0,0)'dan (100,100)'e 5 piksel genişliğinde # yeşil bir doğru çiz. pygame.draw.line(screen,green,[0,0],[100,100],5) Önceki örnekte yer alan temel şablonu kullanın ve doğru çizdirecek kodlar ekleyin. Kodu tam olarak nereye koyacağınızı öğrenmek için yorumları okuyun. Farklı kalınlıklarda, renkerde ve yerlerde doğrular çizmeyi deneyin. Birkaç doğru çizin. 5.11 Döngüler ve ötelemelerle doğrular çizmek Programlar bir şeyleri tekrar tekrar yapabilir. Alttaki kod bir doğruyu döngü kullanarak tekrar ve tekrar çiziyor. Programlar bu tekniği çok sayıda doğru çizerken ve hatta bütün bir arabayı çizerken kullanabilir. Doğru çizme komutunu döngünün içine koymak birden çok doğrunun ekrana bastırılmasına sebep olacaktır. Fakat burada yakalanması gereken bir şey var. Eğer her doğru aynı başlangıç ve biriş koordinatlarına sahipse her doğru diğer doğrunun üzerine çizilecektir. Bu da sanki tek bir doğru çizilmiş gibi görünecektir. Bunu ayarlamak için, döngü her döndüğünde koordinatları uyarlamak gereklidir. Yani, döngünün ilk seferinde y_offset değişkeninin değeri sıfırdır. Kodun içerisinde alttaki kod (0,10)'dan (100,110)'e kadar çizilir. Sonraki seferde y_offset değeri 10 artırılmıştır. Bu bir sonraki doğrunun (0,20) ve (100,120) koordinatlarına sahip olmasını sağlar. Bu her seferinde doğruların 10'ar piksel kaymasını sağlayan döngüyle devam eder. # Ekrana (0,10)'dan (100,110)'a birkaç yeşil doğru çiz # Döngü kullan ve genişlik 5 piksel olsun for y_offset in range(0,100,10): pygame.draw.line(screen,red,[0,10+y_offset],[100,110+y_offset],5) Bu kodu farklı konum değişiklikleri ile çalıştırın ve deneyin. x_offset değişkeni tanımlayıp ona farklı değerler vererek deneyin. Onun tam olarak nasıl çalıştığını anlayana kadar farklı değerlerle deneyin. 5.12 Dikdördgen çizme When drawing a rectangle, the computer needs coordinates for the upper left rectangle corner (the origin), and a height and width. Bir dikdördgen çizerken, bilgisayar dikdördgenin üst kısmı için (merkez) koordinatlara, yükseklik ve genişliğe ihtiyaç duyar. Şekil 5.7 (20,20) merkezli 250 piksel genişlikte, 100 piksel yükseklikte bir dikdördgeni (ve bir elipsi, daha sonra açıklanacaktır) gösteriyor. Bilgisayar bir dikdördgeni belirtirken bu dört sayının listesine (x,y,genişlik,yükseklik) sırasıyla ihtiyaç duyar. Alttaki kod örneği bu dikdördgeni çizdiriyor. Listedeki ilk iki sayı sol üst köşeyi (20,20) olarak belirliyor. Sonraki iki sayıdan ilki genişliği 250 piksel yapıyor ve diğeri yüksekliği 100 piksel yapıyor. Sonda yer alan 2, çizgi genişliğini 2 piksel olarak belirliyor. Bu sayı ne kadar büyükse, dikdördgenin etrafındaki çizgi o kadar kalın olur. Bu sayı sıfırsa, dikdördgenin etrafında kenarlık olmaz. Onun yerine, dikdördgen belirtilen renkle boyanır. # Dikdördgen çizdir pygame.draw.rect(screen,black,[20,20,250,100],2) 5.13 Elips çizimi Elipsler tıpkı dikdördgenler gibi çizdirilir. Dikdördgenin kenarları belirtilir ve bilgisayar elipsi bu sınırların içerisine çizer. Elipslerle çalışırken yapılan en yaygın hata başlangıç merkezi olarak belirtilen noktanın elipsin merkezi olacağını sanmaktır. Gerçekte, başlangıç noktasına hiçbir şey çizilmez. Bu nokta, elipsi içine alan dikdördgenin sol üst noktasıdır. Şekil 5.7'e tekrar bakacak olursak, elipsin 250 piksel genişliğinde ve 100 piksel uzunluğunda bir elips görürüz. Elipsi içeren 250x100 dikdördgenin sol üst köşesi (20,20)'de yer alır. Aslında (20,20)'ye hiçbir şeyin çizilmediğine dikkat edin. Her ikisi de üstte çizili olduğu için bunları kullanarak elipsin nasıl belirtildiğini anlamak daha kolaydır. # Bir dikdördgeni dış sınırlar kabul ederek bir elips çiz pygame.draw.ellipse(screen,black,[20,20,250,100],2) 5.14 Yay çizmek Peki ya program elipsin sadece bir kısmını çizmeye ihtiyaç duyarsa? Bu arc komutuyla yapılabilir. Bu komut ellipse komutuna benzerdir fakat yayın başlangıç ve bitiş açılarını da içerir. Açılar radyan cinsindendir. Alttaki kod örneği bir çemberin dört farklı çeyreğini gösteren dört yay çiziyor. Her çeyrek yay bölümlerinin daha kolay anlaşıldığından emin olmak için farklı bir renkle çiziliyor. Kodun sonucu Şekil 5.8'de görülüyor. # Elipsin bir parçası olan yay çiz. Hangi açının çizileceğini # belirlemek için radyan cinsinden açılar kullan. pygame.draw.arc(screen,green,[100,100,250,200], pi/2, pi, 2) pygame.draw.arc(screen,black,[100,100,250,200], 0, pi/2, 2) pygame.draw.arc(screen,red, [100,100,250,200],3*pi/2, 2*pi, 2) pygame.draw.arc(screen,blue, [100,100,250,200], pi, 3*pi/2, 2) 5.15 Çokgen çizilmesi Kodun sonraki satırı bir çokgen çiziyor. Üçgen şekli (100,100) (0,200) ve (200,200)'de yer alan üç nokta ile tanımlanıyor. İstenildiği kadar çok noktanın listeye eklenmesi mümkündür. Noktaların nasıl listelendiğine dikkat edin. Her nokta iki sayıdan oluşan bir listedir ve noktalar kendileri de tüm noktaları tutan başka bir listenin içindedir. Kodun yaptığı çizim Şekil 5.9'de görülebilir. # Bu komut polygon komutunu kullanarak bir üçgen çizer pygame.draw.polygon(screen,black,[[100,100],[0,200],[200,200]],5) 5.16 Yazılar Yazılar birazcık daha karışıktır. Yapmanız gereken üç şey vardır. İlk olarak, program kullanılacak fontla ilgili yazı türü ve büyüklük gibi bilgileri tutan bir değişken oluşturur. İkinci olarak, program metnin resmini oluşturur. Bunu düşünmenin tek yolu programın gereken karakterlerle mürekkebe bandırılmış ve kağıda basmaya hazır bir "damga" oluşturmasıdır. İşimizin bitmesi için yapılacak üçüncü şey ise bu resmin nereye damgalanacağını (ya da "blit"leneceği) programa söyletmektir. İşte bir örnek: # Select the font to use. Default font, 25 pt size. # Kullanılacak yazı tipini seç. Varsayılan yazı tipi, 25 pt boyutunda. font = pygame.font.Font(None, 25) # Yazıyı resme çevir(Ç.N render işlemi). "True"nun anlamı yumuşatılmış yazıdır. # Black renktir. black değişkeni yukarıda # [0,0,0] listesi olarak tanımlanmıştı. # Not: Bu satır harflerin bir resmini oluşturuyor, # fakat onları henüz ekrana koymuyor. text = font.render("My text",True,black) # Yazının resmini ekrana 250x250 konumundan koy screen.blit(text, [250,250]) Skoru ekran mı koymak istiyorsunuz? Bu az daha karışıktır. Bu kod çalışmaz: text = font.render("Score: ",score,True,black) Fazladan ekrana yazılacak öğeler eklemek ve bunları virgülle ayırmak sadece print ifadesinde işe yarar. Skor "Score" stringine eklenmelidir. Fakat bu da çalışmaz: text = font.render("Score: "+score,True,black) Skor bir tamsayıysa(integer), bilgisayar bunu bir stringe nasıl ekleyeceğini bilmez. Siz, programcı, skoru bir stringe çevirmek zorundasınız. Ardından, stringleri birbirine ekleyebilirsiniz. Şunun gibi: text = font.render("Score: "+str(score),True,black) Şimdi skorun nasıl yazdırılacağını biliyorsunuz. Bir zamanlayıcıyı ekranda göstermek istiyorsanız, bu daha sonraki bir bölümde tartışılan print formatlamayı gerektirir. timer.py örneği için örnek kodu inceleyin. 5.17 Tamamını Listeleme Bu, bu bölümde tartışılan programın tamamının listelenmesidir. Bu program, diğer programlarla birlikte, http://cs.simpson.edu/cmsc150/index.php?chapter=example_code adresinden indirilebilir. """ Simple graphics demo Sample Python/Pygame Programs Simpson College Computer Science http://programarcadegames.com/ http://simpson.edu/computer-science/ """ # Import a library of functions called 'pygame' import pygame # Initialize the game engine pygame.init() # Define some colors BLACK = (0, 0, 0) WHITE = (255, 255, 255) BLUE = (0, 0, 255) GREEN = (0, 255, 0) RED = (255, 0, 0) PI = 3.141592653 # Set the height and width of the screen size = (400, 500) screen = pygame.display.set_mode(size) pygame.display.set_caption("Professor Craven's Cool Game") # Loop until the user clicks the close button. done = False clock = pygame.time.Clock() # Loop as long as done == False while not done: for event in pygame.event.get(): # User did something if event.type == pygame.QUIT: # If user clicked close done = True # Flag that we are done so we exit this loop # All drawing code happens after the for loop and but # inside the main while not done loop. # Clear the screen and set the screen background screen.fill(WHITE) # Draw on the screen a line from (0,0) to (100,100) # 5 pixels wide. pygame.draw.line(screen, GREEN, [0, 0], [100, 100], 5) # Draw on the screen several lines from (0,10) to (100,110) # 5 pixels wide using a loop for y_offset in range(0, 100, 10): pygame.draw.line(screen, RED, [0, 10 + y_offset], [100, 110 + y_offset], 5) # Draw a rectangle pygame.draw.rect(screen, BLACK, [20, 20, 250, 100], 2) # Draw an ellipse, using a rectangle as the outside boundaries pygame.draw.ellipse(screen, BLACK, [20, 20, 250, 100], 2) # Draw an arc as part of an ellipse. # Use radians to determine what angle to draw. pygame.draw.arc(screen, BLACK, [20, 220, 250, 200], 0, PI / 2, 2) pygame.draw.arc(screen, GREEN, [20, 220, 250, 200], PI / 2, PI, 2) pygame.draw.arc(screen, BLUE, [20, 220, 250, 200], PI, 3 * PI / 2, 2) pygame.draw.arc(screen, RED, [20, 220, 250, 200], 3 * PI / 2, 2 * PI, 2) # This draws a triangle using the polygon command pygame.draw.polygon(screen, BLACK, [[100, 100], [0, 200], [200, 200]], 5) # Select the font to use, size, bold, italics font = pygame.font.SysFont('Calibri', 25, True, False) # Render the text. "True" means anti-aliased text. # Black is the color. This creates an image of the # letters, but does not put it on the screen text = font.render("My text", True, BLACK) # Put the image of the text on the screen at 250x250 screen.blit(text, [250, 250]) # Go ahead and update the screen with what we've drawn. # This MUST happen after all the other drawing commands. pygame.display.flip() # This limits the while loop to a max of 60 times per second. # Leave this out and we will use all CPU we can. clock.tick(60) # Be IDLE friendly pygame.quit() 5.18 Tekrar Soruları Çoktan seçmeli bir quiz için buraya tıklayın. Alttaki sorulara cevap verdikten sonra, sizin kendi tasarımınızın resmini oluşturan bir program yazın. Detaylar için Bir-Resim-Oluştur labına bakın. - Bilgisayar pygame.display.set_mode() gibi bütün fonksiyonları kullanmadan önce yapılması gereken iki şey nedir? - pygame.display.set_mode() fonksiyonu ne yapar? - pygame.time.Clock ne için kullanılır? - for event in pygame.event.get() döngünü ne yapmak içindir? - Kodun bu satırı için: pygame.draw.line(screen,green,[0,0],[100,100],5) - screen ne yapar? - [0,0] ne yapar? [100,100] ne işe yarar? - 5 ne için kullanılmıştır? - Bilgisayar koordinat sisteminin Kartezyen koordinat sisteminden olan farklarını açıklayın. - white = ( 255, 255, 255)'ın nasıl bir renk belirttiğini açıklayın. - Bir dikdördgen çizerken, doğru kalınlığı sıfır olarak belirtilmişse ne olur? - Alttaki kodta çizilen elipsi çizin, daha sonra orijin koordinatını, uzunluk ve genişliğini etiketlendirin: pygame.draw.ellipse(screen,black,[20,20,250,100],2) - Genel olarak, grafikleri kullanarak yazıları ekrana bastırmak için kullanılan üç aşamanın neler olduğunu tanımlayın. - Alttaki kodun çizdiği çokgenin koordinatları nelerdir? - pygame.display.flip() ne yapar? - pygame.quit() ne işe yarar? You are not logged in. Log in here and track your progress. English version by Paul Vincent Craven Spanish version by Antonio Rodríguez Verdugo Russian version by Vladimir Slav Turkish version by Güray Yildirim Portuguese version by Armando Marques Sobrinho and Tati Carvalho Dutch version by Frank Waegeman Hungarian version by Nagy Attila Finnish version by Jouko Järvenpää French version by Franco Rossi Korean version by Kim Zeung-Il Chinese version by Kai Lin