Introduction to Game Programming Lesson 5 Lecture Notes, Part 1: The draw Module

Transcription

1 Introduction to Game Programming Lesson 5 Lecture Notes, Part 1: The draw Module Learning Objectives: Following this lecture, the student should be able to: Draw a line with pygame, using all parameters and variations correctly. Draw a rectangle with pygame, using all parameters and variations correctly. Draw a circle with pygame, using all parameters and variations correctly. Draw an ellipse with pygame, using all parameters and variations correctly. Draw an arc with pygame, using all parameters and variations correctly. Define radians and be able to draw the angles on a circle defined by 0,pi, pi/2,pi/4,5pi/4,3pi/2, and 7pi/4. Draw a series of lines with pygame, using all parameters and variations correctly. Draw a polygon with pygame, using all parameters and variations correctly. Draw an anti-aliased line with pygame, using all parameters and variations correctly. List two disadvantages of anti-aliased lined. List an advantage of anti-aliased lines. Motivation Once again we're going to work with Pygame. This chapter covers two very important subjects: drawing and event-handling. We'll see how to draw shapes on the screen and also how to get and respond to input from the user that comes from both the keyboard and the mouse. Bring up and run drawdemo.py. Drawing This program draws a bunch of junk on the screen. What i the junk? We have a line, a rectangle, a circle, an arc, an ellipse, some lines that form an H and i (sor tof), a polygon, and then normal and antialiased diagonal lines. Look at the code So let's look at the code. In addition to importing pygame, we import math. We're going to need the constant math.pi when we draw the arc. Let's look at this line: def drawstuff(background): Cold call What is happening in that line? Defining a function Cold call And what is background? A parameter; probably a Surface Right, so here he defines a function. He's encapsulating all of his drawing in one place. He's passing in a parameter called background. Copyright 2010 Margaret Burke. All rights reserved. 1

