From this article, you will learn how to create interactive shapes in pygame. It’s more like a tutorial for beginners to learn to bring interactiveness to your shape. This whole process is just illustrated within three major stages:
- Creating a basic pygame screen: The first stage involves creating a window, adding a background and background music for it to appear more interesting.
- Adding a Shape to the screen: Then we’ll look into how you can add a shape to your screen.
- Adding interactivity: Finally, I’ll tell you how to add interactivity to your shape.
So let’s get started with our first stage of creating a basic screen.
Stage 1: Creating a Basic Pygame Screen
Firstly we will create a basic pygame screen by importing some modules like pygame and pygame.locals. As we want to insert background music also, we need to add the mixer module.
1. Creating a Window
We start out by initializing Pygame and creating a window object by setting the height and width of the screen. In addition, a running loop will be added to handle various events, such as the X button closing the window.
2. Add a Background Image
Adding a background image is the next step. We will load the image first, then scale it so that it fills the entire window. After adding the image, use the blit and update function within the running loop.
3. Add the Background Music
By adding the mixer module function we will be able to add background music to our program. We begin by importing our music files from our folder of music files. To load the music, we use music.load, to play the music, we use music.play. and to play the music we use music.play.
import pygame
from pygame.locals import *
from pygame import mixer
pygame.init()
width = 500
height = 500
window = pygame.display.set_mode((width,height))
bg_img = pygame.image.load('#Choose your image from files')
bg_img = pygame.transform.scale(bg_img,(width,height))
mixer.init()
mixer.music.load('#Select the location of your music file')
pygame.mixer.music.set_volume(0.05)
mixer.music.play()
runing = True
while runing:
window.blit(bg_img,(0,0))
for event in pygame.event.get():
if event.type == QUIT:
runing = False
pygame.display.update()
pygame.quit()Stage 2: Adding a Shape to the Screen
In order to draw a Square, we use the draw.rect function which takes three parameters: the window object name, the color of the rectangle, and the dimensions of the rectangle (width and height, x and y coordinates).
Defining the width and height of the block will come before the running loop begins. Additionally, we will declare the block’s color before running the loop. As shown below, the code has been updated to add the required code lines. The adjusted lines have been highlighted for your reference.
import pygame
from pygame.locals import *
from pygame import mixer
pygame.init()
width = 500
height = 500
window = pygame.display.set_mode((width,height))
bg_img = pygame.image.load('Image Files/bg.png')
bg_img = pygame.transform.scale(bg_img,(width,height))
x=y=50
color = "red"
mixer.init()
mixer.music.load('Music File/Littleidea - wav music file.wav')
pygame.mixer.music.set_volume(0.05)
mixer.music.play()
runing = True
while runing:
window.blit(bg_img,(0,0))
for event in pygame.event.get():
if event.type == QUIT:
runing = False
pygame.draw.rect(window, color, pygame.Rect(x, y, 60, 60))
pygame.display.update()
pygame.quit()Stage 3: Add Interactivity to your Shape
Now let’s start making interactive shapes. In order to do that firstly we will make sure that it captures the key that is being pressed using key.get_ pressed function and store it in a variable. Secondly, we will check the variable and on the basis of the key captured, we will make the necessary changes in the coordinates.
The keys that we are adding in accordance with our interactiveness are:
- Up arrow key – Decreases the y coordinate by 2 units
- Down arrow key – Increases the y coordinate by 2 units
- Left arrow key – Decreases the x coordinate by 2
- Right arrow key – Increases x coordinate by 2 units.
The code to illustrate the above explanation is hereunder :
key = pygame.key.get_pressed()
if key[pygame.K_UP]:
y -= 2
if key[pygame.K_DOWN]:
y += 2
if key[pygame.K_LEFT]:
x -= 2
if key[pygame.K_RIGHT]:
x += 2Complete Code:
If you have understood the above steps well then you can write the complete code on your own. But if you still have any doubts, you can refer to the complete code given along with the comments below:
import pygame
from pygame.locals import *
from pygame import mixer
pygame.init()
#window attributes
width = 500
height = 500
window = pygame.display.set_mode((width,height))
bg_img = pygame.image.load('Image Files/bg.png')
bg_img = pygame.transform.scale(bg_img,(width,height))
#square attributes
x=y=50
color = "red"
#music addition
mixer.init()
mixer.music.load('Music File/Littleidea - wav music file.wav')
pygame.mixer.music.set_volume(0.05)
mixer.music.play()
#the running loop
runing = True
while runing:
#add background img
window.blit(bg_img,(0,0))
#handling events
for event in pygame.event.get():
#closing window function
if event.type == QUIT:
runing = False
#add the square
pygame.draw.rect(window, color, pygame.Rect(x, y, 60, 60))
#moving square on pressing keys
key = pygame.key.get_pressed()
if key[pygame.K_UP]:
y -= 2
if key[pygame.K_DOWN]:
y += 2
if key[pygame.K_LEFT]:
x -= 2
if key[pygame.K_RIGHT]:
x += 2
#update display
pygame.display.update()
#quit pygame
pygame.quit()
The complete code without comments is below:
import pygame
from pygame.locals import *
from pygame import mixer
pygame.init()
width = 500
height = 500
window = pygame.display.set_mode((width,height))
bg_img = pygame.image.load('Image Files/bg.png')
bg_img = pygame.transform.scale(bg_img,(width,height))
x=y=50
color = "red"
mixer.init()
mixer.music.load('Music File/Littleidea - wav music file.wav')
pygame.mixer.music.set_volume(0.05)
mixer.music.play()
runing = True
while runing:
window.blit(bg_img,(0,0))
for event in pygame.event.get():
if event.type == QUIT:
runing = False
pygame.draw.rect(window, color, pygame.Rect(x, y, 60, 60))
key = pygame.key.get_pressed()
if key[pygame.K_UP]:
y -= 2
if key[pygame.K_DOWN]:
y += 2
if key[pygame.K_LEFT]:
x -= 2
if key[pygame.K_RIGHT]:
x += 2
pygame.display.update()
pygame.quit()
import pygame
from pygame.locals import *
from pygame import mixer
pygame.init()
#window attributes
width = 500
height = 500
window = pygame.display.set_mode((width,height))
bg_img = pygame.image.load('Image Files/bg.png')
bg_img = pygame.transform.scale(bg_img,(width,height))
#square attributes
x=y=50
color = "red"
#music addition
mixer.init()
mixer.music.load('Music File/Littleidea - wav music file.wav')
pygame.mixer.music.set_volume(0.05)
mixer.music.play()
#the running loop
runing = True
while runing:
#add background img
window.blit(bg_img,(0,0))
#handling events
for event in pygame.event.get():
#closing window function
if event.type == QUIT:
runing = False
#add the square
pygame.draw.rect(window, color, pygame.Rect(x, y, 60, 60))
#moving square on pressing keys
key = pygame.key.get_pressed()
if key[pygame.K_UP]:
y -= 2
if key[pygame.K_DOWN]:
y += 2
if key[pygame.K_LEFT]:
x -= 2
if key[pygame.K_RIGHT]:
x += 2
#update display
pygame.display.update()
#quit pygame
pygame.quit()Get more such beginner tutorials HERE.
