How do I display an image when a button is pressed in pygame?

Question

I'm trying to build the tic tac toe game in Pygame, and I want to display an image of a cross when you press a button (being one of the players). I've done this, and it works because the console returns me the "m1" print, but the image doesn't appear in the pygame screen. If anyone knows what can I do it would be much appreciated :)

import pygame
pygame.init()
screen = pygame.display.set_mode((720, 720))
bg = pygame.image.load("bg.png")
bg = pygame.image.load("bg.png").convert()
cross = pygame.image.load("cross.png")
cross = pygame.transform.scale(cross, (180, 180))
circle = pygame.image.load("circle.png")
ciurcle = pygame.transform.scale(circle, (180, 180))

pygame.display.set_caption("Tic tac toe")
icon = pygame.image.load('icon.png')
pygame.display.set_icon(icon)



running = True
while running:
    
    screen.fill((0,0,0))
    
    m1=pygame.draw.rect(screen, (255,255,255), [60, 60, 180, 180])
    m2=pygame.draw.rect(screen, (255,255,255), [265, 60, 180, 180])
    m3=pygame.draw.rect(screen, (255,255,255), [470, 60, 180, 180])
    m4=pygame.draw.rect(screen, (255,255,255), [60, 265, 180, 180])
    m5=pygame.draw.rect(screen, (255,255,255), [60, 470, 180, 180])
    m6=pygame.draw.rect(screen, (255,255,255), [265, 265, 180, 180])
    m7=pygame.draw.rect(screen, (255,255,255), [265, 470, 180, 180])
    m8=pygame.draw.rect(screen, (255,255,255), [470, 470, 180, 180])
    m9=pygame.draw.rect(screen, (255,255,255), [470, 265, 180, 180])
    
    pygame.display.update()

    mouse_pos = pygame.mouse.get_pos()
    

    for event in pygame.event.get():
        if event.type == pygame.MOUSEBUTTONDOWN and m1.collidepoint(mouse_pos):
            if event.button == 1:
                print("m1")
                screen.blit(cross, (60,60))
                
        
        if event.type == pygame.QUIT:
            pygame.display.quit()
            running = False

You're reblitting your rects every time, so you blit them over the cross, which is only blitted once upon click. You should or reblit the cross every time too, or blit the rects only once upon startup. — The_spider, Mar 19 '22 at 16:56

Rabbid76 · Answer 1 · 2022-03-19T17:12:56.283

I recommend reading Pygame mouse clicking detection and Pygame Tic Tak Toe Logic? How Would I Do It.

You must draw the object in the application loop. Set a Boolean variable when the button is clicked and draw the image depending on the state of the variable:

m = []
for x in [60, 265, 470]:
    for y in [60, 265, 470]:
        m.append(pygame.Rect(x, y, 180, 180))

deaw_cross = False

clock = pygame.time.Clock()
running = True
while running:
    clock.tick(100)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.MOUSEBUTTONDOWN and m[0].collidepoint(event.pos):
            if event.button == 1:
                deaw_cross = True  
 
    screen.fill((0,0,0))
    for rect in m:
        pygame.draw.rect(screen, (255,255,255), rect)
    if draw_cross:
        screen.blit(cross, (60,60))
    pygame.display.update()
                
pygame.display.quit()

Any object that is to be visible in the scene must be drawn after clearing the display (screen.fill((0,0,0))) and before refreshing the display (pygame.display.update()). When you draw something in the event loop, it only becomes visible in that single frame where the event occurs.

How do I display an image when a button is pressed in pygame?

1 Answers1