Step 003 - Surfaces and Drawing
This program is blitting two different pygame surfaces into the pygame window (called screen):
- The (white) background surface and
- the (blue-black) ball surface
Unlike the usual Cartesian_coordinate_system, Pygame use an x,y coordinates system where the position (0,0) is defined as the top left corner of the screen. Moving down means having a higher y value, moving to the right means having a higher x value.
|Cartesian coordinate system. The point (0,0) is in the middle||Pygame coordinate system. The point (0,0) is in the top left corner|
Please note that despite the name the ball surface is a rectangular surface. Onto this surface the program draws a blue circle. Because the ball surface was not filled like the background surface, it remains black (Red Green Blue value: (0,0,0)). Also note that in this program nothing is blitted inside the mainloop, all painting and blitting occurs before the mainloop. The ball is visible on the screen because the background was blitted first and then the background the ball surface was blitted (quasi-on-top). Reverse the order of blitting and you should see only the white background. Blitting the background on the screen is a good method to clean all graphic artefacts from a screen.
Pygame knows a lot of drawing functions. In this code example, the
pygame.draw.circle function is used. All of Pygame's drawing function need a pygame surface to draw on. Think of those surfaces like papers or beer mats. The top left corner of the Pygame surface has the coordinate (0,0).
Let's take a look at the
pygame.draw_circle documentation and the code lines in the source code example:
# create a rectangular surface for the ball ballsurface = pygame.Surface((50,50)) # draw blue filled circle on ball surface pygame.draw.circle(ballsurface, (0,0,255), (25,25),25)
In the first code line, a pygame surface is created with the dimensions 50 pixel width (x-axis) and 50 pixel height (y-axis). This little pygame surface is named ball. The second code line draws a circle on the surface ball with the colours 0 (no portion of red), 0 (no portion of green), 255 (full portion of blue) at the position (25,25) counted from the top left corner of the ball surface. (25,25) is exactly the middle of (50,50). This circle has a radius of 25 pixels, and because there is no line width argument, pygame falls back to the default width of 0 which results in a blue filled circle.
Some Drawing Functions
In the official pygame documentation, the chapter draw lists 9 drawing functions. 4 of them are used in this code example to draw green figures on the background surface. Try to change the values and see what happens:
#------- try out some pygame draw functions -------- # pygame.draw.rect(Surface, color, Rect, width=0): return Rect pygame.draw.rect(background, (0,255,0), (50,50,100,25)) # rect: (x1, y1, width, height) # pygame.draw.circle(Surface, color, pos, radius, width=0): return Rect pygame.draw.circle(background, (0,200,0), (200,50), 35) # pygame.draw.polygon(Surface, color, pointlist, width=0): return Rect pygame.draw.polygon(background, (0,180,0), ((250,100),(300,0),(350,50))) # pygame.draw.arc(Surface, color, Rect, start_angle, stop_angle, width=1): return Rect pygame.draw.arc(background, (0,150,0),(400,10,150,100), 0, 3.14) # radiant instead of grad
- Paint a giant pink circle on the middle of the screen
- Find out wich line you must out-comment (using #) to remove the blue ball and the black square
- Can you make an arc from the topright to the lower-left corner1)?
- Use python's range function to draw a pretty pattern across the screen. Start with this code and expand to all 4 corners:
for point in range(0,641,64): # range(start, stop, step) pygame.draw.line(background, (255,0,255), (0,0), (480, point), 1)
- Can you use the point variable also inside the color tuple to make each line with a different color?
Source Code on Github
|003_static_blit.py||pygame|| Download the whole Archive with all files from Github: |
This version draws some lines and blits a surface. no fancy stuff.
View/Edit/Download the file directly in Github: https://github.com/horstjens/ThePythonGameBook/blob/master/pygame/003_static_blit.py
- using 2 different class objects, one for the game, one for the ball. See →sprites
- better text display, see →text