Search code examples
pythonpygamegradientlinear-gradientsrect

How to add color gradient to rectangle in Pygame?


Info: I am drawing a rectangle using pygame but would like to have a gradient added to the rectangle so that it looks like there is a shadow.

Right now here is my code:

light_green = (0, 255, 0)
dark_green = (0, 100, 0)

pygame.draw.rect(screen, light_green, rect_dims) # Draws a rectangle without a gradient


Question: I would like to create a linear transition between light green and dark green without drawing a bunch of lines stacked on top of each other (because that is very slow), so is there a way that I would be able to do this using pygame?


Solution

  • Here's a quick test of using smoothscale. It starts off with a 2x2 coloured bitmap, then scales it arbitrarily before drawing the result to the screen.

    While PyGame will use hardware (if available) to do the stretch, I wouldn't expect this to be very fast.

    import pygame
      
    # Window size
    WINDOW_WIDTH    = 400
    WINDOW_HEIGHT   = 400
    
    ### initialisation
    pygame.init()
    window = pygame.display.set_mode( ( WINDOW_WIDTH, WINDOW_HEIGHT ) )
    pygame.display.set_caption("Gradient Rect")
    
    def gradientRect( window, left_colour, right_colour, target_rect ):
        """ Draw a horizontal-gradient filled rectangle covering <target_rect> """
        colour_rect = pygame.Surface( ( 2, 2 ) )                                   # tiny! 2x2 bitmap
        pygame.draw.line( colour_rect, left_colour,  ( 0,0 ), ( 0,1 ) )            # left colour line
        pygame.draw.line( colour_rect, right_colour, ( 1,0 ), ( 1,1 ) )            # right colour line
        colour_rect = pygame.transform.smoothscale( colour_rect, ( target_rect.width, target_rect.height ) )  # stretch!
        window.blit( colour_rect, target_rect )                                    # paint it
    
    
    ### Main Loop
    clock = pygame.time.Clock()
    finished = False
    while not finished:
    
        # Handle user-input
        for event in pygame.event.get():
            if ( event.type == pygame.QUIT ):
                finished = True
    
        # Update the window
        window.fill( ( 0,0,0 ) )
        gradientRect( window, (0, 255, 0), (0, 100, 0), pygame.Rect( 100,100, 100, 50 ) )
        gradientRect( window, (255, 255, 0), (0, 0, 255), pygame.Rect( 100,200, 128, 64 ) )
        pygame.display.flip()
    
        # Clamp FPS
        clock.tick_busy_loop(60)
    
    pygame.quit()