How to make a translucent image in pygame dynamically

Question

I'm working on custom gui components within pygame, and when making the slider component, I am giving the slider a Draw(parentSurface) function which draws the slider on to the parent surface at it's stored location.

Now this works, but the slider stores two images:

• a slide image that is dynamically made from tiles to match the slider's given length, measuring with a width of the given length, and a height of 3 pixels; and
• the "select" image, which is just a small 8x12 indicator to show where the slider is.

The problem is that when I Draw(parentSurface) I do this:

def Draw(self, parsurf):
    '''draw the element on parsurf at the given location'''
    w1 = self.slider_img.get_width()
    h1 = self.slider_img.get_height()
    w2 = self.select_img.get_width()
    h2 = self.select_img.get_height()
    self.image = pygame.Surface((w1, h2 + h1))
    self.image = ColorMod.Transparency(self.image, 0)
    self.image.blit(self.slider_img, (0, self.image.get_height()-h1))
    x = self.value / self.conversionratio
    self.image.blit(self.select_img, (x- w2/2, 0))
    if self.debug_on:
        print "attempting to blit to the given surface"
    parsurf.blit(self.image, self.loc)

However, it blits with a black background on the self.image. I want that to be translucent, so that the background can show through where there is nothing on self.image. Should I just drop having self.image and draw the self.slider_img and self.select_img directly to the parent surface?

Answer 1

You have to make the image transparent by calling self.image.set_alpha((0,0,0)) Also in self.image = pyame.Surface you need to change it to self.image = pygame.Surface((width, height), pygame.SRCALPHA) I'd also recommend getting rid of self.image = ColorMod.Transparency...