How can I Make appear Button above a Pygame Circle?

Question

I have been trying for a long time to try to put a button above a multicoloured circle but I can't, when I do it the button is covered by the circle, I have tried several things but none of them work.

import pygame, math
from pygame import font
pygame.init()
def lerp_color(colors, value):
    fract, index = math.modf(value)
    color1 = pygame.Color(colors[int(index) % len(colors)])
    color2 = pygame.Color(colors[int(index + 1) % len(colors)])
    return color1.lerp(color2, fract)

def button(screen, position, text):
    font = pygame.font.SysFont("Anton", 50)
    text_render = font.render(text, 1, (0, 0, 0))
    x, y, w , h = text_render.get_rect()
    x, y = position
    pygame.draw.line(screen, (150, 150, 150), (x, y), (x + w , y), 5)
    pygame.draw.line(screen, (150, 150, 150), (x, y - 2), (x, y + h), 5)
    pygame.draw.rect(screen, (100, 100, 100), (x, y, w , h))
    return screen.blit(text_render, (x, y))

pygame.init()
screen = pygame.display.set_mode((800, 800)) 
screen2 = pygame.display.set_mode((800,800))
clock = pygame.time.Clock()
start_time = pygame.time.get_ticks()
b1 = button(screen,(310,200), "Faster")

variable = 1



run = True
while run:
    
    clock.tick(60)
    
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False
        if event.type == pygame.KEYDOWN:
            start_time = pygame.time.get_ticks()

    screen.blit(b1)
    colors = [(000,000,000), (255,0,0), (000,255,000), (000,000,255), (255,0,255), (000,255,255), (255,255,000), (255,000,255)]
    value = (pygame.time.get_ticks() - start_time) / 1000
    current_color = lerp_color(colors, value)
    pygame.draw.circle(screen2, current_color, screen.get_rect().center, 500) 


    print(value)
    
    pygame.display.flip()

pygame.quit()
exit()

user_5577765 · Answer

You must draw the button after the circle:

run = True
while run:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False
        if event.type == pygame.KEYDOWN:
            start_time = pygame.time.get_ticks()

    colors = [(000,000,000), (255,0,0), (000,255,000), (000,000,255), (255,0,255), (000,255,255), (255,255,000), (255,000,255)]
    value = (pygame.time.get_ticks() - start_time) / 1000
    print(value)
    current_color = lerp_color(colors, value)
    
    screen.fill(0)
    pygame.draw.circle(screen2, current_color, screen.get_rect().center, 500) 
    button(screen,(310,200), "Faster")
    pygame.display.flip()

Note, The instruction screen.blit(b1) does not do what you expect. It only cuases an error. blit does not return an object, it only returns the rectangular area that was affected by the operation. Therefore the button returns a pygame.Rect object and bl is just a rectangle.

How can I Make appear Button above a Pygame Circle?

1 Answers