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!

score 1 · Accepted Answer · answered Feb 06 '18 at 14:28

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

Correct me if I am wrong but I believe that the line `super().init()` should be `super().__init__()`. — Micheal O'Dwyer, Feb 06 '18 at 16:34
I could've sword I saw `super().init()` never mind. Sorry for the hassle. — Micheal O'Dwyer, Feb 06 '18 at 16:51

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

1 Answers1