ThePythonGameBook

learn Python. Create Games

User Tools

Site Tools


en:pygame:step003

Step 003 - Surfaces and Drawing

screenshot screenshot
Screenshot of 003_static_blit.py Screenshot of the improved variant 003_static_blit_pretty.py

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. Source: Wikipedia vs. Pygame coordinate System
Cartesian coordinate system. The point (0,0) is in the middle Pygame coordinate system. The point (0,0) is in the top left corner



Code Discussion

Surfaces

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.

Drawing

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



Ideas

  • 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 use the pygame.draw.polygon function to draw a pentagram:
    Pentagram. source:    http://commons.wikimedia.org/wiki/File:Pentagram_green.svg
  • 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?



Documentation

Source Code on Github

file in folder download comment
003_static_blit.py pygame Download the whole Archive with all files from Github:
https://github.com/horstjens/ThePythonGameBook/archives/master
simple version
003_static_blit_pretty.py pygame pretty version

Simple Version

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



OOP Version

Improvements:

  • using 2 different class objects, one for the game, one for the ball. See →sprites
  • better text display, see →text

https://github.com/horstjens/ThePythonGameBook/blob/master/pygame/003_static_blit_pretty.py



comment this page

~~DISQUS~~

1)
you need a rect that is 4 times the screen size
/var/www/horst/thepythongamebook.com/data/pages/en/pygame/step003.txt · Last modified: 2014/01/09 11:07 (external edit)