Trying to a get a movable image with a PNG background using pygame

Question

We are trying to create a program using pygame that allows preset image files to be dragged around over another PNG image as the background. Used some code from a tutorial for pygame and tweaked it to fit our specific needs. We have gotten the images to populate and are movable but only with a white background. When importing the PNG file for the background instead, the moveable image disappears behind the background. I have replace the the two filepaths with just "filepath." Still fairly new to python so sorry for ugly code.

Code:

# Import the library pygame
import pygame
from pygame.locals import *

##background
bg = pygame.image.load(filepath)
 
# Take colors input
YELLOW = (255, 255, 0)
BLUE = (0, 0, 255)
WHITE = (255, 255, 255)
RED   = (255,   0,   0)
BLACK = (0, 0, 0)

 
# Construct the GUI game
pygame.init()
 
# Set dimensions of game GUI
w, h = 1280, 720
screen = pygame.display.set_mode((w, h))
 
# Take image as input
img = pygame.image.load(filepath)
img.convert()
 
# Draw rectangle around the image
rect = img.get_rect()
rect.center = w//2, h//2
 
# Set running and moving values
running = True
moving = False

# Setting what happens when game
# is in running state

while running:
    screen.blit(bg, (320,0))
    
    for event in pygame.event.get():
        # Close if the user quits the
        # game
        if event.type == QUIT:
            running = False
 
        # Making the image move
        elif event.type == MOUSEBUTTONDOWN:
            if rect.collidepoint(event.pos):
                moving = True
 
        # Set moving as False if you want
        # to move the image only with the
        # mouse click
        # Set moving as True if you want
        # to move the image without the
        # mouse click
        elif event.type == MOUSEBUTTONUP:
            moving = False
 
        # Make your image move continuously
        elif event.type == MOUSEMOTION and moving:
            rect.move_ip(event.rel)

    
 
   # Set screen color and image on screen
        screen.fill(WHITE)
        screen.blit(img, rect)
 
    # Construct the border to the image
    pygame.draw.rect(screen, BLACK, rect, 2)
 
    # Update the GUI pygame
    pygame.display.update()
    
    ##trying to draw the background
   
 
# Quit the GUI game
pygame.quit()

score 1 · Answer 1 · answered Aug 09 '22 at 22:10

I tried out your code and through a bit of experimentation, came up with some refinements that display the image in front of the background. Following is your program with a few tweaks.

# Import the library pygame
import pygame
from pygame.locals import *

##background
bg = pygame.image.load("background.png")        # Just a sky blue background
bg = pygame.transform.scale(bg, (1280, 720))    # Made it fit the screen size
 
# Take colors input
YELLOW = (255, 255, 0)
BLUE = (0, 0, 255)
WHITE = (255, 255, 255)
RED   = (255,   0,   0)
BLACK = (0, 0, 0)

 
# Construct the GUI game
pygame.init()
 
# Set dimensions of game GUI
w, h = 1280, 720
screen = pygame.display.set_mode((w, h))
 
# Take image as input
img = pygame.image.load("car.png")
img.convert()
 
# Draw rectangle around the image
rect = img.get_rect()
rect.center = w//2, h//2
 
# Set running and moving values
running = True
moving = False

# Setting what happens when game
# is in running state

while running:
    screen.blit(bg, (0,0))          # Start the background at the upper left
    
    for event in pygame.event.get():
        # Close if the user quits the
        # game
        if event.type == QUIT:
            running = False
 
        # Making the image move
        elif event.type == MOUSEBUTTONDOWN:
            if rect.collidepoint(event.pos):
                moving = True
 
        # Set moving as False if you want
        # to move the image only with the
        # mouse click
        # Set moving as True if you want
        # to move the image without the
        # mouse click
        elif event.type == MOUSEBUTTONUP:
            moving = False
 
        # Make your image move continuously
        elif event.type == MOUSEMOTION and moving:
            rect.move_ip(event.rel)

    
 
   # Set screen color and image on screen
    #screen.fill(WHITE)
    screen.blit(img, rect)                  # Changing the indentation seems to make it visible
 
    # Construct the border to the image
    #pygame.draw.rect(screen, BLACK, rect, 2)
 
    # Update the GUI pygame
    pygame.display.update()
    
    ##trying to draw the background
   
 
# Quit the GUI game
pygame.quit()

Following are the highligts.

I utilized a "png" file I had for a sky blue background which was loaded and then transformed to fill the entire 1280 x 720 screen.
The placement of the background was set to start at the upper left; if your background image needs to be centered or oriented differently, keep that in mind.
The indentation of the load of the image to be moved (in my case a "car") was revised to be a part of the "while" loop and not a part of the "for" loop; otherwise, the image only flashes and appears during the handling of the mouse events.

After those tweaks, the image appeared and was moved around by the mouse.

The takeaway from this is that you would want your image to be handled within your drawing/blit cycle. That appears to be where you got tripped up.

Give that a try.

Trying to a get a movable image with a PNG background using pygame

1 Answers1