Learn Pygame Basic

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:

  1. Creating a basic pygame screen: The first stage involves creating a window, adding a background and background music for it to appear more interesting.
  2. Adding a Shape to the screen: Then we’ll look into how you can add a shape to your screen.
  3. 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.

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.

See also  Build Your own Chatgpt3 using python

The keys that we are adding in accordance with our interactiveness are:

  1. Up arrow key – Decreases the y coordinate by 2 units
  2. Down arrow key – Increases the y coordinate by 2 units
  3. Left arrow key – Decreases the x coordinate by 2
  4. 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 += 2

Complete 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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

we provide projects, courses, and other stuff for free. in order for running we use Google ads to make revenue. please disable adblocker to support us.