How to implement a scroll view in Pygame

Question

My goal is to have 4 boxes. At any given point only 3 boxes will be visible, while 1 will be hidden. Then if you scroll left or right you will reveal the fourth box/hide the first box. Basically a simple scroll view. I'm planning on implementing this on Pygame. I understand this is a relatively empty question; I'm looking for a library or general idea to implement this. Any recommendations?

Answer 1

I created code which move images when you move mouse (without clicking button)

I use camera_rect to keep offset used to move image.

I use event MOUSEMOTION and event.rel to change value in camera_rect

It was created for image 800x600 and window 400x300 and it moves full image but for different sizes it may need different calculations - or it may need to calculate mouse position as percentage and use this percentage to calculate image position.

import pygame

# === CONSTANS === (UPPER_CASE names)

#BLACK = (  0,   0,   0)
#WHITE = (255, 255, 255)

#RED   = (255,   0,   0)
#GREEN = (  0, 255,   0)
#BLUE  = (  0,   0, 255)

SCREEN_WIDTH  = 400
SCREEN_HEIGHT = 300

# === CLASSES === (CamelCase names)

    # empty
    
# === FUNCTIONS === (lower_case names)

    # empty
    
# === MAIN === (lower_case names)

# --- (global) variables --- 

# --- init ---

pygame.init()

screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
screen_rect = screen.get_rect()

# --- objects ---

image = pygame.image.load('image-800x600.jpg')
image_rect = image.get_rect()

# --- camera / offset ---

camera_rect = screen_rect.copy()

# --- mainloop ---

#button_pressed = False

clock = pygame.time.Clock()
is_running = True

while is_running:

    # --- events ---
    
    for event in pygame.event.get():

        # --- global events ---
        
        if event.type == pygame.QUIT:
            is_running = False
            
        elif event.type == pygame.KEYDOWN:
            if event.key == pygame.K_ESCAPE:
                is_running = False

        #elif event.type == pygame.MOUSEBUTTONDOWN:
        #    button_pressed = True
        #elif event.type == pygame.MOUSEBUTTONUP:
        #    button_pressed = False

        elif event.type == pygame.MOUSEMOTION:
            #if button_pressed:
    
                camera_rect.x += event.rel[0]
                # check left/right limit
                if camera_rect.left < image_rect.left:
                    camera_rect.left = image_rect.left
                if camera_rect.right > image_rect.right:
                    camera_rect.right = image_rect.right
    
                camera_rect.y += event.rel[1]
                # check up/down limit
                if camera_rect.top < image_rect.top:
                    camera_rect.top = image_rect.top
                if camera_rect.bottom > image_rect.bottom:
                    camera_rect.bottom = image_rect.bottom
                    
        # --- objects events ---

    # --- updates ---

        
    # --- draws ---
    
    #screen.fill(BLACK)

    # draw image
    screen.blit(image, (-camera_rect.x, -camera_rect.y))
    #screen.blit(image, camera_rect)

    pygame.display.update()

    # --- FPS ---

    clock.tick(25)

# --- the end ---
    
pygame.quit()

---

EDIT:

More universal version which use pecentage to calculate position.

import pygame

# === CONSTANS === (UPPER_CASE names)

#BLACK = (  0,   0,   0)
#WHITE = (255, 255, 255)

#RED   = (255,   0,   0)
#GREEN = (  0, 255,   0)
#BLUE  = (  0,   0, 255)

SCREEN_WIDTH  = 400
SCREEN_HEIGHT = 600

# === CLASSES === (CamelCase names)

# empty
    
# === FUNCTIONS === (lower_case names)

# empty
    
# === MAIN === (lower_case names)

# --- (global) variables --- 

# --- init ---

pygame.init()

screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
screen_rect = screen.get_rect()

# --- objects ---

image = pygame.image.load('image-800x600.jpg')
image_rect = image.get_rect()

# --- camera / offset ---

camera_rect = screen_rect.copy()

percentage_x = 0
percentage_y = 0

# --- mainloop ---

#button_pressed = False

clock = pygame.time.Clock()
is_running = True

while is_running:

    # --- events ---
    
    for event in pygame.event.get():

        # --- global events ---
        
        if event.type == pygame.QUIT:
            is_running = False
            
        elif event.type == pygame.KEYDOWN:
            if event.key == pygame.K_ESCAPE:
                is_running = False

        elif event.type == pygame.MOUSEMOTION:
            percentage_x = event.pos[0] / screen_rect.width
            camera_rect.x = percentage_x * (image_rect.width - screen_rect.width)

            #percentage_y = event.pos[1] / screen_rect.height
            #camera_rect.y = percentage_y * (image_rect.height - screen_rect.height)
                    
        # --- objects events ---
        
        # empty
        
    # --- updates ---

    # empty
        
    # --- draws ---
    
    #screen.fill(BLACK)

    # draw image
    screen.blit(image, (-camera_rect.x, -camera_rect.y))
    #screen.blit(image, camera_rect)

    pygame.display.update()

    # --- FPS ---

    clock.tick(25)

# --- the end ---
    
pygame.quit()