button class creates another screen to show buttons instead of displaying on exisiting screen

button class creates another screen to show buttons instead of displaying on exisiting screen

Problem Description:

I have created a screen in pygame and want to display command buttons on it. for that i have written a code containing button class but it creates another screen instead of displaying the buttons on the same screen. can anyone tell me where i have gone wrong?

# import the pygame module
import pygame
import sys
pygame.init()
width, height =1550,800
fps = 60
fpsClock = pygame.time.Clock()
screen=pygame.display.set_mode((width, height))
font=pygame.font.SysFont('arial',40)
objects = []
pygame.display.set_caption('image')
imp=pygame.image.load("D:/PycharmProjects/flay high bangtan/flappy birdsprites/background/main page.jpg")
screen.blit(imp,(0,0))
pygame.display.flip()
status=True
while (status):
    for i in pygame.event.get():
        if i.type == pygame.QUIT:
            status=False


#COMMAND BUTTONS
class Button():
    def __init__(self, x, y, width, height, buttonText='Button', onclickFunction=None, onePress=False):
        self.x = x
        self.y = y
        self.width = width
        self.height = height
        self.onclickFunction = onclickFunction
        self.onePress = onePress

        self.fillColors = {
            'normal': '#ffffff',
            'hover': '#666666',
            'pressed': '#333333',
        }

        self.buttonSurface = pygame.Surface((self.width, self.height))
        self.buttonRect = pygame.Rect(self.x, self.y, self.width, self.height)

        self.buttonSurf = font.render(buttonText, True, (20, 20, 20))

        self.alreadyPressed = False

        objects.append(self)

    def process(self):

        mousePos = pygame.mouse.get_pos()

        self.buttonSurface.fill(self.fillColors['normal'])
        if self.buttonRect.collidepoint(mousePos):
            self.buttonSurface.fill(self.fillColors['hover'])

            if pygame.mouse.get_pressed(num_buttons=3)[0]:
                self.buttonSurface.fill(self.fillColors['pressed'])

                if self.onePress:
                    self.onclickFunction()

                elif not self.alreadyPressed:
                    self.onclickFunction()
                    self.alreadyPressed = True

            else:
                self.alreadyPressed = False

        self.buttonSurface.blit(self.buttonSurf, [
            self.buttonRect.width / 2 - self.buttonSurf.get_rect().width / 2,
            self.buttonRect.height / 2 - self.buttonSurf.get_rect().height / 2
        ])
        screen.blit(self.buttonSurface, self.buttonRect)


def myFunction():
    print('Button Pressed')


customButton = Button(30, 30, 400, 100, 'PLAY', myFunction)
customButton = Button(30, 140, 400, 100, 'ABOUT US', myFunction)
customButton = Button(30, 250, 400, 100, 'EXIT', myFunction)

# Game loop.
while True:
    screen.fill((20, 20, 20))
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

    for object in objects:
        object.process()

    pygame.display.flip()
    fpsClock.tick(fps)
pygame.QUIT()

this is code to create a screen in pygame and display buttons on it. but when i run it i get one screen that shows my image and after closing it i get another screen with buttons. but i am not understanding how to put those buttons on the same screen as that of the iamge.

Solution – 1

You have 2 application loops. Remove the 1st application loop, but draw the background image in the second application loop:

# DELETE
#screen.blit(imp,(0,0))
#pygame.display.flip()
#status=True
#while (status):
#    for i in pygame.event.get():
#        if i.type == pygame.QUIT:
#            status=False

# [...]

# Game loop.
while True:
    
    # DELETE
    # screen.fill((20, 20, 20))
    
    # INSERT
    screen.blit(imp,(0,0))

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

    for object in objects:
        object.process()

    pygame.display.flip()
    fpsClock.tick(fps)

pygame.quit()