Overlapping partially transparent shapes

Question

If I draw any shape onto a surface (with SRCALPHA flag on) in a partially transparent colour it completely replaces what was underneath it, instead of overlapping like you would expect in image editors.

How can I make the shapes overlap properly?

Answer 1

You could use blit with appropriate BLEND_* values (keeping the shapes as separate surfaces, for integrity and editing, and only blitting them for display purposes).

Answer 2

Alpha on its own is just an extra 'value' that can serve a purpose. It just so happens that the purpose is typically (but not always) transparency (other uses include reflectance, specular highlighting and even an approach for faking HDR).

You need to specify that you want it to blend (and the equation it should use to do it). A simple Google search for "pygame blend mode" shows a few good resources.

As Alex has pointed out, blit takes a Blending mode as a parameter. This StackOverflow question provides more information.

Answer 3

As noted, the draw functions in PyGame don't actually do blending the way you might expect. From the PyGame documentation:

Most of the arguments accept a color argument that is an RGB triplet. These can also accept an RGBA quadruplet. The alpha value will be written directly into the Surface if it contains pixel alphas, but the draw function will not draw transparently.

What you'll probably want to do is essentially what Alex Martelli said--create an intermediate software surface with an alpha channel, draw your shape onto that surface, then blit with blending onto the final surface. If you've used PyGame's font rendering, notice that it works roughly the same, except that Font.render creates the temporary surface for you.

I'm a bit rusty with Python and PyGame these days, but here's a quick example that hopefully doesn't have too many mistakes:

# returns a surface with the circle drawn onto it
def render_transparent_circle(color, radius, width=0):
    size = radius * 2
    temp_surf = pygame.Surface((size, size), SRCALPHA)
    temp_surf.fill(Color(0, 0, 0, 0))
    pygame.draw.circle(temp_surf, color, (radius, radius), radius, width)
    return temp_surf

# draw a half-opaque blue circle of radius 30 to the display at point (50, 100)
def test():
    transp_blue = Color(0, 0, 255, 128)
    screen = pygame.display.get_surface()
    circle = render_transparent_circle(transp_blue, 30)
    screen.blit(circle, (50, 100))

p.s. -- If you're going to display the same shape multiple times, you may want to consider caching the intermediate surface (but don't forget to profile to find out if it helps).