How do I turn my pygame into a side scroller?

Question

I'm building a game with pygame and I have a problem with this game, I don't know how to make the background and the platform scroll slowly to the right as my player sprite moves to the right.

I want the scrolling to happen in def shift_world().

Maybe someone can teach me how to add an image to the background as well. It would be great if you can utilize the libraries I am using. I have three files: The first for the game, the second for sprites, and the third for the settings.

 main.py:
 # Sarada's Blaze! - side scrolling platform shooting game

 import pygame as pg 
 import random 
 import os
 from settings import *
 from sprites import *

 class Game:
     def __init__(self):
        # initialize game window, etc
        pg.init()
        pg.mixer.init()
        self.screen = pg.display.set_mode((WIDTH, HEIGHT))
        pg.display.set_caption(TITLE)
        self.clock = pg.time.Clock()
        self.running = True
        self.font_name = pg.font.match_font(FONT_NAME)

     def new(self):
        # start a new game
        self.score = 0
        self.all_sprites = pg.sprite.Group()
        self.platforms = pg.sprite.Group()
        self.player = Player(self)
        self.all_sprites.add(self.player)
        for plat in PLATFORM_LIST:
            p = Platform(*plat)
            self.all_sprites.add(p)
            self.platforms.add(p)
        self.run()


     def run(self):
        # Game loop
        self.playing = True
        while self.playing:
            self.clock.tick(FPS)
            self.events()
            self.update()
            self.draw()

     def update(self):
        # Game Loop - Update
        self.all_sprites.update()
        self.platforms.update()
        # check if player hits a platform - only if falling
        if self.player.vel.y  0:
            hits = pg.sprite.spritecollide(self.player, self.platforms, False)
            if hits:
                self.player.pos.y = hits[0].rect.top
                self.player.vel.y = 0


     def events(self):
        # Game Loop - events
        for event in pg.event.get():
        # check for closing window
            if event.type == pg.QUIT:
                if self.playing:
                    self.playing = False
                self.running = False
            if event.type == pg.KEYDOWN:
                if event.key == pg.K_UP:
                    self.player.jump()

     def draw(self):
        # Game Loop - draw
        self.screen.fill(bgcolor) # I want to change the background color to an image
        self.all_sprites.draw(self.screen)
        self.draw_text(str(self.score), 22, white, WIDTH / 2, 15)
        # after drawing everything, flip the display
        pg.display.flip()

     # How far the world has been scrolled right
     # This is where i want the side scroller stuff to happen
     def shift_world(self):
        # when the user moves left/right, i want to scroll everything
        self.world_shift += shift_x
        # i want all my platforms and the background to scroll when
        # my player sprite moves closer to the right
        for plat in PLATFORM_LIST:
            self.platform.rect.x += shift_x
        if self.pos.x = 500:
            diff = self.pos.x - 500
            self.pos.x = 500
            self.shift_world(- diff)
        if self.pos.x <= 120:
            diff = 120 - self.pos.x
            self.pos.x -= 120
            self.shift_world(diff)

     def show_start_screen(self):
        # game splash/start screen
        self.screen.fill(greenblue)
        self.draw_text(TITLE, 48, red, WIDTH / 2, HEIGHT / 4)
        self.draw_text("left arrow to move left, right arrow to move right, up arrow to jump",   22, blue, WIDTH / 2, HEIGHT / 2)
        self.draw_text("Press any key to begin", 22, green, WIDTH / 2, HEIGHT * 3 /4)
        pg.display.flip()
        self.wait_for_key()

     def show_go_screen(self):
        # game over/continue
        if not self.running:
            return
        self.screen.fill(greenblue)
        self.draw_text("Game Over!", 48, red, WIDTH / 2, HEIGHT / 4)
        self.draw_text("Score: " + str(self.score), 22, blue, WIDTH / 2, HEIGHT / 2)
        self.draw_text("Press any key to continue", 22, green, WIDTH / 2, HEIGHT * 3 /4)
        pg.display.flip()
        self.wait_for_key()

     def wait_for_key(self):
        waiting = True
        while waiting:
            self.clock.tick(FPS)
            for event in pg.event.get():
                if event.type == pg.QUIT:
                    waiting = False
                    self.running = False
                if event.type == pg.KEYUP:
                    waiting = False

     def draw_text(self, text, size, color, x, y):
        font = pg.font.Font(self.font_name, size)
        text_surface = font.render(text, True, color)
        text_rect = text_surface.get_rect()
        text_rect.midtop = (x, y)
        self.screen.blit(text_surface, text_rect)

 g = Game()
 g.show_start_screen()
 while g.running:
      g.new()
      g.show_go_screen()

 pg.quit()

 sprites.py:
 # Sprite classes for platform shooting game
 import pygame as pg
 import random
 from settings import *
 import os
 vec = pg.math.Vector2

 game_folder = os.path.dirname(__file__)
 img_folder = os.path.join(game_folder, "img")

 class Player(pg.sprite.Sprite):
     def __init__(self, game):
         pg.sprite.Sprite.__init__(self)
         self.game = game
         self.image = pg.image.load(os.path.join(img_folder, "sarada_shooting.png")).convert()
         self.image.set_colorkey(black)
         self.rect = self.image.get_rect()
         self.rect.center = (WIDTH / 2, HEIGHT / 2)
         self.pos = vec(WIDTH / 2, HEIGHT / 2)
         self.vel =vec(0, 0)
         self.acc = vec(0, 0)

     def jump(self):
         # jump only if standing on a platform
         self.rect.x += 1
         hits = pg.sprite.spritecollide(self, self.game.platforms, False)
         self.rect.x -= 1
         if hits:
              self.vel.y = -PLAYER_JUMP


     def update(self):
         self.acc = vec(0, PLAYER_GRAV)
         keys = pg.key.get_pressed()
         if keys[pg.K_LEFT]:
             self.acc.x = -PLAYER_ACC
         if keys[pg.K_RIGHT]:
             self.acc.x = PLAYER_ACC


         # apply friction
         self.acc.x += self.vel.x * PLAYER_FRICTION
         # equations of motion
         self.vel += self.acc
         self.pos += self.vel + 0.5 * self.acc
         # wrap around the sides of the screen
         if self.pos.x  WIDTH:
             self.pos.x = 0
         if self.pos.x < 0:
             self.pos.x = WIDTH

         self.rect.midbottom = self.pos

     # i want the platform graphic changed
 class Platform(pg.sprite.Sprite):
     def __init__(self, x, y, w, h):
         pg.sprite.Sprite.__init__(self)
         self.image = pg.Surface((WIDTH, h))
         self.image.fill(greenblue)
         self.rect = self.image.get_rect()
         self.rect.x = x
         self.rect.y = y

 settings.py:
 # game options/settings
 TITLE = "Sarada's Blaze"
 WIDTH = 800
 HEIGHT = 600
 FPS = 60
 FONT_NAME = 'times new roman'

 # Player properties
 PLAYER_ACC = 0.5
 PLAYER_FRICTION = -0.20
 PLAYER_GRAV = 0.8
 PLAYER_JUMP = 20

 # starting platforms
 PLATFORM_LIST = [(0, HEIGHT - 40, WIDTH, 40)]

 # define colors
 white = (255, 255, 255)
 black = (0, 0, 0)
 red = (255, 0, 0) 
 green = (0, 255, 0)
 blue = (0, 0, 255)
 purple = (255, 0, 255) # ENEMY COLOR
 greenblue = (0, 155, 155)
 bgcolor = red

