How to update text appearing on button click in pygame module

Question

I was making a code where on clicking a button, a string will be chosen randomly from myList and be displayed. I am doing this using pygame module. The problem here is that the text does not remain, it just flashes for one frame. Here's the code:

import pygame
import random

pygame.init()
size = (500, 400)
screen = pygame.display.set_mode(size)
pygame.display.set_caption("Project")
bg = pygame.image.load("bg.jpg")

# declaring variables and lists
white = (255, 255, 255)
black = (0, 0, 0)
light_grey = (224, 224, 224)
dark_grey = (200, 200, 200)

text = pygame.font.SysFont("Agency FB", 20)
myList = ["China", "Italy", "Russia", "India", "USA", "Canada", "France", "Japan", "Brazil", "Egypt"]
# text for button
button_text = text.render("Country", True, black)

rb = random.choice(myList)
font = pygame.font.SysFont("Agency FB", 50)
bFont = font.render(str(rb), True, white)

var = True
while var:
    screen.blit(bg, (0, 0))
    # store mouse position
    mouse = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            var = False
        # button click
        if event.type == pygame.MOUSEBUTTONDOWN:
            # pick one from list and blit
            if 50 <= mouse[0] <= 50 + 75 and 350 <= mouse[1] <= 350 + 35:
                screen.blit(bFont, (50, 100))
    # make button
    if 50 <= mouse[0] <= 50 + 75 and 350 <= mouse[1] <= 350 + 35:
        pygame.draw.rect(screen, dark_grey, (50, 350, 75, 35), 0)
    else:
        pygame.draw.rect(screen, light_grey, (50, 350, 75, 35), 0)
    screen.blit(button_text, (55, 355))

    pygame.display.update()

How can I get the text to be there and not vanish in the next frame?

score 1 · Accepted Answer · answered Dec 06 '20 at 07:32

Do not create bFont before the main application loop, but initialize it with None:

bFont = None

Choose and render a random string when the button is pressed:

while var:
    
    # [...]
    for event in pygame.event.get():
        # [...]

        # button click
        if event.type == pygame.MOUSEBUTTONDOWN:
            # pick one from list and blit
            button_rect = pygame.Rect(50, 350, 75, 35)
            if button_rect.collidepoint(event.pos):
                rb = random.choice(myList)
                bFont = font.render(str(rb), True, white)

Draw the text in the main application loop if bFont is set:

var = True
while var:
    # [...]

    if bFont:
        screen.blit(bFont, (50, 100))
    pygame.display.update()

Complete example:

import pygame
import random

pygame.init()
size = (500, 400)
screen = pygame.display.set_mode(size)
pygame.display.set_caption("Project")
bg = pygame.image.load("bg.jpg")

# declaring variables and lists
white = (255, 255, 255)
black = (0, 0, 0)
light_grey = (224, 224, 224)
dark_grey = (200, 200, 200)

text = pygame.font.SysFont("Agency FB", 20)
myList = ["China", "Italy", "Russia", "India", "USA", "Canada", "France", "Japan", "Brazil", "Egypt"]
# text for button
button_text = text.render("Country", True, black)
button_rect = pygame.Rect(50, 350, 75, 35)

font = pygame.font.SysFont("Agency FB", 50)
bFont = None 

var = True
while var:
    # store mouse position
    mouse = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            var = False
        # button click
        if event.type == pygame.MOUSEBUTTONDOWN:
            # pick one from list and blit
            if button_rect.collidepoint(event.pos):
                rb = random.choice(myList)
                bFont = font.render(str(rb), True, white)
    
    screen.blit(bg, (0, 0))

    # make button
    if button_rect.collidepoint(mouse):
        pygame.draw.rect(screen, dark_grey, (50, 350, 75, 35), 0)
    else:
        pygame.draw.rect(screen, light_grey, (50, 350, 75, 35), 0)
    screen.blit(button_text, (55, 355))

    if bFont:
        screen.blit(bFont, (50, 100))
    pygame.display.update()

Ibrahim · Answer 2 · 2020-12-07T10:52:18.330

Try using another boolean var

if event.type == pygame.MOUSEBUTTONDOWN:
            if 50 <= mouse[0] <= 50 + 75 and 350 <= mouse[1] <= 350 + 35:
                show_text = True
if show_text:
        time_check = pygame.time.get_ticks ()
        b_font = font.render (random.choice (my_list), True,(255,255,255))
        screen.blit (b_font, (50, 100)
        if time_check >= 2000:   #2000 miliseconds
               show_text = False
               time_check = 0

Here it will display your text for two seconds

How to update text appearing on button click in pygame module

2 Answers2