Introduction To Shapes
Typically a pygame project will contain images and spritesheets, but for simpler shapes we can use the built in draw module.
Rectangles
I’ll start with the most common one, which is the rectangle. Run the demo code below to see it in action.
import pygame
pygame.init()
SCREEN_WIDTH = 600
SCREEN_HEIGHT = 400
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Working With Shapes")
run = True
while run:
screen.fill((255, 255, 255))
pygame.draw.rect(screen, (255, 0, 0), (200, 100, 150, 150))
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
pygame.display.flip()
pygame.quit()
What you should see is a red rectangle positioned in the middle of the screen so let’s look at the inputs required for the function.
The first argument is the surface that the rectangle is to be drawn on, in my case it is screen, which is my game window.
The second argument is the colour, and I used the RGB value for red.
The last argument is the rectangle itself. The x and y coordinates come first, then it is the width and height.
These are the minimum arguments required for creating a rectangle, but there are additional options.
Instead of a solid filled rectangle, you can draw just the outline of the rectangle by passing a width argument. This is the line width and not to be confused with the overall width of the rectangle.
Change the rectangle code to pygame.draw.rect(screen, (255, 0, 0), (200, 100, 150, 150), width = 5) and run the code again. Increasing the width variable will increase the line thickness. By default this is set to 0, which is why you get a solid filled rectangle if you don’t define a line width.
You can also pass a border radius, which allows you to add rounded corners to the rectangles. To do this, add an extra argument to your rectangle, just like we did with the line width: border_radius = 50. This should give you a rectangle with rounded corners.
We can even take this one step further and apply a radius only to the specified corners. Change the rectangle code to:
pygame.draw.rect(screen, (255, 0, 0), (200, 100, 150, 150), width = 5, border_bottom_right_radius = 50, border_top_left_radius = 25)
And you should end up with a rectangle with some rounded corners.
Circles
Next let’s look at circles. They work in a similar way, we pass the surface and colour, then we pass the center x & y coordinates and the radius. Replace the rectangle code from before with this:
pygame.draw.circle(screen, (0, 0, 0), (300, 200), 75)
The result should be a black circle in the middle of the window
You can apply a line width variable to circles too and it works in the same way as it does for rectangles.
An interesting feature of circles is that you can choose to draw only specific quadrants. The code below draws the original black circle, but it also draws two quadrants of a yellow circle over the top, giving this pattern.
pygame.draw.circle(screen, (0, 0, 0), (300, 200), 75)
pygame.draw.circle(screen, (255, 255, 0), (300, 200), 75, draw_top_right = True, draw_bottom_left = True)
Ellipses
Another shape you can draw is an ellipse. These take the exact same inputs as rectangles so I won’t dwell on them. Use the code below to draw an ellipse.
pygame.draw.ellipse(screen, (0, 0, 255), (200, 150, 150, 75))
Arcs
Next one is arcs. They have a similar input to rectangles, but you also need to specify a start and end angle. The angles are in radians so if you remember your trigonometry, pi radians is 180 degrees. So a semi circle would have an end angle of pi, which is 3.14 to 2 decimal places.
pygame.draw.arc(screen, (0, 255, 255), (200, 100, 150, 150), 0, 3.14, width = 5)
This shape might seem boring at first, but you can make it dynamic by using a variable for the angles. The code below uses left and right mouse clicks to increase and decrease the size of the arc. Try it out and see how it works.
Something like this could be used in a game to quickly visualise a cooldown or loading progress.
import pygame
pygame.init()
SCREEN_WIDTH = 600
SCREEN_HEIGHT = 400
x = 0
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Working With Shapes")
run = True
while run:
screen.fill((255, 255, 255))
if pygame.mouse.get_pressed()[0] == True:
x += 0.001
elif pygame.mouse.get_pressed()[2] == True:
x -= 0.001
pygame.draw.arc(screen, (0, 255, 255), (200, 100, 150, 150), 0, x, width = 5)
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
pygame.display.flip()
pygame.quit()
Lines
Next we come to lines. This is the simplest shape and requires similar arguments to what we’ve seen already with other shapes. First two arguments are the surface and colour, then we pass the start point and end point as tuples of x & y coordinates. The code snippet below draws a line from the middle of the screen to the mouse cursor.
import pygame
pygame.init()
SCREEN_WIDTH = 600
SCREEN_HEIGHT = 400
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Working With Shapes")
run = True
while run:
screen.fill((255, 255, 255))
pos = pygame.mouse.get_pos()
pygame.draw.line(screen, (255, 0, 255), (300, 200), pos)
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
pygame.display.flip()
pygame.quit()
Polygons
Lastly we come to polygons. A polygon takes a sequence of coordinates and draws a shape through them. First two arguments are the surface and colour, then pass as many sets of x & y coordinates as you like. The code snippet below draws a polygon with four points.
import pygame
pygame.init()
SCREEN_WIDTH = 600
SCREEN_HEIGHT = 400
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Working With Shapes")
run = True
while run:
screen.fill((255, 255, 255))
pygame.draw.polygon(screen, (100, 100, 100), ((100, 200), (200, 300), (500, 100), (200, 250)))
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
pygame.display.flip()
pygame.quit()