2 And if we look at the code inside, we can see he's passing that as a parameter to a lot of pygame.draw methods. If we go to the pygame docs, then maybe we can figure out what kind of variable background is. Go to pygame documentation, look at draw.line or draw.rect. Cold call Can you tell me what type Surface background is, based on its order in the parameter list and this documentation? Cold call What else is there, what else is being Depends on the method. passed in? Cold call What does this mean, this parameter with the equals sign and a value? It's a default, the parameter is optional. Now presumably this function is called from somewhere, because we know that the drawing does take place. Let s focus on how the function works, then we ll go down and look at the code that calls it. This function basically shows us almost every single method in pygame.draw. We will go over them one at a time. (Go over each bit of code by looking at the code, then looking at docs, then experimenting with code. #draw a line from (5, 100) to (100, 100) pygame.draw.line(background, (255, 0, 0), (5, 100), (100, 100)) From docs (or note, you can type in >>>import pygame >>>help(pygame.draw.line)): pygame.draw.line draw a straight line segment pygame.draw.line(surface, color, start_pos, end_pos, width=1): return Rect Draw a straight line segment on a Surface. There are no endcaps, the ends are squared off for thick lines. Experiment: Cold call How would we draw a blue line from the upper left corner of the screen to the bottom right? Reading docs, using the function Copyright 2010 Margaret Burke. All rights reserved. 2

3 #draw an unfilled square pygame.draw.rect(background, (0, 255, 0), ((200, 5), (100, 100)), 3) pygame.draw.rect draw a rectangle shape pygame.draw.rect(surface, color, Rect, width=0): return Rect Draws a rectangular shape on the Surface. The given Rect is the area of the rectangle. The width argument is the thickness to draw the outer edge. If width is zero then the rectangle will be filled. Keep in mind the Surface.fill - fill Surface with a solid color method works just as well for drawing filled rectangles. In fact the Surface.fill - fill Surface with a solid color can be hardware accelerated on some platforms with both software and hardware display modes. Experiment: Cold call How would we draw a red filled rectangle that fills the upper quarter of the screen? Reading docs, using the function #draw a filled circle pygame.draw.circle(background, (0, 0, 255), (400, 50), 45) pygame.draw.circle draw a circle around a point pygame.draw.circle(surface, color, pos, radius, width=0): return Rect Draws a circular shape on the Surface. The pos argument is the center of the circle, and radius is the size. The width argument is the thickness to draw the outer edge. If width is zero then the circle will be filled. Experiment: Cold call Can we draw a circle within the rectangle? Maybe a green circle with a thin border? Reading docs, using the function Okay, we re going to do the ellipse before the arc: #draw an ellipse pygame.draw.ellipse(background, (0xCC, 0xCC, 0x00), ((150, 150), (150, 100)), 0) pygame.draw.ellipse draw a round shape inside a rectangle pygame.draw.ellipse(surface, color, Rect, width=0): return Rect Copyright 2010 Margaret Burke. All rights reserved. 3

4 Draws an elliptical shape on the Surface. The given rectangle is the area that the circle will fill. The width argument is the thickness to draw the outer edge. If width is zero then the ellipse will be filled. So you can see how this is different from the circle, you specify a bounding rectangle. Experiment: Cold call Now can we draw an ellipse within the lower right rectangular quadrant, so diagonal to our other circle? Reading docs, using the function Now the arc. #draw an arc pygame.draw.arc(background, (0, 0, 0), ((5, 150), (100, 100)), 0, math.pi/2, 5) pygame.draw.arc draw a partial section of an ellipse pygame.draw.arc(surface, color, Rect, start_angle, stop_angle, width=1): return Rect Draws an elliptical arc on the Surface. The rect argument is the area that the ellipse will fill. The two angle arguments are the initial and final angle in radians, with the zero on the right. The width argument is the thickness to draw the outer edge. So this is similar to the ellipses in that you specify the rectangle, they both start Surface, color, Rect. But then there s start_angle and stop_angle, and this refers to radians. Radians are a measurement of angle that actually makes sense because it relates to the radius of the circle. There are 2π radians around any given circle (you might recognize that as the circumference formula). So a given angle is how far around the circumference you go for that angle. Copyright 2010 Margaret Burke. All rights reserved. 4

5 Experiment: Cold call Let s draw an ellipse along the edge of our circle, (from π/2 to π) show Reading docs, using the function them, don t tell them the radians. Cold call From π to 2 π Cold call From π/4 to 3 π/4 #draw lines, points = ( (370, 160), (370, 237), (372, 193), Copyright 2010 Margaret Burke. All rights reserved. 5

6 (411, 194), (412, 237), (412, 160), (412, 237), (432, 227), (436, 196), (433, 230) ) pygame.draw.lines(background, (0xFF, 0x00, 0x00), False, points, 3) pygame.draw.lines draw multiple contiguous line segments pygame.draw.lines(surface, color, closed, pointlist, width=1): return Rect Draw a sequence of lines on a Surface. The pointlist argument is a series of points that are connected by a line. If the closed argument is true an additional line segment is drawn between the first and last points. This does not draw any endcaps or miter joints. Lines with sharp corners and wide line widths can have improper looking corners. You have a list of lists, each list is a point on the screen. So this is the way you specify a list of points. The draw.lines will draw from one point to the next, in order, starting with the first. I m going to let you experiment with this one on your own. #draw polygon points = ( (137, 372), (232, 319), (383, 335), (442, 389), (347, 432), (259, 379), (220, 439), (132, 392) ) pygame.draw.polygon(background, (0x33, 0xFF, 0x33), points) pygame.draw.polygon draw a shape with any number of sides pygame.draw.polygon(surface, color, pointlist, width=0): return Rect Draws a polygonal shape on the Surface. The pointlist argument is the vertices of the polygon. The width argument is the thickness to draw the outer edge. If width is zero then the polygon will be filled. For aapolygon, use aalines with the 'closed' parameter. I am also going to let you play with the polygon yourself. Copyright 2010 Margaret Burke. All rights reserved. 6

