Changing a class so that when the mouse hovers over it, it changes colour - Pygame

Question

import pygame as pg
import sys
import time

# All pygame stuff under here
pg.init()

# Font definitions
backFont = pg.font.SysFont("monospace", 40)
titleFont = pg.font.SysFont("garamond", 100)
cipherFont = pg.font.SysFont("garamond", 50)
buttonFont = pg.font.SysFont("garamond", 25)
bigFont = pg.font.SysFont("garamond", 100)
Font = pg.font.SysFont(None, 32)
inputFont = pg.font.SysFont('consola', 35)
errorFont = pg.font.SysFont('tahoma', 20)
diagramFont = pg.font.SysFont('courier new', 25)

# Colour definitions
BackGray = pg.Color('gray60')
screenGray = pg.Color('gray80')
buttonGray1 = pg.Color('gray40')
buttonGray2 = pg.Color('gray50')
buttonGray3 = pg.Color('gray30')
textColour = pg.Color('navy')

# Screen size set
screen = pg.display.set_mode((800, 600))

# Clock initiated to allow regular typing speeds
clock = pg.time.Clock()

# Change button class so that when the mouse pos is sent through, changes colour ======================
class Button(pg.sprite.Sprite):
    def __init__(self, text, x, y, width, height, enabled):
        super().__init__()
        self.colour = buttonGray2
        self.image = pg.Surface((width, height))
        self.image.fill(buttonGray2)
        self.rect = self.image.get_rect()
        txt = buttonFont.render(text, True, textColour)
        txtRect = txt.get_rect(center=self.rect.center)
        self.image.blit(txt, txtRect)
        self.rect.topleft = x, y
        self.enabled = enabled

    def isPressed(self, event):
        if self.enabled == True:
            if event.type == pg.MOUSEBUTTONDOWN:
                # MOUSE... events have an event.pos attribute (the mouse position)
                # which you can pass to the collidepoint method of the rect.
                if self.rect.collidepoint(event.pos):
                    return True
        return False
    def HoveredOver(self,event):
        print("Ocurring")
        if event.type == pg.MOUSEMOTION:
            if self.rect.collidepoint(event.pos):
                print("Hoveredover")
                self.colour = buttonGray1
            else:
                self.colour = buttonGray2

def FrontPage():
    # Back screen
    screen.fill(screenGray)

    # Button definition for continuing
    Continue = Button('Continue', 105, 455, 120, 50, True)
    buttonsGroup = pg.sprite.Group(Continue)

    # Pygane while loop for events
    while True:
        for event in pg.event.get():
            mouseX, mouseY = pg.mouse.get_pos()
            if event.type == pg.QUIT:
                pg.quit()
                sys.exit()
            elif Continue.isPressed(event):
                print("Continue")
            Continue.HoveredOver(event)

        buttonsGroup.draw(screen)

        pg.display.flip()
        clock.tick(60)

FrontPage()

I have this class to define and create buttons in Pygame. At the moment, when the mouse hovers over the button, it does not change colour. I attempted to add another method in the class, so that it changes colour, if the mouse is over the button. However, when I run the HoveredOver method, it does not change the colour of the button.

How can I make this method work to change the colour of the button?

Thanks in advance!

Answer 1

It's not enough to change the colour attribute of the sprite, you also have to change the image because pygame blits the image onto the screen when you call buttonsGroup.draw(screen) .

I'd create the images in the __init__ method or pass them as arguments and then swap them by assigning the current image to self.image if the mouse hovers over the button.

class Button(pg.sprite.Sprite):

    def __init__(self, text, x, y, width, height, enabled):
        super().__init__()
        self.colour = buttonGray2
        self.image = pg.Surface((width, height))
        self.image.fill(buttonGray2)
        self.image_normal = self.image  # Store a reference to the original image.
        # Create a separate hover image.
        self.image_hover = pg.Surface((width, height))
        self.image_hover.fill(buttonGray1)
        self.rect = self.image.get_rect()
        txt = buttonFont.render(text, True, textColour)
        txtRect = txt.get_rect(center=self.rect.center)
        self.image.blit(txt, txtRect)
        self.image_hover.blit(txt, txtRect)  # Blit the text onto the hover image.
        self.rect.topleft = x, y
        self.enabled = enabled

    def isPressed(self, event):
        if self.enabled == True:
            if event.type == pg.MOUSEBUTTONDOWN:
                # MOUSE... events have an event.pos attribute (the mouse position)
                # which you can pass to the collidepoint method of the rect.
                if self.rect.collidepoint(event.pos):
                    return True
        return False

    def HoveredOver(self, event):
        if event.type == pg.MOUSEMOTION:
            if self.rect.collidepoint(event.pos):
                print("Hoveredover")
                # Swap the image.
                self.image = self.image_hover
            else:
                # Swap the image.
                self.image = self.image_normal