Answer 1

You need to iterate over the self.platforms list and subtract the player's vel.x from the x-position of every sprite in order to move them. Also, give your platform sprites a vector attribute for the position self.pos = vec(x, y) because the coordinates of pygame.Rects are truncated and turned into ints, so the movement will be inaccurate if your velocity vectors consist of floats.

def update(self):
    # ...
    self.shift_world()

def shift_world(self):
    # Scroll when the player sprite moves closer to the right.
    if self.player.pos.x >= 500:
        self.player.pos.x = 500  # Stop at 500.
        self.shift_platforms()
    # Scroll when the player sprite moves closer to the left.
    if self.player.pos.x <= 120:
        self.player.pos.x = 120  # Stop at 120.
        self.shift_platforms()

def shift_platforms(self):
    for plat in self.platforms:  # Iterate over the platform sprites.
        plat.pos.x -= self.player.vel.x  # Update the platform's pos vector.
        plat.rect.x = plat.pos.x  # Update the rect.
    self.world_shift -= self.player.vel.x  # For the background.

As for the background surface, you can use the self.world_shift attribute and subtract the self.player.vel.x in the shift_platforms method as well. Then blit it twice in the draw method and use the modulo operator to blit it at the correct x-positions.

I assume the background has the size of the screen and should be repeated.

# Load it once in the global scope.
BACKGROUND = pg.image.load(os.path.join(img_folder, "background.png")).convert()

def draw(self):
    x = self.world_shift
    self.screen.blit(BACKGROUND, (x % WIDTH, 0))
    self.screen.blit(BACKGROUND, (x % WIDTH - WIDTH - 1, 0))