7 Now let s compare a line and an anti-aliased line. #compare normal and anti-aliased diagonal lines pygame.draw.line(background, (0, 0, 0), (480, 425), (550, 325), 1) pygame.draw.aaline(background, (0, 0, 0), (500, 425), (570, 325), 1) pygame.draw.line draw a straight line segment pygame.draw.line(surface, color, start_pos, end_pos, width=1): return Rect Draw a straight line segment on a Surface. There are no endcaps, the ends are squared off for thick lines. pygame.draw.aaline draw fine antialiased lines pygame.draw.aaline(surface, color, startpos, endpos, blend=1): return Rect Draws an anti-aliased line on a surface. This will respect the clipping rectangle. A bounding box of the affected area is returned returned as a rectangle. If blend is true, the shades will be be blended with existing pixel shades instead of overwriting them. This function accepts floating point values for the end points. Okay, and that s another one I m going to let you work on in the lab. Before you move to the lab, we re just going to go over the main program, because this is a little different from what we ve seen before: def main(): screen = pygame.display.set_mode((640, 480)) pygame.display.set_caption("drawing commands") background = pygame.surface(screen.get_size()) background = background.convert() background.fill((255, 255, 255)) drawstuff(background) clock = pygame.time.clock() keepgoing = True while keepgoing: clock.tick(30) for event in pygame.event.get(): if event.type == pygame.quit: keepgoing = False elif event.type == pygame.mousebuttonup: print pygame.mouse.get_pos() screen.blit(background, (0, 0)) pygame.display.flip() if name == " main ": main() pygame.quit() Copyright 2010 Margaret Burke. All rights reserved. 7

8 Okay, so now the main program is also a function. ALL of the code is now organized into functions, and this line at the bottom tells the Python interpreter that this isn t just a library of functions, but this is a program and execution should being at the function called main. So from now on you will organize your programs in this way. I want you to organize your programs like this from now on. The primary reason is so we can see where data is modified, because we will pass variables into and out of functions. And you should recognize this as setting up the display (initialize is at the very top), creating your entities, and then drawing onto the background by calling the drawstuff function. Then Time ad the event loop. It also has this helpful event loop code to check for a mouse click which will print the coordinates to the console. That can help you draw, because it helps get you figure out where various coordinates are in the window. They should work on the first lab. Copyright 2010 Margaret Burke. All rights reserved. 8

9 Introduction to Game Programming Lesson 5 Lecture Notes, Part 2: Fonts and Events Learning Objectives: Following this lecture, the student should be able to: Draw text with pygame using a Font object. Compare and contrast system vs. custom fonts and give the advantages and disadvantages to using each in a game. Import and save an image using pygame. Handle mouse events including MOUSEBUTTONDOWN, MOUSEBUTTONUP, and MOUSEMOTION. Get the location of the mouse. Handle keyboard events. Get the name of the key that has been pressed. Write event handlers to handle basic events. Motivation Before we get to events, we're going to look at some other pygame functionality that you'll need. First importing and saving images, and then drawing text using the Font object, which you'll need to display information to your user such as her score and any other message you want to include that's text. Bring up and run face.py. Free graphics editing software The GIMP is an open-source package you can download that has a lot of the functionality that Photoshop has. It is not as easy to use, but it's free. There's a link to it on the Downloads page of the class website. Importing images Okay, this is so simple. This is how you import an image that you have created in a graphics program such as Photoshop or The GIMP, or using a royalty-free image that has been generously provided by an artist for you to use. Open face.py Look at the following code: face = pygame.image.load("k-9_andy.jpg") face = face.convert() Looking at the docs, we can see that image.load returns a Surface: pygame.image.load load new image from a file pygame.image.load(filename): return Surface pygame.image.load(fileobj, namehint=""): return Surface Copyright 2010 Margaret Burke. All rights reserved. 9

10 Load an image from a file source. You can pass either a filename or a Python file-like object. Pygame will automatically determine the image type (e.g., GIF or bitmap) and create a new Surface object from the data. In some cases it will need to know the file extension (e.g., GIF images should end in ".gif"). If you pass a raw file-like object, you may also want to pass the original filename as the namehint argument. The returned Surface will contain the same color format, colorkey and alpha transparency as the file it came from. You will often want to call Surface.convert - change the pixel format of an image with no arguments, to create a copy that will draw more quickly on the screen. For alpha transparency, like in.png images use the convert_alpha() method after loading so that the image has per pixel transparency. Pygame may not always be built to support all image formats. At minimum it will support uncompressed BMP. If pygame.image.get_extended - test if extended image formats can be loaded returns 'True', you should be able to load most images( including png, jpg and gif ). And it is recommended to call Surface.convert to create a copy that will draw more quickly. Now note this about formats, from the docs: The image module is a required dependency of Pygame, but it only optionally supports any extended file formats. By default it can only load uncompressed BMP images. When built with full image support, the pygame.image.load - load new image from a file function can support the following formats. JPG PNG GIF (non animated) BMP PCX TGA (uncompressed) TIF LBM (and PBM) PBM (and PGM, PPM) XPM So this is loaded in "Entities," and the image file is in the same directory as the program. Saving images Now you can also save images, and this is described in the book. It's not the same as saving a game, it's just saving an image. So you can read about that in the book. The example is called savecircles.py. Copyright 2010 Margaret Burke. All rights reserved. 10

