3

estoy haciendo un juego de "dialogos" porque me encuentro aprendiendo python/pygame y me encontré con que hay unas esquinas que no consigo sacar. dejo la imagen donde se ve los bordes,estoy haciendo un cuadro de texto y en el mismo aplico una imagen para que funcione como textura. captura del juego

def draw_dialogue_box(x, y, width, height, color=(0, 0, 0), alpha=200):
"""
Dibuja un cuadro de diálogo con bordes redondeados y un fondo texturizado.
Args:
    x (int): Coordenada x de la posición del cuadro.
    y (int): Coordenada y de la posición del cuadro.
    width (int): Ancho del cuadro.
    height (int): Alto del cuadro.
    color (tuple): Color del cuadro en formato RGB.
    alpha (int): Nivel de transparencia del cuadro (0-255).
"""
box_surf = pygame.Surface((width, height), pygame.SRCALPHA)
box_surf.set_alpha(alpha)

# Dibuja un rectángulo redondeado
rect = pygame.Rect(0, 0, width, height)
pygame.draw.rect(box_surf, color, rect, border_radius=20)

# Añadir una textura
texture = pygame.image.load('assets/texture.jpg')
texture = pygame.transform.scale(texture, (width, height))
texture.set_alpha(70)  # Ajusta la transparencia de la textura
box_surf.blit(texture, (0, 0))

screen.blit(box_surf, (x, y))

Esta es la función del código que se encarga de generar un rectángulo para los diálogos y aplica la textura al rectángulo, no consigo entender / solucionar el tema de las esquinas

1 respuesta 1

4

Según parece la dificultad que estás teniendo es redondear la textura en si. Una forma típica de recortar una imagen es superponiendo otra imagen a modo de máscara. Por ejemplo, puedes generar una imágen con todos los canales de color al máximo (255, 255, 255, 255) para los pixeles que conforman la forma deseada y el resto de pixeles trasparentes. Al fundir ambas, para cada par de pixeles superpuestos el valor para cada canal de color del pixel final será el valor mínimo de los pixeles a fundir en ese canal, por ejemplo:

  R    G    B    A
(142, 210,  14, 103) -
                     |--> (93, 210, 14, 24)
( 93, 217, 187,  24) - 

Esto se puede conseguir pasando la bandera pygame.BLEND_RGBA_MIN a blit().

En tu caso puedes generar tu caja con la textura, trasparencia, etc que quieras y al final aplicas la máscara para redondear, que será un rectángulo blanco opaco excepto para las esquinas redondeadas, que seran totalmente transparentes:

def draw_dialogue_box(x, y, width, height, color=(0, 0, 0), alpha=200):
    """
    Dibuja un cuadro de diálogo con bordes redondeados y un fondo texturizado.
    Args:
        x (int): Coordenada x de la posición del cuadro.
        y (int): Coordenada y de la posición del cuadro.
        width (int): Ancho del cuadro.
        height (int): Alto del cuadro.
        color (tuple): Color del cuadro en formato RGB.
        alpha (int): Nivel de transparencia del cuadro (0-255).
    """
    
    rect = pygame.Rect(0, 0, width, height)
    
    box_surf = pygame.Surface((width, height), pygame.SRCALPHA)
    
    rounded_mask = box_surf.copy()
    pygame.draw.rect(rounded_mask, (255, 255, 255), rect, border_radius=20)
    
    box_surf.set_alpha(alpha)
    pygame.draw.rect(box_surf, color, rect)
    
    texture = pygame.image.load('assets/texture.jpg')
    texture = pygame.transform.scale(texture, (width, height)).convert_alpha()
    texture.set_alpha(70)
    
    box_surf.blits((
        (texture, (0, 0), None, pygame.BLEND_ALPHA_SDL2),
        (rounded_mask, (0, 0), None, pygame.BLEND_RGBA_MIN)
    ))
        
    screen.blit(box_surf, (x, y))

Esta proceso no solo puede servir para recortar/redondear los bordes de una imagen dada, la máscara puede tener la forma que queramos (puede ser cualquier imagen, no solo una generada proceduralmente en PyGame) permitiendo "extraer" las partes que queramos de otra imagen. De hecho el uso de máscaras y mapas es de uso común para muchas más cosas en el ámbito de la edición de imagen, modelado/texturizado 3D, etc.

