Método get_rect de Pygame

Salman Mehmood 21 junio 2023
  1. Use el método get_rect de Pygame en Python
  2. la solución a la imagen duplicada al usar Pygame get_rect
Método get_rect de Pygame

El objetivo principal de este artículo es demostrar cómo manipular una imagen y moverla por la pantalla utilizando el método get_rect() de la biblioteca Pygame.

Use el método get_rect de Pygame en Python

Mientras se trabaja en un proyecto o juego en Pygame, uno debe poder manipular la posición de la imagen en la pantalla. Por ejemplo, si queremos mover al jugador por la pantalla, debe cambiar su posición en la pantalla a medida que el jugador presiona un botón determinado.

Considere el siguiente ejemplo:

import pygame
import sys
from pygame.locals import *

pygame.init()

# Set up the window
WIN = pygame.display.set_mode((400, 400))

# Load two images
imgOne = pygame.image.load("images\\img 1.jpg")
imgTwo = pygame.image.load("images\\img 2.jpg")

# Fill bg with black color
WIN.fill((0, 0, 0))

# Place the images
WIN.blit(imgOne, (0, 0))
WIN.blit(imgTwo, (300, 0))

pygame.display.update()

# Obtain the rectangle for each image
imgOneRect = imgOne.get_rect()
imgTwoRect = imgTwo.get_rect()

imgTwoRect.x = imgOneRect.x
imgTwoRect.y = imgOneRect.y

WIN.blit(imgTwo, (imgTwoRect.x, imgTwoRect.y))
pygame.display.update()

while True:
    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()

Salida cuando se cargan las dos imágenes:

diagrama de problema - cargar imágenes

Salida después de mover la segunda imagen (azul) encima de la derecha:

diagrama de problema - mover imagen

Como se ve en las imágenes de arriba, estamos tratando de mover la imagen azul sobre la primera imagen. En lugar de obtener la entrada deseada, vemos que la imagen azul se “duplica” y, en lugar de moverse por completo sobre la imagen roja, ahora está presente en su posición original.

Veamos cómo podemos arreglar esto para que la imagen azul no se “duplique”.

la solución a la imagen duplicada al usar Pygame get_rect

Considere el siguiente código:

import pygame
import sys
import time
from pygame.locals import *

pygame.init()

# Set up the window
WIN = pygame.display.set_mode((400, 400))

# Load two images
imgOne = pygame.image.load("images\\img 1.jpg")
imgTwo = pygame.image.load("images\\img 2.jpg")

# Fill bg with black color
WIN.fill((0, 0, 0))

# Place the images
WIN.blit(imgOne, (0, 0))
WIN.blit(imgTwo, (300, 0))

pygame.display.update()

# Make a rect of the size of the image
# set its top-left coords to (300, 0).
img2_rect = imgTwo.get_rect(topleft=(300, 0))

# Set the rect's x value to 0 (x value of red image)
img2_rect.x = 0

# Wait for two seconds
time.sleep(2)

# Redraw the background as a black color
WIN.fill((0, 0, 0))

# Draw the image (blue image) at the coordinates of the rect
WIN.blit(imgTwo, img2_rect)

# Update the screen to show newly drawn images
pygame.display.update()

while True:
    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()

Salida después de cargar las dos imágenes:

Solución: cargar imágenes

Salida después de mover la imagen azul encima de la imagen roja:

Solución: mover imagen

La idea principal para lograr esto es crear un rect utilizando el método get_rect.

La posición inicial del rectángulo será (0,0). Debemos configurarlo en la posición de la imagen que deseamos mover.

Después de inicializar el rectángulo, cambie la posición del rectángulo a donde deseemos que esté la imagen. Después de eso, vuelva a dibujar el fondo de la imagen para asegurarse de que las instancias de imágenes antiguas se eliminen de la instancia de la pantalla.

Una vez que se dibuja el fondo, podemos dibujar la imagen en la ubicación deseada llamando al método blit y pasándolo a la imagen y al rectángulo que creamos anteriormente. La imagen se creará en las coordenadas del rect.

El flujo de trabajo general del programa es el siguiente:

  1. Inicialice Pygame utilizando el método init.

  2. Configure la ventana llamando a display.set_mode, que normalmente se usa para configurar el tamaño de la pantalla, ajustar algunas banderas y la profundidad de color.

  3. Cargue las dos imágenes usando cargar.

  4. Rellene el fondo con el color deseado; en este caso, el fondo se fijó en negro usando la representación r,g,b del negro (0,0,0).

  5. Dibujar las imágenes en pantalla mediante blit, que requiere pasar las coordenadas x e y. Suele darse en forma de tupla.

  6. Utilice el método actualizar para actualizar la pantalla y mostrar cualquier cambio nuevo realizado en el lienzo/pantalla. En este caso, llenará el fondo de color negro y mostrará las dos imágenes cargadas.

  7. Usa el método get_rect para crear un rect, y pasa una tupla de coordenadas para establecer su posición inicial. En caso contrario, normalmente se le asigna la posición (0,0).

    En este caso, establecemos la posición del rectángulo a la posición de la imagen que deseamos mover (imagen azul).

  8. Actualice la posición del rectángulo a la nueva posición que deseamos establecer. Normalmente lo configuramos en la posición donde queremos que se mueva la imagen.

    En este caso, su coordenada x se estableció en la coordenada x de la primera imagen (roja).

  9. Espere unos segundos para ver los cambios después de un retraso. En este caso, el tiempo de espera se fijó en 2 segundos.

  10. Vuelva a dibujar el fondo de la imagen; esto se hace para garantizar que cualquier instancia/píxel de imagen antigua que deba “eliminarse” se sobrescriba con el fondo. En este caso, se configuró en negro.

  11. Después de dibujar el fondo, dibuje la imagen que deseamos mover a la ubicación deseada. Esto se hace usando el método blit.

    En este caso, se pasan dos parámetros. Primero está la imagen que necesita ser dibujada, y el segundo es el “recto” que creamos anteriormente.

    El rect le da a la imagen la posición para ser dibujada en la pantalla. La posición suele tener la forma de coordenadas x-y.

  12. Para garantizar que todos los cambios realizados anteriormente, como mover las imágenes, volver a dibujar el fondo y reflejarse en la pantalla, llamamos a la función pygame.display.update.

  13. El bucle infinito final mantiene la ventana en funcionamiento hasta que se cierra manualmente. Cada evento se recupera utilizando el método pygame.event.get y luego, según el tipo de evento, se realiza una acción.

    Normalmente si queremos capturar pulsaciones de teclas, también se hace aquí. A veces también se lo denomina “bucle principal”.

Salman Mehmood avatar Salman Mehmood avatar

Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.

LinkedIn

Artículo relacionado - Pygame Image