So first I made a button class:
class Button:
def __init__(self, text, color_idle, y, function=''):
# General
self.pressed = False
self.function_finished = False
self.function = function
#Rectangle
self.button1 = pygame.Rect(0, y, 280, 24)
self.color = color_idle
# Text
font1 = pygame.font.Font(None, 30)
self.text_surface = font1.render(text, True, WHITE)
self.text_rect = self.text_surface.get_rect(center=self.button1.center)
def draw(self):
# Drawing The Button
pygame.draw.rect(window, self.color, self.button1, border_radius=3)
# Drawing The Text
window.blit(self.text_surface, self.text_rect)
self.click()
self.scrool()
def click(self):
mouse_pos = pygame.mouse.get_pos()
if self.button1.collidepoint(mouse_pos):
if pygame.mouse.get_pressed()[0]:
self.pressed = True
if pygame.mouse.get_pressed()[2]:
self.pressed = False
if self.pressed == True:
self.color = LIGHT_BLUE_PRESSED
# Button Function
if self.function != '':
if self.function == 'unlock_every_character' and self.function_finished == False:
unlock_every_character()
self.function_finished = True
if self.function == 'unlock_every_item' and self.function_finished == False:
unlock_every_item()
self.function_finished = True
if self.function == 'unlock_every_animal' and self.function_finished == False:
unlock_every_animal()
self.function_finished = True
if self.pressed == False:
self.color = LIGHT_BLUE_IDLE
if self.button1.collidepoint(mouse_pos):
self.color = LIGHT_BLUE_HOVER
def scrool(self):
for event in pygame.event.get():
if event.button == 4: # SCROLL UP
screen_level += 10
if event.button == 5: # SCROLL DOWN
screen_level -= 10
The button changes color when you hover over it with a mouse or press it.
To create a button object you have to specify the button text, color (I want to have different colored buttons), the y position and the function that it activates.
button1 = Button('Text1', LIGHT_BLUE_IDLE, 2, 'unlock_every_character')
And i want to be able to scroll, so i did something like this:
while True:
for event in pygame.event.get():
if event.button == 4: # SCROLL UP
screen_level += 10
if event.button == 5: # SCROLL DOWN
screen_level -= 10
And so i add the screen_level to the button object y position:
screen_level = 0
button1 = Button('Text1', LIGHT_BLUE_IDLE, 2 + screen_level, 'unlock_every_character')
But it won't work, because i have to specify the screen_level before the loop so i can add it to the button object witch is also created before the loop. So for the scroll to work i have to create my button inside the loop, after the event.button check and then the scrolling works, but the color changing brakes, because i set the button color (LIGHT_BLUE_IDLE) while creating the button, and so because i now create my button in the loop i create it 60 times every second and so i set it's color to LIGHT_BLUE_IDLE 60 times per second.
Please help
To answer the question, only pygame.MOUSEBUTTONDOWN events have button attribute, so you need to check for that before you check for button events.
for event in pygame.event.get():
if event.type == pygame.MOUSEBUTTONDOWN:
if event.button == 4:
Apart from that, there are a few problems. First is this:
if self.button1.collidepoint(mouse_pos):
if pygame.mouse.get_pressed()[0]:
self.pressed = True
if pygame.mouse.get_pressed()[2]: #<- this
self.pressed = False
pygame.mouse.get_pressed()[2] checks for right mouse button, so your button isn't reusable until you press it.
Second is this:
def scrool(self):
for event in pygame.event.get():
You can only call pygame.event.get() once in your application, otherwise it will cause problems. Calling it in scroll function means that you cannot call it anywhere else, thus you don't have access to events anywhere else in your code.
You are also not updating the text surface position every frame which means only the button's rectangle will move and not the text.
Also, you don't have to compare every function as a string because you can directly pass the function itself.
This is just about coding practice but a function should be responsible for one job.
def draw(self):
# Drawing The Button
pygame.draw.rect(window, self.color, self.button1, border_radius=3)
# Drawing The Text
window.blit(self.text_surface, self.text_rect)
self.click()
self.scrool()
It should not be doing that. A better way to handle this is to make a run function to call all of the button functions.
One last thing, it is considered better practice and more "pythonic" to check for true and false like this:
if self.pressed == True: #no
if self.pressed: #yes
if self.pressed == False: #no
if not self.pressed: #yes
Finally, instead of trying use if statements and pygame.mouse.get_pressed() to make the button execute the function once on click, you can use events for checking for mouse press and get rid of the if statements.
Here is the code with the above mentioned improvements.
import pygame
pygame.init()
window = pygame.display.set_mode((400,350))
pygame.display.set_caption('caption')
def unlockEveryCharacter():
print("'unlock_every_character'")
def unlockEveryItem():
print("'unlock_every_item'")
def unlockEveryAnimal():
print("'unlock_every_animal'")
class Button:
def __init__(self, text, color_idle, y, function=None):
# General
self.function = function
#Rectangle
self.button1 = pygame.Rect(0, y, 280, 24)
self.color = color_idle
# Text
font1 = pygame.font.Font(None, 30)
self.text_surface = font1.render(text, True, (255, 255, 255))
self.text_rect = self.text_surface.get_rect(center=self.button1.center)
def draw(self):
# Drawing The Button
pygame.draw.rect(window, self.color, self.button1, border_radius=3)
# Drawing The Text
self.text_rect = self.button1
window.blit(self.text_surface, self.text_rect)
def click(self, events):
pressed = False
for event in events:
if event.type == pygame.MOUSEBUTTONDOWN:
if (event.button == 1):
if self.button1.collidepoint(event.pos):
pressed = True
if pressed:
self.color = (200, 200, 255)
# Button Function
if self.function is not None:
self.function()
if not pressed:
self.color = (100, 100, 200)
if self.button1.collidepoint(pygame.mouse.get_pos()):
self.color = (50, 50, 200)
def scrool(self, events):
for event in events:
if event.type == pygame.MOUSEBUTTONDOWN:
if event.button == 4:
self.button1.y -= 10
if event.button == 5: # SCROLL DOWN
self.button1.y += 10
def run(self, events):
self.draw()
self.click(events)
self.scrool(events)
unlockEveryCharacterButton = Button("Unlock every character", (255, 255, 255), 10, unlockEveryCharacter)
unlockEveryItemButton = Button("Unlock every item", (255, 255, 255), 50, unlockEveryItem)
unlockEveryAnimalButton = Button("Unlock every animal", (255, 255, 255), 90, unlockEveryAnimal)
buttons = [unlockEveryCharacterButton, unlockEveryItemButton, unlockEveryAnimalButton]
running = True
while running:
events = pygame.event.get()
for event in events:
if event.type == pygame.QUIT:
running = False
window.fill((190, 232, 220))
for button in buttons:
button.run(events)
pygame.display.update()
pygame.quit()
Related
Pls suggest how can I change the color of the button when I pressed it, and the color of the first button will be changed to the default color when I pressed the second button.
For example, After I clicked the STRAIGHT Button, the button will become green color and when I click the LEFT button the LEFT button will change to green color and the STRAIGHT button will become the default color which is white color. Thanks in advance :)
CODE:
def draw_button(self):
global clicked
action = False
# get mouse position
pos = pygame.mouse.get_pos()
# create pygame Rect object for the button
button_rect = Rect(self.x, self.y, self.width, self.height)
# check mouseover and clicked conditions
if button_rect.collidepoint(pos):
if pygame.mouse.get_pressed()[0] == 1:
clicked = True
pygame.draw.rect(screen, self.click_col, button_rect)
elif pygame.mouse.get_pressed()[0] == 0 and clicked == True:
clicked = False
action = True
else:
pygame.draw.rect(screen, self.hover_col, button_rect)
else:
pygame.draw.rect(screen, self.button_col, button_rect)
When you draw the button, you have to set the color dependent on the global variable clicked:
def draw_button(self):
global clicked
# get mouse position
pos = pygame.mouse.get_pos()
# create pygame Rect object for the button
button_rect = Rect(self.x, self.y, self.width, self.height)
# check mouseover and clicked conditions
hover = button_rect.collidepoint(pos)
if hover and pygame.mouse.get_pressed()[0] == 1:
clicked = not clicked
color = self.button_col
if clicked:
color = self.click_col
elif hover:
color = self.hover_col
pygame.draw.rect(screen, color, button_rect)
Anyway, that won't satisfy you, because pygame.mouse.get_pressed() returns a list of Boolean values that represent the state (True or False) of all mouse buttons. The state of a button is True as long as a button is held down.
You have to use MOUSEBUTTONDOWN event. The MOUSEBUTTONDOWN event occurs once when you click the mouse button and the MOUSEBUTTONUP event occurs once when the mouse button is released. The pygame.event.Event() object has two attributes that provide information about the mouse event. pos is a tuple that stores the position that was clicked. button stores the button that was clicked.
If you have multiple buttons that you have to interact with each other, a single clicked status is not enough. You need a separate "clicked" state for each button. If the clicked state of 1 button becomes True, the states of the other keys must be set to False. I recommend to implement a RadioButton class for this.
See also Mouse and Sprite.
Minimal example:
repl.it/#Rabbid76/PyGame-RadioButton
import pygame
class RadioButton(pygame.sprite.Sprite):
def __init__(self, x, y, w, h, font, text):
super().__init__()
text_surf = font.render(text, True, (0, 0, 0))
self.button_image = pygame.Surface((w, h))
self.button_image.fill((96, 96, 96))
self.button_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
self.hover_image = pygame.Surface((w, h))
self.hover_image.fill((96, 96, 96))
self.hover_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
pygame.draw.rect(self.hover_image, (96, 196, 96), self.hover_image.get_rect(), 3)
self.clicked_image = pygame.Surface((w, h))
self.clicked_image.fill((96, 196, 96))
self.clicked_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
self.image = self.button_image
self.rect = pygame.Rect(x, y, w, h)
self.clicked = False
self.buttons = None
def setRadioButtons(self, buttons):
self.buttons = buttons
def update(self, event_list):
hover = self.rect.collidepoint(pygame.mouse.get_pos())
for event in event_list:
if event.type == pygame.MOUSEBUTTONDOWN:
if hover and event.button == 1:
for rb in self.buttons:
rb.clicked = False
self.clicked = True
self.image = self.button_image
if self.clicked:
self.image = self.clicked_image
elif hover:
self.image = self.hover_image
pygame.init()
window = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()
font50 = pygame.font.SysFont(None, 50)
radioButtons = [
RadioButton(50, 40, 200, 60, font50, "option 1"),
RadioButton(50, 120, 200, 60, font50, "option 2"),
RadioButton(50, 200, 200, 60, font50, "option 3")
]
for rb in radioButtons:
rb.setRadioButtons(radioButtons)
radioButtons[0].clicked = True
group = pygame.sprite.Group(radioButtons)
run = True
while run:
clock.tick(60)
event_list = pygame.event.get()
for event in event_list:
if event.type == pygame.QUIT:
run = False
group.update(event_list)
window.fill(0)
group.draw(window)
pygame.display.flip()
pygame.quit()
exit()
your_button_rect = pygame.Rect(x,y,width,height)
color = (0,0,0)
pos = pygame.mouse.get_pos()
def change_button_color():
if your_button_rect.colliderect(pos):
if event.type == pygame.MOUSEBUTTONDOWN: #checks if mouse button is pressed down while the cursor is on the rectangle
color = (your_desired_Color_RGBvalue)
while True:
pygame.draw.rect(screen,color,your_button_rect)
change_button_color()
Pls suggest how can I change the color of the button when I pressed it, and the color of the first button will be changed to the default color when I pressed the second button.
For example, After I clicked the STRAIGHT Button, the button will become green color and when I click the LEFT button the LEFT button will change to green color and the STRAIGHT button will become the default color which is white color. Thanks in advance :)
CODE:
def draw_button(self):
global clicked
action = False
# get mouse position
pos = pygame.mouse.get_pos()
# create pygame Rect object for the button
button_rect = Rect(self.x, self.y, self.width, self.height)
# check mouseover and clicked conditions
if button_rect.collidepoint(pos):
if pygame.mouse.get_pressed()[0] == 1:
clicked = True
pygame.draw.rect(screen, self.click_col, button_rect)
elif pygame.mouse.get_pressed()[0] == 0 and clicked == True:
clicked = False
action = True
else:
pygame.draw.rect(screen, self.hover_col, button_rect)
else:
pygame.draw.rect(screen, self.button_col, button_rect)
When you draw the button, you have to set the color dependent on the global variable clicked:
def draw_button(self):
global clicked
# get mouse position
pos = pygame.mouse.get_pos()
# create pygame Rect object for the button
button_rect = Rect(self.x, self.y, self.width, self.height)
# check mouseover and clicked conditions
hover = button_rect.collidepoint(pos)
if hover and pygame.mouse.get_pressed()[0] == 1:
clicked = not clicked
color = self.button_col
if clicked:
color = self.click_col
elif hover:
color = self.hover_col
pygame.draw.rect(screen, color, button_rect)
Anyway, that won't satisfy you, because pygame.mouse.get_pressed() returns a list of Boolean values that represent the state (True or False) of all mouse buttons. The state of a button is True as long as a button is held down.
You have to use MOUSEBUTTONDOWN event. The MOUSEBUTTONDOWN event occurs once when you click the mouse button and the MOUSEBUTTONUP event occurs once when the mouse button is released. The pygame.event.Event() object has two attributes that provide information about the mouse event. pos is a tuple that stores the position that was clicked. button stores the button that was clicked.
If you have multiple buttons that you have to interact with each other, a single clicked status is not enough. You need a separate "clicked" state for each button. If the clicked state of 1 button becomes True, the states of the other keys must be set to False. I recommend to implement a RadioButton class for this.
See also Mouse and Sprite.
Minimal example:
repl.it/#Rabbid76/PyGame-RadioButton
import pygame
class RadioButton(pygame.sprite.Sprite):
def __init__(self, x, y, w, h, font, text):
super().__init__()
text_surf = font.render(text, True, (0, 0, 0))
self.button_image = pygame.Surface((w, h))
self.button_image.fill((96, 96, 96))
self.button_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
self.hover_image = pygame.Surface((w, h))
self.hover_image.fill((96, 96, 96))
self.hover_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
pygame.draw.rect(self.hover_image, (96, 196, 96), self.hover_image.get_rect(), 3)
self.clicked_image = pygame.Surface((w, h))
self.clicked_image.fill((96, 196, 96))
self.clicked_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
self.image = self.button_image
self.rect = pygame.Rect(x, y, w, h)
self.clicked = False
self.buttons = None
def setRadioButtons(self, buttons):
self.buttons = buttons
def update(self, event_list):
hover = self.rect.collidepoint(pygame.mouse.get_pos())
for event in event_list:
if event.type == pygame.MOUSEBUTTONDOWN:
if hover and event.button == 1:
for rb in self.buttons:
rb.clicked = False
self.clicked = True
self.image = self.button_image
if self.clicked:
self.image = self.clicked_image
elif hover:
self.image = self.hover_image
pygame.init()
window = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()
font50 = pygame.font.SysFont(None, 50)
radioButtons = [
RadioButton(50, 40, 200, 60, font50, "option 1"),
RadioButton(50, 120, 200, 60, font50, "option 2"),
RadioButton(50, 200, 200, 60, font50, "option 3")
]
for rb in radioButtons:
rb.setRadioButtons(radioButtons)
radioButtons[0].clicked = True
group = pygame.sprite.Group(radioButtons)
run = True
while run:
clock.tick(60)
event_list = pygame.event.get()
for event in event_list:
if event.type == pygame.QUIT:
run = False
group.update(event_list)
window.fill(0)
group.draw(window)
pygame.display.flip()
pygame.quit()
exit()
your_button_rect = pygame.Rect(x,y,width,height)
color = (0,0,0)
pos = pygame.mouse.get_pos()
def change_button_color():
if your_button_rect.colliderect(pos):
if event.type == pygame.MOUSEBUTTONDOWN: #checks if mouse button is pressed down while the cursor is on the rectangle
color = (your_desired_Color_RGBvalue)
while True:
pygame.draw.rect(screen,color,your_button_rect)
change_button_color()
Pls suggest how can I change the color of the button when I pressed it, and the color of the first button will be changed to the default color when I pressed the second button.
For example, After I clicked the STRAIGHT Button, the button will become green color and when I click the LEFT button the LEFT button will change to green color and the STRAIGHT button will become the default color which is white color. Thanks in advance :)
CODE:
def draw_button(self):
global clicked
action = False
# get mouse position
pos = pygame.mouse.get_pos()
# create pygame Rect object for the button
button_rect = Rect(self.x, self.y, self.width, self.height)
# check mouseover and clicked conditions
if button_rect.collidepoint(pos):
if pygame.mouse.get_pressed()[0] == 1:
clicked = True
pygame.draw.rect(screen, self.click_col, button_rect)
elif pygame.mouse.get_pressed()[0] == 0 and clicked == True:
clicked = False
action = True
else:
pygame.draw.rect(screen, self.hover_col, button_rect)
else:
pygame.draw.rect(screen, self.button_col, button_rect)
When you draw the button, you have to set the color dependent on the global variable clicked:
def draw_button(self):
global clicked
# get mouse position
pos = pygame.mouse.get_pos()
# create pygame Rect object for the button
button_rect = Rect(self.x, self.y, self.width, self.height)
# check mouseover and clicked conditions
hover = button_rect.collidepoint(pos)
if hover and pygame.mouse.get_pressed()[0] == 1:
clicked = not clicked
color = self.button_col
if clicked:
color = self.click_col
elif hover:
color = self.hover_col
pygame.draw.rect(screen, color, button_rect)
Anyway, that won't satisfy you, because pygame.mouse.get_pressed() returns a list of Boolean values that represent the state (True or False) of all mouse buttons. The state of a button is True as long as a button is held down.
You have to use MOUSEBUTTONDOWN event. The MOUSEBUTTONDOWN event occurs once when you click the mouse button and the MOUSEBUTTONUP event occurs once when the mouse button is released. The pygame.event.Event() object has two attributes that provide information about the mouse event. pos is a tuple that stores the position that was clicked. button stores the button that was clicked.
If you have multiple buttons that you have to interact with each other, a single clicked status is not enough. You need a separate "clicked" state for each button. If the clicked state of 1 button becomes True, the states of the other keys must be set to False. I recommend to implement a RadioButton class for this.
See also Mouse and Sprite.
Minimal example:
repl.it/#Rabbid76/PyGame-RadioButton
import pygame
class RadioButton(pygame.sprite.Sprite):
def __init__(self, x, y, w, h, font, text):
super().__init__()
text_surf = font.render(text, True, (0, 0, 0))
self.button_image = pygame.Surface((w, h))
self.button_image.fill((96, 96, 96))
self.button_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
self.hover_image = pygame.Surface((w, h))
self.hover_image.fill((96, 96, 96))
self.hover_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
pygame.draw.rect(self.hover_image, (96, 196, 96), self.hover_image.get_rect(), 3)
self.clicked_image = pygame.Surface((w, h))
self.clicked_image.fill((96, 196, 96))
self.clicked_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
self.image = self.button_image
self.rect = pygame.Rect(x, y, w, h)
self.clicked = False
self.buttons = None
def setRadioButtons(self, buttons):
self.buttons = buttons
def update(self, event_list):
hover = self.rect.collidepoint(pygame.mouse.get_pos())
for event in event_list:
if event.type == pygame.MOUSEBUTTONDOWN:
if hover and event.button == 1:
for rb in self.buttons:
rb.clicked = False
self.clicked = True
self.image = self.button_image
if self.clicked:
self.image = self.clicked_image
elif hover:
self.image = self.hover_image
pygame.init()
window = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()
font50 = pygame.font.SysFont(None, 50)
radioButtons = [
RadioButton(50, 40, 200, 60, font50, "option 1"),
RadioButton(50, 120, 200, 60, font50, "option 2"),
RadioButton(50, 200, 200, 60, font50, "option 3")
]
for rb in radioButtons:
rb.setRadioButtons(radioButtons)
radioButtons[0].clicked = True
group = pygame.sprite.Group(radioButtons)
run = True
while run:
clock.tick(60)
event_list = pygame.event.get()
for event in event_list:
if event.type == pygame.QUIT:
run = False
group.update(event_list)
window.fill(0)
group.draw(window)
pygame.display.flip()
pygame.quit()
exit()
your_button_rect = pygame.Rect(x,y,width,height)
color = (0,0,0)
pos = pygame.mouse.get_pos()
def change_button_color():
if your_button_rect.colliderect(pos):
if event.type == pygame.MOUSEBUTTONDOWN: #checks if mouse button is pressed down while the cursor is on the rectangle
color = (your_desired_Color_RGBvalue)
while True:
pygame.draw.rect(screen,color,your_button_rect)
change_button_color()
Pls suggest how can I change the color of the button when I pressed it, and the color of the first button will be changed to the default color when I pressed the second button.
For example, After I clicked the STRAIGHT Button, the button will become green color and when I click the LEFT button the LEFT button will change to green color and the STRAIGHT button will become the default color which is white color. Thanks in advance :)
CODE:
def draw_button(self):
global clicked
action = False
# get mouse position
pos = pygame.mouse.get_pos()
# create pygame Rect object for the button
button_rect = Rect(self.x, self.y, self.width, self.height)
# check mouseover and clicked conditions
if button_rect.collidepoint(pos):
if pygame.mouse.get_pressed()[0] == 1:
clicked = True
pygame.draw.rect(screen, self.click_col, button_rect)
elif pygame.mouse.get_pressed()[0] == 0 and clicked == True:
clicked = False
action = True
else:
pygame.draw.rect(screen, self.hover_col, button_rect)
else:
pygame.draw.rect(screen, self.button_col, button_rect)
When you draw the button, you have to set the color dependent on the global variable clicked:
def draw_button(self):
global clicked
# get mouse position
pos = pygame.mouse.get_pos()
# create pygame Rect object for the button
button_rect = Rect(self.x, self.y, self.width, self.height)
# check mouseover and clicked conditions
hover = button_rect.collidepoint(pos)
if hover and pygame.mouse.get_pressed()[0] == 1:
clicked = not clicked
color = self.button_col
if clicked:
color = self.click_col
elif hover:
color = self.hover_col
pygame.draw.rect(screen, color, button_rect)
Anyway, that won't satisfy you, because pygame.mouse.get_pressed() returns a list of Boolean values that represent the state (True or False) of all mouse buttons. The state of a button is True as long as a button is held down.
You have to use MOUSEBUTTONDOWN event. The MOUSEBUTTONDOWN event occurs once when you click the mouse button and the MOUSEBUTTONUP event occurs once when the mouse button is released. The pygame.event.Event() object has two attributes that provide information about the mouse event. pos is a tuple that stores the position that was clicked. button stores the button that was clicked.
If you have multiple buttons that you have to interact with each other, a single clicked status is not enough. You need a separate "clicked" state for each button. If the clicked state of 1 button becomes True, the states of the other keys must be set to False. I recommend to implement a RadioButton class for this.
See also Mouse and Sprite.
Minimal example:
repl.it/#Rabbid76/PyGame-RadioButton
import pygame
class RadioButton(pygame.sprite.Sprite):
def __init__(self, x, y, w, h, font, text):
super().__init__()
text_surf = font.render(text, True, (0, 0, 0))
self.button_image = pygame.Surface((w, h))
self.button_image.fill((96, 96, 96))
self.button_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
self.hover_image = pygame.Surface((w, h))
self.hover_image.fill((96, 96, 96))
self.hover_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
pygame.draw.rect(self.hover_image, (96, 196, 96), self.hover_image.get_rect(), 3)
self.clicked_image = pygame.Surface((w, h))
self.clicked_image.fill((96, 196, 96))
self.clicked_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
self.image = self.button_image
self.rect = pygame.Rect(x, y, w, h)
self.clicked = False
self.buttons = None
def setRadioButtons(self, buttons):
self.buttons = buttons
def update(self, event_list):
hover = self.rect.collidepoint(pygame.mouse.get_pos())
for event in event_list:
if event.type == pygame.MOUSEBUTTONDOWN:
if hover and event.button == 1:
for rb in self.buttons:
rb.clicked = False
self.clicked = True
self.image = self.button_image
if self.clicked:
self.image = self.clicked_image
elif hover:
self.image = self.hover_image
pygame.init()
window = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()
font50 = pygame.font.SysFont(None, 50)
radioButtons = [
RadioButton(50, 40, 200, 60, font50, "option 1"),
RadioButton(50, 120, 200, 60, font50, "option 2"),
RadioButton(50, 200, 200, 60, font50, "option 3")
]
for rb in radioButtons:
rb.setRadioButtons(radioButtons)
radioButtons[0].clicked = True
group = pygame.sprite.Group(radioButtons)
run = True
while run:
clock.tick(60)
event_list = pygame.event.get()
for event in event_list:
if event.type == pygame.QUIT:
run = False
group.update(event_list)
window.fill(0)
group.draw(window)
pygame.display.flip()
pygame.quit()
exit()
your_button_rect = pygame.Rect(x,y,width,height)
color = (0,0,0)
pos = pygame.mouse.get_pos()
def change_button_color():
if your_button_rect.colliderect(pos):
if event.type == pygame.MOUSEBUTTONDOWN: #checks if mouse button is pressed down while the cursor is on the rectangle
color = (your_desired_Color_RGBvalue)
while True:
pygame.draw.rect(screen,color,your_button_rect)
change_button_color()
I'm new to pygame and have been attempting to create a simple interface with some buttons. I can't get the button to change color when the mouse hovers over it.
I've managed to create the button, but cannot get it to interact with my mouse.
The code create an button object with one instance of a green button.
It should change the button from green to red when mouse hovers over.
import pygame
pygame.init()
display_width = 1200
display_height = 600
black = (0, 0, 0)
white = (255, 255, 255)
red = (255, 0, 0)
green = (0, 255, 0)
StartScreen = pygame.display.set_mode((display_width, display_height))
pygame.display.set_caption('Log In')
clock = pygame.time.Clock()
StartScreen.fill(white)
class Buttons():
def __init__(self, color, x, y, width, height, text=''):
self.color = color
self.x = int(x)
self.y = int(y)
self.w = int(width)
self.h = int(height)
self.text = text
def Draw(self, StartScreen, outline=None):
if outline:
pygame.draw.rect(StartScreen, outline, (float(self.x-2), float(self.y-2), float(self.w+4), float(self.h+4)), 0)
pygame.draw.rect(StartScreen, self.color, (self.x, self.y, self.w, self.h), 0)
if self.text != '':
font = pygame.font.SysFont('comicsans', 20)
text = font.render(self.text, 1, black)
StartScreen.blit(text, (self.x + (self.w/2 - text.get_width()/2), self.y + (self.h/2 - text.get_height()/2)))
def MouseOver(self, pos):
if pos[0] > self.x and pos[0] < self.x + self.w:
if pos[1] > self.y and pos[1] < self.y + self.h:
return True
return False
def redrawWindow():
StartScreen.fill(white)
GrnBut.Draw(StartScreen, black)
run = True
GrnBut = Buttons(green, 150, 200, 90, 100, 'Press')
while run:
redrawWindow()
pygame.display.update()
for event in pygame.event.get():
pos = pygame.mouse.get_pos()
Exit = False
while not Exit:
for event in pygame.event.get():
if event.type == pygame.QUIT:
print(event)
pygame.quit()
quit()
if event.type == pygame.MOUSEBUTTONDOWN:
if GrnBut.MouseOver(pos):
print("Clicked")
if event.type == pygame.MOUSEMOTION:
if GrnBut.MouseOver(pos):
GrnBut.color = red
else:
GrnBut.color = green
Your main problem is that you have a nested event loop inside your event loop:
while run: # outer loop
redrawWindow()
pygame.display.update()
for event in pygame.event.get():
pos = pygame.mouse.get_pos()
Exit = False
while not Exit: # inner loop
for event in pygame.event.get():
if event.type == pygame.QUIT:
print(event)
pygame.quit()
quit()
When execution reaches this inner loop, neither redrawWindow() or GrnBut.MouseOver(pos) is ever called again.
Just get rid of it:
while run:
redrawWindow()
pygame.display.update()
for event in pygame.event.get():
pos = pygame.mouse.get_pos()
if event.type == pygame.QUIT:
print(event)
pygame.quit()
quit()
Your code can be improved by using some of pygame's features, such as the Sprite and Rect classes.
Here's an example of how you could create a more "pygamy" version of your Button class that supports multiple, different buttons:
import pygame
pygame.init()
display_width = 1200
display_height = 600
# use python style variable names (lowercase)
screen = pygame.display.set_mode((display_width, display_height))
pygame.display.set_caption('Log In')
clock = pygame.time.Clock()
# load the font only once instead of every frame
font = pygame.font.SysFont('comicsans', 20)
# class name should be singular
class Button(pygame.sprite.Sprite):
# 1) no need to have 4 parameters for position and size, use pygame.Rect instead
# 2) let the Button itself handle which color it is
# 3) give a callback function to the button so it can handle the click itself
def __init__(self, color, color_hover, rect, callback, text='', outline=None):
super().__init__()
self.text = text
# a temporary Rect to store the size of the button
tmp_rect = pygame.Rect(0, 0, *rect.size)
# create two Surfaces here, one the normal state, and one for the hovering state
# we create the Surfaces here once, so we can simple blit them and dont have
# to render the text and outline again every frame
self.org = self._create_image(color, outline, text, tmp_rect)
self.hov = self._create_image(color_hover, outline, text, tmp_rect)
# in Sprites, the image attribute holds the Surface to be displayed...
self.image = self.org
# ...and the rect holds the Rect that defines it position
self.rect = rect
self.callback = callback
def _create_image(self, color, outline, text, rect):
# function to create the actual surface
# see how we can make use of Rect's virtual attributes like 'size'
img = pygame.Surface(rect.size)
if outline:
# here we can make good use of Rect's functions again
# first, fill the Surface in the outline color
# then fill a rectangular area in the actual color
# 'inflate' is used to 'shrink' the rect
img.fill(outline)
img.fill(color, rect.inflate(-4, -4))
else:
img.fill(color)
# render the text once here instead of every frame
if text != '':
text_surf = font.render(text, 1, pygame.Color('black'))
# again, see how easy it is to center stuff using Rect's attributes like 'center'
text_rect = text_surf.get_rect(center=rect.center)
img.blit(text_surf, text_rect)
return img
def update(self, events):
# here we handle all the logic of the Button
pos = pygame.mouse.get_pos()
hit = self.rect.collidepoint(pos)
# if the mouse in inside the Rect (again, see how the Rect class
# does all the calculation for use), use the 'hov' image instead of 'org'
self.image = self.hov if hit else self.org
for event in events:
# the Button checks for events itself.
# if this Button is clicked, it runs the callback function
if event.type == pygame.MOUSEBUTTONDOWN and hit:
self.callback(self)
run = True
# we store all Sprites in a Group, so we can easily
# call the 'update' and 'draw' functions of the Buttons
# in the main loop
sprites = pygame.sprite.Group()
sprites.add(Button(pygame.Color('green'),
pygame.Color('red'),
pygame.Rect(150, 200, 90, 100),
lambda b: print(f"Button '{b.text}' was clicked"),
'Press',
pygame.Color('black')))
sprites.add(Button(pygame.Color('dodgerblue'),
pygame.Color('lightgreen'),
pygame.Rect(300, 200, 90, 100),
lambda b: print(f"Click me again!"),
'Another'))
while run:
events = pygame.event.get()
for event in events:
if event.type == pygame.QUIT:
pygame.quit()
quit()
# update all sprites
# it now doesn't matter if we have one or 200 Buttons
sprites.update(events)
# clear the screen
screen.fill(pygame.Color('white'))
# draw all sprites/Buttons
sprites.draw(screen)
pygame.display.update()
# limit framerate to 60 FPS
clock.tick(60)
There are a lot of problems with your code, and would like to suggest a less verbose way to code this using pygame.Rect instead of pygame.Sprite, as it does not require as much understanding of game design and is an inheritance-free approach.
Firstly we create the button class:
import pygame
import sys
class Button:
def __init__(self, rect, default_colour=(0,255,0), hovered_colour=(255,0,0), text="", font=None): #using default arguments
self.rect = pygame.Rect(rect)
self.default_colour = default_colour
self.hovered_colour = hovered_colour
self.font = font if font else pygame.font.Font(None, 20) #initialise/import font
self.text = self.font.render(text, True, (0,0,0)) #render text
def draw(self, surf, mouse_coords):
if self.hover(mouse_coords):
pygame.draw.rect(surf, self.hovered_colour, self.rect, 0)
else:
pygame.draw.rect(surf, self.default_colour, self.rect, 0)
surf.blit(self.text, self.text.get_rect(center=self.rect.center)) #rect has a centre attribute
def hover(self, mouse):
mouse_rect = pygame.Rect(mouse, [1,1]) #using inbuilt collision function
return mouse_rect.colliderect(self.rect) #returns a boolean, no need to do this: if mouse_rect.colliderect(self.rect): return True, else: return False
then we write the main program loop (continues on from previous block of code)
pygame.init()
screen = pygame.display.set_mode([500,500])
def response1(): #callback function when button 1 is pressed
print("Button 1 pressed")
def response2(): #callback function when button 2 is pressed
print("Button 2 pressed")
def main(buttons):
while True: #setting a variable to True is unnecessary as you can just use "break" to exit the loop.
#this is only not the case in rare cases
screen.fill((255,255,255)) #unneccessary to put in another function
for event in pygame.event.get(): #only 1 event loop required
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()
elif event.type == pygame.MOUSEBUTTONDOWN:
for button in buttons:
if button["button"].hover(pygame.mouse.get_pos()):
button["func"]() #calls function if clicked on
for button in buttons: #draws all buttons in array, can be optimised to not occur when user clicks
button["button"].draw(screen, pygame.mouse.get_pos())
pygame.display.flip() #update the surface at the end of the loop instead of the beginning
#only use pygame.display.update(rect=None) to update a specific portion of the display, otherwise stick to flip()
if __name__ == "__main__": #if file is not a module
button1 = Button([130, 200, 90, 100], text="Press")
button2 = Button([280, 200, 90, 100], text="Me", default_colour=(255,255,0))
buttons = [ #array of dicts to store buttons and callback functions, for multiple buttons
{
"button": button1,
"func": response1
},
{
"button": button2,
"func": response2
}
]
main(buttons)