How to drag multiple images in PyGame?

Question

import pygame
from pygame.locals import *

pygame.display.init()
screen = pygame.display.set_mode((1143,677 ))
img = pygame.image.load(r"C:\Users\ga-sa\Downloads\As.png")

imgPos = pygame.Rect((0, 0), (0, 0))

LeftButton = 0
while 1:
 for e in pygame.event.get():
    if e.type == QUIT: exit(0)
    if e.type == MOUSEMOTION:
        if e.buttons[LeftButton]:
            rel = e.rel
            imgPos.x += rel[0]
            imgPos.y += rel[1]
screen.fill(0)
screen.blit(img, imgPos)
pygame.display.flip()
pygame.time.delay(30)

i tried to maket this with multiple images and always the images overlap and a can move just one image so tried this :

 import pygame
 from pygame.locals import *

 pygame.display.init()
 screen = pygame.display.set_mode((1143,677 ))
 img = pygame.image.load(r"C:\Users\ga-sa\Downloads\As.png")
 img1 = pygame.image.load(r"C:\Users\ga-sa\Downloads\03.png")
 imgPos = pygame.Rect((0, 0), (0, 0))
 imgPos1 = pygame.Rect((1, 1), (1, 1))
 LeftButton = 0
 while 1:
     for e in pygame.event.get():
    if e.type == QUIT: exit(0)
    if e.type == MOUSEMOTION:
        if e.buttons[LeftButton]:
            rel = e.rel
            imgPos.x += rel[0]
            imgPos.y += rel[1]
screen.fill(0)
screen.blit(img, imgPos)
screen.blit (img1, imgPos1)
pygame.display.flip()
pygame.time.delay(30)

so the images overlaps and a can move the second image , i want to make the two images moves with mouse , i wish move the images separately

Answer 1

The unit in PyGame is pixel. Your objects overlap because the difference in position for vertical and horizontal is only one pixel.

imgPos = pygame.Rect((0, 0), (0, 0))
imgPos1 = pygame.Rect((1, 1), (1, 1))

Increase the distance of the objects and set the size of the rectangles dependent on the size of the corresponding image. For instnace

imgPos = pygame.Rect((0, 0), img.get_size())
offsetX = img.get_width()
imgPos1 = pygame.Rect((offsetX, 0), img1.get_size())

Alternatively it is possible to generate a pygame.Rect object form the pygame.Surface by get_rect. The position of the rectangle has to be set by a keyword argument:

imgPos = img.get_rect(topleft = (0, 0))
imgPos1 = img1.get_rect(topleft = (img.get_width(), 0))

---

If you want to select the image to be moved, you need to add a variable that indicates the currently selected image:

current_image = None

When an image is clicked, the change current_image. Use collidepoint() to verify if the mouse has clicked on an image:

if e.type == pygame.MOUSEBUTTONDOWN:
    if imgPos.collidepoint(e.pos):
        current_image = 0
    elif imgPos1.collidepoint(e.pos):
        current_image = 1
    else: 
        current_image = None

Move img if current_image == 0 and move img1 if current_image == 1:

if e.type == MOUSEMOTION:
    if e.buttons[LeftButton]:
        rel = e.rel
        if current_image == 0:
            imgPos.x += rel[0]
            imgPos.y += rel[1]
        elif current_image == 1:
            imgPos1.x += rel[0]
            imgPos1.y += rel[1]

---

Minimal example:

import pygame
from pygame.locals import *

pygame.display.init()
screen = pygame.display.set_mode((1143,677 ))

img = pygame.image.load(r"C:\Users\ga-sa\Downloads\As.png")
img1 = pygame.image.load(r"C:\Users\ga-sa\Downloads\03.png")
imgPos = img.get_rect(topleft = (20, 20))
imgPos1 = img1.get_rect(topleft = (60, 20))
current_image = None

LeftButton = 0
while 1:
    for e in pygame.event.get():
        if e.type == QUIT:
            pygame.quit()
            exit(0)

        if e.type == pygame.MOUSEBUTTONDOWN:
            if imgPos.collidepoint(e.pos):
                current_image = 0
            elif imgPos1.collidepoint(e.pos):
                current_image = 1
            else: 
                current_image = None

        if e.type == MOUSEMOTION:
            if e.buttons[LeftButton]:
                rel = e.rel
                if current_image == 0:
                    imgPos.x += rel[0]
                    imgPos.y += rel[1]
                elif current_image == 1:
                    imgPos1.x += rel[0]
                    imgPos1.y += rel[1]
   
    screen.fill(0)
    screen.blit(img, imgPos)
    screen.blit (img1, imgPos1)
    pygame.display.flip()
    pygame.time.delay(30)

---

See Creating multiple sprites with different update()'s from the same sprite class in Pygame for dragging pygame.sprite.Sprite objects.