Making the Background Move Sideways in Pygame

Making the background move sideways in pygame

If you want to have a continuously repeating background, then you've to draw the background twice:

You've to know the size of the screen. The size of the height background image should match the height of the screen. The width of the background can be different, but should be at least the with of the window (else the background has to be drawn more than 2 times).

bg_w, gb_h = size
bg =  pygame.transform.smoothscale(pygame.image.load('background.image'), (bg_w, bg_h))

The background can be imagined as a endless row of tiles.
If you want to draw the background at an certain position pos_x, then you have to calculate the position of the tile relative to the screen by the modulo (%) operator. The position of the 2nd tile is shifted by the width of the background (bg_w):

x_rel = pos_x % bg_w
x_part2 = x_rel - bg_w if x_rel > 0 else x_rel + bg_w

Finally the background has to be blit twice, to fill the entire screen:

screen.blit(bg, (x_rel, 0))
screen.blit(bg, (x_part2, 0))

You can test the process by the following example program. The background can be moved by <- respectively ->

import pygame

pygame.init()

size = (800,600)
screen = pygame.display.set_mode(size)
clock = pygame.time.Clock()

bg_w, bg_h = size 
bg = pygame.transform.smoothscale(pygame.image.load('background.image'), (bg_w, bg_h))
pos_x = 0
speed = 10

done = False
while not done:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            done = True

    allKeys = pygame.key.get_pressed()
    pos_x += speed if allKeys[pygame.K_LEFT] else -speed if allKeys[pygame.K_RIGHT] else 0

    x_rel = pos_x % bg_w
    x_part2 = x_rel - bg_w if x_rel > 0 else x_rel + bg_w

    screen.blit(bg, (x_rel, 0))
    screen.blit(bg, (x_part2, 0))

    pygame.display.flip()

Also see How to make parallax scrolling work properly with a camera that stops at edges pygame

How Do I Scroll My BackGround Image In Pygame?

You have to draw the background twice in a tiled mode. Add a variable which defines the offset of the background bg_shift. Compute the offset in relation to the width of the background by the % (modulo) operator (See Binary arithmetic operations). Finally blit the background twice:

bg_shift = 0

def redrawwindow():

    bg_width = gb.get_widht()
    bg_offset = bg_shift % bg_width 
    
    window.blit(bg, (-bg_offset, 0)) 
    window.blit(bg, (bg_width - bg_offset, 0)) 

You have to change the variabel bg_shift in the main application loop dependent on the movement of the bird.

bg_shift += bird1.speed

You can even try to move the background with a different speed, which gives a nice perspective effect. For instance:

bg_shift += round(bird1.speed / 2)

Pygame scrolling background glitch

Use the modulo (%) operator to calculate the coordinates:

bgx = 0
bgx2 = bgx + height

def move():
    global bgx, bgx2 
    bgx = (bgx - 40) % height
    bgx2 = bgx - height

Side-scrolling background

Here's a simple example.

Note the comments for an explanation.

import pygame

pygame.init()

screen = pygame.display.set_mode((640, 480))

clock = pygame.time.Clock()

# this is the background image
# we need to blit it two times, let's call them "left" and "right"
back_image = pygame.image.load('background.png')

# this rect will store the position of the "left"-part of the background
back_rect = back_image.get_rect()

while True:
    if pygame.event.get(pygame.QUIT):
        break

    for e in pygame.event.get():
        # your event handling here
        pass

    # this is the "left" image
    screen.blit(back_image, back_rect)
    # this is the "right" image, next to the left one
    # we calculate the "right" position by simply moving the rect by the width of the image
    screen.blit(back_image, back_rect.move(back_rect.width, 0))

    # we want a scrolling background, so we just move the position rect
    back_rect.move_ip(-2, 0)

    # it the right edge of the "left" image is zero, that means it's fully out of view
    if back_rect.right == 0:
        # so we reset the rect and start over
        back_rect.x = 0

    clock.tick(60)
    pygame.display.flip()

and here's an example image (save it as background.png)

The end result will look like this:

---

Related Topics