Changing colour of a surface without overwriting transparency

Question

I want to change the colour of a rect dynamically during runtime. Currently set_colour is filling all of the pixels of the surface with a single colour value. This works, but an issue arises when a method like set_outline is called, which modifies the transparency of the surface.

class Rectangle(pg.sprite.Sprite):
    def __init__(self):
        pg.sprite.Sprite.__init__(self)
        self.original_image = pg.Surface((10, 10))
        self.image = self.original_image
        self.rect = self.image.get_rect()

    def set_colour(self, colour_value):
        self.colour = colour_value
        self.image.fill(self.colour)
        self.original_image.fill(self.colour)

    def set_outline(self, thickness):
        self.thickness = thickness
        size = self.image.get_size()

        calc = thickness/100
        p_width, p_height = size[0], size[1]
        width, height = size[0]*calc, size[1]*calc

        self.image = self.image.convert_alpha()

        center_x, center_y = (p_width//2)-(width//2), (p_height//2)-(height//2)
        pg.draw.rect(self.image, (0, 0, 0, 0), (center_x, center_y, width, height))

Now if I try to change the colour of that rect during runtime, it will overwrite all of those transparent pixels created in set_outline.

Is there a way to mask or blend the colour on to the rect, so it's not replacing any of the transparency?

Answer 1

You can achieve this by 2 steps. self.original_image contains the filled rectangle with the desired color:

self.original_image.fill(self.colour)

Generate a completely white rectangle and transparent areas. Blend the rectangle with (self.image) and the blend mode BLEND_MAX (see pygame.Surface.blit):

whiteTransparent = pg.Surface(self.image.get_size(), pg.SRCALPHA)
whiteTransparent.fill((255, 255, 255, 0))
self.image.blit(whiteTransparent, (0, 0), special_flags=pg.BLEND_MAX)

Now the rectangle is completely white, but the transparent areas are kept. Use the blend mode BLEND_MULT and blend self.original_image with self.image to get the desired result:

self.image.blit(self.original_image, (0, 0), special_flags=pg.BLEND_MULT)

---

Minimal example: repl.it/@Rabbid76/PyGame-ChangeColorOfSpriteArea

import pygame as pg

class Rectangle(pg.sprite.Sprite):
    def __init__(self):
        pg.sprite.Sprite.__init__(self)
        self.original_image = pg.Surface((150, 150))
        self.image = self.original_image
        self.rect = self.image.get_rect(center = (150, 150))

    def set_colour(self, colour_value):
        self.colour = colour_value
        self.original_image.fill(self.colour)

        whiteTransparent = pg.Surface(self.image.get_size(), pg.SRCALPHA)
        whiteTransparent.fill((255, 255, 255, 0))
        self.image.blit(whiteTransparent, (0, 0), special_flags=pg.BLEND_MAX)

        self.image.blit(self.original_image, (0, 0), special_flags=pg.BLEND_MULT)

    def set_outline(self, thickness):
        self.thickness = thickness
        size = self.image.get_size()

        calc = thickness/100
        p_width, p_height = size[0], size[1]
        width, height = size[0]*calc, size[1]*calc

        self.image = self.image.convert_alpha()

        center_x, center_y = (p_width//2)-(width//2), (p_height//2)-(height//2)
        pg.draw.rect(self.image, (0, 0, 0, 0), (center_x, center_y, width, height))

pg.init()
window = pg.display.set_mode((300, 300))
clock = pg.time.Clock()

sprite = Rectangle()
sprite.set_colour((255, 0, 0, 255))
sprite.set_outline(50)

group = pg.sprite.Group(sprite)

colorVal = 0
colorAdd = 5
run = True
while run:
    clock.tick(60)
    for event in pg.event.get():
        if event.type == pg.QUIT:
            run = False

    sprite.set_colour((min(colorVal, 255), max(0, min(511-colorVal, 255)), 0, 255))
    colorVal += colorAdd
    if colorVal <= 0 or colorVal >= 511:
        colorAdd *= -1

    window.fill(0)
    group.draw(window)
    pg.display.flip()