Un ejemplo reproducible:

import pygame


FRAMERATE = 60
SCREEN_SIZE = 800, 500
PURPLE = 128, 0, 128
FIREBREAK = 178, 34, 34
DARKORANGE = 255, 140, 0
WHITE = 255, 255, 255


pygame.init()
screen = pygame.display.set_mode(SCREEN_SIZE)

background = pygame.image.load("landscape.png")

texture = pygame.transform.scale(
    pygame.image.load("Microscheme.png"),
    (128, 128)
).convert_alpha()
texture.set_alpha(120)

rect_surf = pygame.Surface((512, 128), pygame.SRCALPHA)
rect_rounded_mask = rect_surf.copy()
pygame.draw.rect(rect_rounded_mask, WHITE,  rect_surf.get_rect(), border_radius=20)
rect_surf.set_alpha(150)
pygame.draw.rect(rect_surf, PURPLE, rect_surf.get_rect())
font = pygame.freetype.SysFont(pygame.freetype.get_default_font(), 53)
text_surf, _ = font.render('Gatitos poligonales', WHITE)
rect_surf.blits((
    (texture, (0, 0), None, pygame.BLEND_ALPHA_SDL2),
    (texture, (128, 0), None, pygame.BLEND_ALPHA_SDL2),
    (texture, (256, 0), None, pygame.BLEND_ALPHA_SDL2),
    (texture, (384, 0), None, pygame.BLEND_ALPHA_SDL2),
    (rect_rounded_mask, (0, 0), None, pygame.BLEND_RGBA_MIN),
    (text_surf, text_surf.get_rect(center=(256, 64)), None, pygame.BLEND_ALPHA_SDL2),
    ))

hex_surf = pygame.Surface((128, 128), pygame.SRCALPHA)
hex_mask = hex_surf.copy()
pygame.draw.polygon(
    hex_mask,
    (255, 255, 255),
    [(96, 9), (32, 9), (0, 64), (32, 119), (96, 119), (128, 64)],
    0
)
hex_surf.set_alpha(120)
pygame.draw.rect(hex_surf, FIREBREAK, (0, 0, 128, 128))
hex_surf.blits((
    (texture, (0, 0), None, pygame.BLEND_ALPHA_SDL2),
    (hex_mask, (0, 0), None, pygame.BLEND_RGBA_MIN)
    ))

cat_surf = pygame.Surface((128, 128), pygame.SRCALPHA)
cat_mask = cat_surf.copy()
pygame.draw.polygon(
    cat_mask,
    (255, 255, 255),
    [(103, 0), (108, 12), (123, 21), (124, 31), (128, 34), (128, 37), (122, 43),
    (110, 45), (110, 51), (116, 58), (116, 77), (103, 102), (110, 119),
    (116, 119), (118, 121), (118, 124), (114, 128), (103, 128), (90, 105),
    (75, 118), (92, 118), (97, 123), (97, 126), (95, 128), (23, 128), (6, 112),
    (0, 94), (14, 55), (3, 39), (12, 34), (27, 47), (27, 57), (11, 92), (19, 114),
    (23, 115), (22, 93), (26, 78), (72, 40), (79, 21), (92, 12), (92, 8)],
    0
)
cat_surf.set_alpha(200)
pygame.draw.rect(cat_surf, DARKORANGE, (0, 0, 128, 128))
cat_surf.blits((
    (texture, (0, 0), None, pygame.BLEND_ALPHA_SDL2),
    (cat_mask, (0, 0), None, pygame.BLEND_RGBA_MIN)
    ))

flip_cat_surf = pygame.transform.flip(cat_surf, True, False) 


clock = pygame.time.Clock()
running = True
while running:
    clock.tick(FRAMERATE)
    for event in pygame.event.get():
        match event.type:
            case pygame.QUIT:
                running = False

    screen.blit(background, (0, 0))
    screen.blit(rect_surf, (144, 250))
    screen.blit(cat_surf, (144, 118))
    screen.blit(hex_surf, (336, 80))
    screen.blit(flip_cat_surf, (528, 118))
    pygame.display.update()

pygame.quit()

Los assets son dos imágenes aleatorias de opengameart.org:

1
  • 1
    Funciono, muchas gracias. Commented el 4 ago. a las 19:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.