Creating a scrolling background in Pygame

In this article, we are going to know how to create a scrolling background in Pygame.

Pygame offers many advantages for developing basic infrastructure for many games. One of them is the scrolling background. Many of the popular games of all time required this feature of endless scrolling. This scrolling background helps to make the background more creative with less effort. 

In a scrolling background, one image is considered as a background that will repeat itself again and again. Thus creating a scrolling endless loop of images. Suppose in a Pygame shell we move a single image from one coordinate to another, thus shifting the pixel of one image to another. Now, these blank pixels can be filled by the other image.

Required libraries:

Run the below command in the command prompt to install the Pygame library.

pip install pygame   

Creating a scrolling background in Pygame

We want to create a scrolling window in Pygame for our game of a running horse in a cartoon verse. So we have created an image for its background. And we want that image fig1.1 to be in our frame while our horses will run. In short, we want a scrolling background for our game.

fig 1.1

SCROLL WINDOW:

fig. 1.2

Step Implementation:

Step 1. Import the libraries and modules required and initialize the declared module.

import pygame as py
import math

Step 2. Declaring the clock for managing the speed of the scrolling. FrameHeight, FrameWidth, and Frame window for scrolling the background image in Pygame.

clock = py.time.Clock()

FrameHeight = 600
FrameWidth = 1200

# PYGAME FRAME WINDOW
py.display.set_caption("Endless Scrolling in pygame")
screen = py.display.set_mode((FrameWidth, FrameHeight))

Step 3. Uploading the background image for scrolling and setting the scroll variable to 0. And calculate the number of tiles or area boxes required for an uploaded image in a pygame frame.

bg = py.image.load("sea7.png").convert()

# DEFINING MAIN VARIABLES IN SCROLLING
scroll = 0
# HERE 1 IS THE CONSTATNT FOR REMOVING BUFFERING
tiles = math.ceil(FrameWidth  /bg.get_width()) + 1   

Step 4. Call the clock function of pygame for managing the fps of the window screen. Using the blit function (block transfer) this function helps us to copy the image from one position to another position. This helps us to append the image to the back of the image. 

In a condition, if the scroller moves beyond the Frame Width then modify the value of the scroller to 0. Thus it will help us to move the same frame again and again and creates an endless scrolling view.

And for closing the pygame window we must have to declare the event controller to get the quit request by the user to end the pygame window.

while 1:
  clock.tick(50)

  # APPENDING THE IMAGE TO THE BACK OF THE SAME IMAGE
  i=0
  while(i<tiles):
    screen.blit(bg, (bg.get_width()*i + scroll, 0))
    i+=1
  # FRAME FOR SCROLLING
  scroll -= 6

  # RESET THE SCROLL FRAME
  if abs(scroll) > bg.get_width():
    scroll = 0
  # CLOSING THE FRAME OF SCROLLING
  for event in py.event.get():
    if event.type == py.QUIT:
        quit()

  py.display.update()

py.quit()

Code Implementation:

Python3

import math
import pygame as py

py.init()

clock = py.time.Clock()

FrameHeight = 600
FrameWidth = 1200

# PYGAME FRAME WINDOW
py.display.set_caption("Endless Scrolling in pygame")
screen = py.display.set_mode((FrameWidth,
                              FrameHeight))

# IMAGE
bg = py.image.load("sea6.png").convert()

# DEFINING MAIN VARIABLES IN SCROLLING
scroll = 0

# CHANGE THE BELOW 1 TO UPPER NUMBER IF
# YOU GET BUFFERING OF THE IMAGE
# HERE 1 IS THE CONSTATNT FOR REMOVING BUFFERING
tiles = math.ceil(FrameWidth / bg.get_width()) + 1

# MAIN LOOP
while 1:
    # THIS WILL MANAGE THE SPEED OF
    # THE SCROLLING IN PYGAME
    clock.tick(33)

    # APPENDING THE IMAGE TO THE BACK
    # OF THE SAME IMAGE
    i = 0
    while(i < tiles):
        screen.blit(bg, (bg.get_width()*i
                         + scroll, 0))
        i += 1
    # FRAME FOR SCROLLING
    scroll -= 6

    # RESET THE SCROLL FRAME
    if abs(scroll) > bg.get_width():
        scroll = 0
    # CLOSINF THE FRAME OF SCROLLING
    for event in py.event.get():
        if event.type == py.QUIT:
            quit()

    py.display.update()

py.quit()

Output:

fig1.3 FINAL OUTPUT