11 Creating a text Surface One thing you absolutely need to know how to do is create a text Surface so you can put information up in text form for your users. To do this, you will write to a Surface using a Font object. You can then blit your Surface to the background. So first, creating a font. We'll look at the following two examples: load showtext.py and customfont.py First, in showtext, go over this code with enhancement: fontlist = pygame.font.get_fonts() print fontlist if "comicsansms" in fontlist: myfont = pygame.font.sysfont("comic Sans MS", 30) else: myfont=pygame.font.sysfont("none",30) label = myfont.render("text is Fun!!!", True, (255, 255, 0)) A font is a typeface and size None- pygame default font render returns a Surface Boolean - antialiasing Optional background color after text color allows for quicker drawing if the background is solid In customfont: myfont = pygame.font.font("gringonights.ttf", 40) label = myfont.render("python in the Wild West", True, (255, 255, 0)) This is a true type file that you have in the directory with your program. This will ensure the font looks correct and renders the correct size for your game. Events Review what events are When an event happens, objects are created that store the status of the input devices, such as the coordinates of the mouse The gaming loop is basically an event loop Look at basicevents.py and also basiceventsenhanced.py Go over this code Note that the author gets even information from the device, this could be slightly different from the info at the time of the event (i.e. the mouse might have moved since the event was generated) Copyright 2010 Margaret Burke. All rights reserved. 11

12 So if you use event.dict (dictionary for an event), you will get information at the time of the event. Just ask the dictionary for what you want, for example for a MOUSEBUTTONUP, you get pos, button, you use event.dict['pos'] to get the position. Use event.dict to get modified keys (event.dict['mod']) and then you can bit shift, for example control is >>6 %2 and compare to 1 (so you're using the power of 2 there that corresponds to the key, shifting over to make it last, and then determining if it's even or odd) Or you can use the modifiers. See Info below Events: QUIT none ACTIVEEVENT gain, state KEYDOWN unicode, key, mod KEYUP key, mod MOUSEMOTION pos, rel, buttons MOUSEBUTTONUP pos, button MOUSEBUTTONDOWN pos, button JOYAXISMOTION joy, axis, value JOYBALLMOTION joy, ball, rel JOYHATMOTION joy, hat, value JOYBUTTONUP joy, button JOYBUTTONDOWN joy, button VIDEORESIZE size, w, h VIDEOEXPOSE none USEREVENT code KMOD constants: mod is the bitfield of KMOD_* constants: pygame.kmod_none 0 pygame.kmod_lshift 1 pygame.kmod_rshift 2 pygame.kmod_shift 3 pygame.kmod_lctrl 64 pygame.kmod_rctrl 128 pygame.kmod_ctrl 192 pygame.kmod_lalt 256 pygame.kmod_ralt 512 pygame.kmod_alt 768 pygame.kmod_lmeta 1024 pygame.kmod_rmeta 2048 pygame.kmod_meta 3072 pygame.kmod_num 4096 pygame.kmod_caps 8192 pygame.kmod_mode So if you bitwise and (&) with the constant and the modifiers, it will come out as the modifier if it's been pressed (demonstrate bitwise and). #checking to see if the left control modifier is pressed: ctrlpressed=event.dict['mod']>>6 if ctrlpressed%2==1: print "The left control is pressed." altpressed=event.dict['mod']>>8 Copyright 2010 Margaret Burke. All rights reserved. 12

13 if altpressed%2==1: print "The left alt is pressed." #using a different method to check the right control modifier: rightctrlpressed=pygame.kmod_rctrl&event.dict['mod'] if (rightctrlpressed==pygame.kmod_rctrl): print "The right control is pressed." We can look at the paint.py program now, and see how event handling is incorporated into a larger program. Note that a function can be written to handle any given event to make the code easier to read. Bring up paint.py Copyright 2010 Margaret Burke. All rights reserved. 13