2

I have the following code below that is a class for a button taken from another post. I was wondering if I can change the opacity of the background of the button without changing the opacity of the text on it. How can I achieve this?

Code:

import pygame

pygame.init()
font = pygame.font.SysFont('Microsoft New Tai Lue', 23)


class Button(pygame.sprite.Sprite):
    # 1) no need to have 4 parameters for position and size, use pygame.Rect instead
    # 2) let the Button itself handle which color it is
    # 3) give a callback function to the button so it can handle the click itself 
    def __init__(self, color, color_hover, rect, callback, text='', outline=None):
        super().__init__()
        self.text = text
        # a temporary Rect to store the size of the button
        tmp_rect = pygame.Rect(0, 0, *rect.size)


        self.org = self._create_image(color, outline, text, tmp_rect)
        self.hov = self._create_image(color_hover, outline, text, tmp_rect)


        self.image = self.org

        self.rect = rect
        self.callback = callback



    def _create_image(self, color, outline, text, rect):
        img = pygame.Surface(rect.size)
        #img.set_alpha(110)
        if outline:
            img.fill(outline)
            img.fill(color, rect.inflate(-4, -4))
        else:
            img.fill(color)

        # render the text once here instead of every frame
        if text != '':
            text_surf = font.render(text, 1, pygame.Color('white'))
            text_rect = text_surf.get_rect(center=rect.center)
            img.blit(text_surf, text_rect)
        return img

    def update(self, events):
        # here we handle all the logic of the Button
        pos = pygame.mouse.get_pos()
        hit = self.rect.collidepoint(pos)
        self.image = self.hov if hit else self.org
        for event in events:
            if event.type == pygame.MOUSEBUTTONDOWN and hit:
                self.callback(self)

Any help is appreciated.

ahmedquran12
  • 164
  • 1
  • 6
  • 19

1 Answers1

1

You need to create a pygame.Surface with an alpha channel per pixel. This can be done by setting the pygame.SRCALPHA flag:

class Button(pygame.sprite.Sprite):
    # [...]

    def _create_image(self, color, outline, text, rect):
        
        img = pygame.Surface(rect.size, pygame.SRCALPHA) # <---
        
        if outline:
            img.fill(outline)
            img.fill(color, rect.inflate(-4, -4))
        else:
            img.fill(color)

Use a semitransparent color for the background of the button:

color = (255, 0, 0, 127) # just for example red color with ~50% transparency

See also Transparent text

Minimal example:

repl.it/@Rabbid76/PyGame-TextTransparentBackground

import pygame

pygame.init()
window = pygame.display.set_mode((400, 400))
clock = pygame.time.Clock()

background = pygame.Surface(window.get_size())
ts, w, h, c1, c2 = 50, *window.get_size(), (128, 128, 128), (64, 64, 64)
tiles = [((x*ts, y*ts, ts, ts), c1 if (x+y) % 2 == 0 else c2) for x in range((w+ts-1)//ts) for y in range((h+ts-1)//ts)]
for rect, color in tiles:
    pygame.draw.rect(background, color, rect)

font = pygame.font.SysFont(None, 80)
text = font.render("Button", True, (255, 255, 255))

button = pygame.Surface((320, 120), pygame.SRCALPHA)
button.fill((255, 255, 255))
button.fill((196, 127, 127, 127), button.get_rect().inflate(-4, -4))
button.blit(text, text.get_rect(center = button.get_rect().center))

run = True
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False          

    window.blit(background, (0, 0))
    window.blit(button, button.get_rect(center = window.get_rect().center))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()
exit()
Rabbid76
  • 202,892
  • 27
  • 131
  • 174