So far, we were able to create a window. Now, before we can draw shapes, we have to make them first. Below is an example of how to make rectangles.
RED = (255, 0, 0)
GREEN = (0, 255, 0)
# make a rectangle without the pygame.Rect class
x = 100 # top-left x value
y = 400 # top-left y value
width = 100 # width of the rectangle
height = 50 # height of the rectangle
# make a pygame.Rect rectangle
# the syntax is `myvar = pygame.Rect(top-left x, top-left y, width, height)`
# with 0 as top-left x value, 100 as top-left y value,
# width = 50, height = 100
green_rectangle = pygame.Rect(0, 100, 50, 100)
We can make rectangles either using a tuple consisting of the shape’s, top left x-coordinate, top left y-coordinate, width, and height, respectively, or using a pygame.Rect object that takes those same values. Once we have made our rectangle, we can draw it onto the screen using pygame.draw.rect(). pygame.draw.rect() takes 3 parameters: the window to draw the rectangle on, the color to draw the rectangle in, and the rectangle itself. Here’s an example:
# draw a rectangle that isn't a pygame.Rect object
pygame.draw.rect(window, RED, (x, y, width, height))
# draw a rectangle that is a pygame.Rect bject
pygame.draw.rect(window, GREEN, green_rectangle)
This draws a rectangle on the given window. RED is a tuple that represents an RGB value. The third parameter for pygame.draw.rect() is a tuple consisting of the shapes, x-coordinate, y-coordinates, width, and height, respectively.
Note that we have to use pygame.display.update() afterwards in order to update the window with any changes that were made.
💡
Don't quite understand how the rectangle's x and y coordinates works? Here's a visual to help understand this. The shown coordinate would be the top left of the rectangle if x = 30 and y = 40. As you can see, the x-coordinate is the number of pixels the top left is from the left of the screen, and the y-coordinate is the number of pixels the top left is from the top of the screen.
It's like this for all objects (they are drawn with their top left at the point x,y where x is the distance from the left of the screen and y is the distance from the top of the screen).
Moving Objects
To move the shapes and objects that we created, all we need to do is to erase the current window and redraw it with the object at a different location. The reason we erase the current window is to prevent unintentional shapes from being drawn. Every time you draw a shape with pygame, a new object is displayed on the screen. It will not remove the previous drawing.
Now, there’s two main ways to move a rectangle. If you aren’t using a pygame.Rect object, then you would just change the values of the variables that represent the top left x coordinate and the top left y coordinate. If you are using a pygame.Rect object, you could do myrect = myrect.move(delta_x, delta_y), myrect.move_ip(delta_x, delta_y), or myrect.x, myrect.y = new_x_coordinate, new_y_coordinate. Here’s an example of the two ways you can move objects.
import pygame
pygame.init()
window = pygame.display.set_mode((800, 800))
pygame.display.set_caption("Drawing and Moving Objects")
BLACK = (0, 0, 0) # background color
RED = (255, 0, 0)
GREEN = (0, 255, 0)
# make a rectangle without the pygame.Rect class
x = 100 # top-left x value
y = 400 # top-left y value
width = 100 # width of the rectangle
height = 50 # height of the rectangle
# make a pygame.Rect rectangle
# the syntax is `myvar = pygame.Rect(top-left x, top-left y, width, height)`
# with 0 as top-left x value, 100 as top-left y value,
# width = 50, height = 100
green_rectangle = pygame.Rect(0, 100, 50, 100)
run = True
while run:
for event in pygame.event.get():
if event.type == pygame.QUIT:
run = False
# move a rectangle that isn't a pygame.Rect object
x += 1 # move to the right 1 px
y += 1 # move down 1 px
# move a rectangle that is a pygame.Rect object
green_rectangle.move_ip(1, 2) # moves 1 to the right, 2 down
# this is equivalent to green_rectangle = green_rectangle.move(1, 2)
# erase the previous frame
window.fill(BLACK)
# draw a rectangle that isn't a pygame.Rect object
pygame.draw.rect(window, RED, (x, y, width, height))
# draw a rectangle that is a pygame.Rect object
pygame.draw.rect(window, GREEN, green_rectangle)
# update the screen
pygame.display.update()
# sometimes you need to limit frame rate or your objects
# will seem to move too fast
pygame.time.wait(30) # wait 30 milliseconds between frame
pygame.quit() # close pygame after finishing
If you had a pygame.Rect object my_rectangle, then you could use the following built-in attributes to easily access or set attributes for your rectangle:
my_rectangle.top → This would be the y coordinate of the top of the rectangle
my_rectangle.y → This also represents the y coordinate of the top of the rectangle
my_rectangle.bottom → This would be the y coordinate of the bottom of the rectangle
my_rectangle.left → This would be the x coordinate of the left of the rectangle
my_rectangle.x → This also represents the x coordinate of the left of the rectangle
my_rectangle.right → This would be the x coordinate of the right of the rectangle
Practice
Reset Position
Reset the moving rectangle's position if it leaves the screen!
The rectangle that will be moving is already provided it is red_rectangle. Your job is to move it across the screen at a speed of 5px down and 5px right per frame. Then, if the bottom of the rectangle is greater than the screen height or the right of the rectangle is greater than the screen width, reset the rectangle's x and y to 0 and 0.
