I've been watching a bunch of tutorials and new to pygame and coding in general. None of the tutorials I watched helped me with this. What i'm aiming for is for the buttons to change the button to a different colour when the user hovers over the button. Below is my entire code for the main menu so far.
import pygame
import time
import random
pygame.init()
size = (800, 600)
screen = pygame.display.set_mode(size)
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
GREEN = (0, 255, 0)
RED = (255, 0, 0)
pygame.display.set_caption("Basketball Shootout")
clock = pygame.time.Clock()
#GAME INTRO
def game_intro():
intro = True
while intro:
for event in pygame.event.get():
#print(event)
if event.type == pygame.QUIT:
pygame.quit()
quit()
#Font's and text
font = pygame.font.SysFont ("Times New Norman", 60)
text = font.render ("", True, WHITE)
#Background Image
background_images = pygame.image.load("greybackground.jpg").convert()
screen.blit(background_images, [0,0])
screen.blit(text, (150, 50))
#Background Music
pygame.mixer.music.load('game.ogg')
pygame.mixer.music.set_endevent(pygame.constants.USEREVENT)
pygame.mixer.music.play()
pygame.display.update()
clock.tick(15)
#BUTTONS
screen.blit(text, (150, 50))
pygame.draw.rect(screen,(0,0,0),(300,300,205,80));
pygame.draw.rect(screen,(0,0,0),(300,400,205,80));
pygame.draw.rect(screen,(0,0,0),(300,500,205,80));
font = pygame.font.SysFont ("Times New Norman, Arial", 30)
text = font.render ("START", True, WHITE)
screen.blit(text, (340, 320))
font = pygame.font.SysFont ("Times New Norman, Arial", 30)
text = font.render ("OPTIONS", True, WHITE)
screen.blit(text, (340, 420))
font = pygame.font.SysFont ("Times New Norman, Arial", 30)
text = font.render ("ABOUT", True, WHITE)
screen.blit(text, (340, 520))
pygame.display.flip();
#Quit Pygame
game_intro()
pygame.quit
I recommend storing the button data (text surface, rect, color) in a list of lists. When the mouse moves, pygame.MOUSEMOTION events get added to the event queue. In the event loop check if the mouse moved and then iterate over your buttons and set the color of colliding buttons to the hover color, reset the others to black. Blit the rects and text surfaces in a for loop as well.
import pygame
pygame.init()
screen = pygame.display.set_mode((800, 600))
clock = pygame.time.Clock()
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
HOVER_COLOR = (50, 70, 90)
# Don't define new font objects in your while loop (that's inefficient).
FONT = pygame.font.SysFont ("Times New Norman", 60)
# If the text surfaces and button rects don't change,
# you can define them once outside of the while loop.
text1 = FONT.render("START", True, WHITE)
text2 = FONT.render("OPTIONS", True, WHITE)
text3 = FONT.render("ABOUT", True, WHITE)
rect1 = pygame.Rect(300,300,205,80)
rect2 = pygame.Rect(300,400,205,80)
rect3 = pygame.Rect(300,500,205,80)
# The buttons consist of a text surface, a rect and a color.
buttons = [
[text1, rect1, BLACK],
[text2, rect2, BLACK],
[text3, rect3, BLACK],
]
def game_intro():
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
return
elif event.type == pygame.MOUSEMOTION:
for button in buttons:
# button[1] is the rect. Use its collidepoint method with
# the `event.pos` (mouse position) to detect collisions.
if button[1].collidepoint(event.pos):
# Set the button's color to the hover color.
button[2] = HOVER_COLOR
else:
# Otherwise reset the color to black.
button[2] = BLACK
screen.fill((20, 50, 70))
# Draw the buttons with their current colors at their rects.
# You can unpack the button lists directly in the head of the loop.
for text, rect, color in buttons:
pygame.draw.rect(screen, color, rect)
screen.blit(text, rect)
pygame.display.flip()
clock.tick(15)
game_intro()
pygame.quit()
I'd actually recommend defining a Button class, but I'm not sure if you're already familiar with classes/object-oriented programming.
The buttons also need callback functions to actually do something. Take a look at my answer here: https://stackoverflow.com/a/47664205/6220679
I would recommend creating a function for this:
mouse = pygame.mouse.get_pos()
click = pygame.mouse.get_pressed()
if x + w > mouse[0] > x and y + h > mouse[1] > y:
gameDisplay.blit(active, (x, y))
else:
gameDisplay.blit(inactive, (x, y))
and then in you game intro call you function like this:
def game_intro():
intro = True
while intro:
for event in pygame.event.get():
#print(event)
if event.type == pygame.QUIT:
pygame.quit()
quit()
# For example
button(100, 350, 195, 80, startBtn, startBtn_Hover)
This is what each parameter means:
x: x-coordinate of button
y: y-coordinate of button
w: width of button
h: height of button
active: picture when mouse is hovered over button
inactive: picture when button is idle
Related
I was messing around trying to figure out how to centre text in a button. This is the code.
import pygame
pygame.init()
win = pygame.display
d = win.set_mode((500, 500))
text = "A Button"
size = 50
size = [3*size, 1*size]
rectx = size[0]
recty = size[1]+ 5
textsizey = recty
t = len(text) * 5
textsize = int(textsizey/ t)
if textsize >= recty:
textsize = recty
testrect = pygame.Surface((rectx, recty))
testrect.fill((255, 255, 255))
def write(screen, text, color, position, size):
font = pygame.font.Font(pygame.font.get_default_font(), size)# Defining a font with font and size
text_surface = font.render(text, True, color)# Defining the text color which will be rendered
screen.blit(text_surface, (position[0], position[1])) # Rendering the font
while True:
pygame.event.get()
d.fill((0, 0, 0))
d.blit(testrect, (10, 10))
write(d, text, (0, 255, 0), [10, 10+(0.5*recty)-(0.5*textsize)], textsize)
win.flip()
On line 11, the variable t = len(text) * 5 is used in the next line textsize = int(textsizey/ t). When i do this the text size diminishes, which is not supposed to happen. But, if i use the value of t and replace the line with textsize = int(textsizey/ len(text) * 5), it works just fine. Printing the value of the variable and the actual value just before using it gives the same result. I am not using the variable t elsewhere in the program either. Why could this be happening?
To center text on button you need pygame.Rect() and its .center
button_rect = testrect.get_rect()
and then
text_rect = text_surface.get_rect()
text_rect.center = button_rect.center
or in one line
text_rect = text_surface.get_rect(center = button_rect.center)
and then you draw
text_rect.x = position[0]
text_rect.y = position[1]
blit(text_surface, text_rect)
BTW: If you don't change text then you could define Font, text_surface and text_rect only once. And later only change .x .y or .center
BTW: pygame.Rect() has other useful values - .centerx, .centery, .widht, .height, .x, .y, .left (the same as .x), .right (x + width), .top(the same as.y), .bottom (y+height), .size`,
Minimal working code with other changes.
It moves button randomly and it uses .center to center text on button.
import pygame
import random
pygame.init()
win = pygame.display.set_mode((500, 500))
size = 50
# --- button's rectange ---
button_image = pygame.Surface((3*size, 1*size))
button_rect = button_image.get_rect(x=10, y=10)
button_image.fill((255, 255, 255))
# --- button's text ---
text = "A Button"
font = pygame.font.Font(pygame.font.get_default_font(), size//2)
text_image = font.render(text, True, (255, 0, 0))
text_rect = text_image.get_rect(center=button_rect.center)
# --- main loop ---
clock = pygame.time.Clock()
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
exit()
elif event.type == pygame.KEYDOWN:
if event.key == pygame.K_ESCAPE:
pygame.quit()
exit()
# clear buffer
win.fill((0, 0, 0))
# draw button in buffer
win.blit(button_image, button_rect)
win.blit(text_image, text_rect)
# send buffer on screen
pygame.display.flip()
# slow down to 2 FPS (2 frames per second)
clock.tick(2)
# move button to new place
button_rect.x = random.randint(0, 500-button_rect.width)
button_rect.y = random.randint(0, 500-button_rect.height)
# center text on button
text_rect.center = button_rect.center
BTW: I use smaller text - size//2 but if you want to fit button to text size then you can do
button_rect.width = text_rect.width + margins
button_rect.height = text_rect.height + margins
and recreate image/surface
button_image = pygame.Surface(button_rect.size)
button_image.fill((255, 255, 255))
text_rect.center = button_rect.center
Minimal working code
import pygame
import random
pygame.init()
win = pygame.display.set_mode((500, 500))
size = 50
margins = 10
# --- button's rectange ---
button_image = pygame.Surface((3*size, 1*size))
#button_rect = pygame.Rect((10, 10, 3*size, 1*size))
button_rect = button_image.get_rect(x=100, y=100)
button_image.fill((255, 255, 255))
# --- button's text ---
text = "A Button"
font = pygame.font.Font(pygame.font.get_default_font(), size)
text_image = font.render(text, True, (255, 0, 0))
text_rect = text_image.get_rect(center=button_rect.center)
# --- resize button to text ---
button_rect.width = text_rect.width + margins
button_rect.height = text_rect.height + margins
button_image = pygame.Surface(button_rect.size)
button_image.fill((255, 255, 255))
text_rect.center = button_rect.center
# --- main loop ---
clock = pygame.time.Clock()
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
exit()
elif event.type == pygame.KEYDOWN:
if event.key == pygame.K_ESCAPE:
pygame.quit()
exit()
# clear buffer
win.fill((0, 0, 0))
# draw button in buffer
win.blit(button_image, button_rect)
win.blit(text_image, text_rect)
# send buffer on screen
pygame.display.flip()
# slow down to 2 FPS (2 frames per second)
clock.tick(2)
# move button to new place
button_rect.x = random.randint(0, 500-button_rect.width)
button_rect.y = random.randint(0, 500-button_rect.height)
# center text on button
text_rect.center = button_rect.center
I'm having issues integrating working buttons into this code. The buttons have been defined and show within pygame but I don't know where to go next. I've attempted to add mouse and click functions but I really don't know where they would be best located or how to use their functions
import pygame
pygame.init()
screen = pygame.display.set_mode((800, 600))
clock = pygame.time.Clock()
BLACK = (0, 0, 0)
BACKGROUND = (200, 230, 234)
WHITE = (255, 255, 255)
HOVER_COLOUR = (50, 70, 90)
# Text Variables
FONT = pygame.font.SysFont ("Times New Norman", 60)
TEXT = FONT.render ("", True, WHITE)
background_images = pygame.image.load("background.jpg").convert()
screen.blit(background_images, [0,0])
screen.blit(TEXT, (150, 50))
# Text & Rectangles construction
text1 = FONT.render("PlAY", True, WHITE)
text2 = FONT.render("CONTROLS", True, WHITE)
text3 = FONT.render("DIFFICULTY", True, WHITE)
text4 = FONT.render("SCOREBOARD", True, WHITE)
rect1 = pygame.Rect(250,200,300,80)
rect2 = pygame.Rect(250,300,300,80)
rect3 = pygame.Rect(250,400,300,80)
rect4 = pygame.Rect(250,500,300,80)
# The button construction arry. Text and Rectangle
buttons = [
[text1, rect1, BACKGROUND],
[text2, rect2, BACKGROUND],
[text3, rect3, BACKGROUND],
[text4, rect4, BACKGROUND],
]
def game_intro():
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
return
elif event.type == pygame.MOUSEMOTION:
for button in buttons:
# Uses collisionpoint to detect mouse position collisions
if button[1].collidepoint(event.pos):
# Set the button's colour to the hover colour.
button[2] = HOVER_COLOUR
else:
# resets the colour to normal.
button[2] = BACKGROUND
# Draws the buttons with their current colours (normal & collisions)
for text, rect, colour in buttons:
pygame.draw.rect(screen, colour, rect)
screen.blit(text, rect)
pygame.display.flip()
clock.tick(15)
#Run Game
game_intro()
scene_change()
pygame.quit()
When integrating this:
mouse = pygame.mouse.get_pos()
click = pygame.mouse.get_pressed()
The program kicks out an error about the mouse position function
Add ids to your buttons:
buttons = [
[text1, rect1, BACKGROUND, 1],
[text2, rect2, BACKGROUND, 2],
[text3, rect3, BACKGROUND, 3],
[text4, rect4, BACKGROUND, 4]
]
Add a function which handles a button event:
def on_button(button):
print(button[3])
Call the function when the button is pressed:
def game_intro():
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
return
elif event.type == pygame.MOUSEMOTION:
for button in buttons:
# Uses collisionpoint to detect mouse position collisions
if button[1].collidepoint(event.pos):
# Set the button's colour to the hover colour.
button[2] = HOVER_COLOUR
else:
# resets the colour to normal.
button[2] = BACKGROUND
elif event.type == pygame.MOUSEBUTTONDOWN:
for button in buttons:
# Uses collisionpoint to detect mouse position collisions
if button[1].collidepoint(event.pos):
on_button(button)
# Draws the buttons with their current colours (normal & collisions)
for text, rect, colour, button_id in buttons:
pygame.draw.rect(screen, colour, rect)
screen.blit(text, rect)
pygame.display.flip()
clock.tick(15)
I need to draw text into the buttons, which can be seen as the four smaller rectangles in my program, alongside this I need to draw text onto the title as well. I am unsure on how to do this, as the structure of my program, is different to others that I have seen.
Followed other questions, and the answer they've received in an attempt to influence mine.
import pygame
import sys
def main():
pygame.init()
clock = pygame.time.Clock()
fps = 60
size = [700, 600]
bg = [255, 255, 255]
font = pygame.font.Font('freesansbold.ttf', 32)
screen = pygame.display.set_mode(size)
black = (0, 0, 0)
button = pygame.Rect(400, 400, 250, 125)
button2 = pygame.Rect(50, 400, 250, 125)
button3 = pygame.Rect(400, 250, 250, 125)
button4 = pygame.Rect(50, 250, 250, 125)
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
return False
if event.type == pygame.MOUSEBUTTONDOWN:
mouse_pos = event.pos # gets mouse position
# checks if mouse position is over the button
if button.collidepoint(mouse_pos):
# prints current location of mouse
print('Instructions'.format(mouse_pos))
if button2.collidepoint(mouse_pos):
# prints current location of mouse
print('Controls'.format(mouse_pos))
if button3.collidepoint(mouse_pos):
# prints current location of mouse
print('Information'.format(mouse_pos))
if button4.collidepoint(mouse_pos):
# prints current location of mouse
print('Start Game'.format(mouse_pos))
screen.fill(bg)
pygame.draw.rect(screen, black, (button)) # draw button
pygame.draw.rect(screen, black, (button2))
pygame.draw.rect(screen, black, (button3))
pygame.draw.rect(screen, black, (button4))
pygame.draw.rect(screen, black, (50, 25, 600, 200))
pygame.display.update()
clock.tick(fps)
pygame.quit()
sys.exit
if __name__ == '__main__':
main()
I expect the buttons to have text on them, so in the future when I click on them they will open a new window.
If you want to use pygame.font, the you've to render the text by pygame.font.Font.render:
e.g.
red = (255, 0, 0)
button = pygame.Rect(400, 400, 250, 125)
text = font.render("button 1", True, red)
The result is a pygame.Surface, which can be .blit to the center of the rectangular button area:
pygame.draw.rect(screen, black, button)
textRect = text.get_rect()
textRect.center = button.center
screen.blit(text, textRect)
The other option is to use pygame.freetype:
e.g.
import pygame.freetype
ft_font = pygame.freetype.SysFont('Times New Roman', 32)
An to render the text directly to the screen by pygame.freetype.Font.render_to
text2 = "button 2"
textRect2 = ft_font.get_rect("button 2")
pygame.draw.rect(screen, black, button2)
textRect2.center = button2.center
ft_font.render_to(screen, textRect2, text2, red)
import pygame, sys, os.path
pygame.init()
# set up the colours
# R G B
BLACK = ( 0, 0, 0)
WHITE = (255, 255, 255)
RED = (255, 0, 0)
GREEN = ( 0, 255, 0)
BLUE = ( 50, 130, 255)
screen_surf = pygame.display.set_mode((500,500), 0, 24)
pygame.display.set_caption("Lewis' Menu")
screen_surf.fill((100,0,0))
class Button():
def create(self,w,h,colour):
self.button_surf = pygame.Surface((w,h), 0, 24)
self.button = pygame.draw.rect(self.button_surf, colour, (0, 0, w, h))
def view(self,text,x,y):
width = self.button_surf.get_width()
height = self.button_surf.get_height()
sys_font = pygame.font.SysFont(("None"), 25)
rendered = sys_font.render(text,0,(255,255,255))
self.button_surf.blit(rendered, ((width - 140),((height / 2) - 10)))
screen_surf.blit(self.button_surf, (x,y))
start_button = Button()
start_button.create(300,100,BLUE), start_button.view("Clicky Button!",10,10)
exit_button = Button()
exit_button.create(300,50,GREEN), exit_button.view("Exit!",10,200)
while True:
pos = pygame.mouse.get_pos()
for event in pygame.event.get():
if event.type == pygame.MOUSEBUTTONUP:
if start_button.button.collidepoint(pos):
print("You opened a chest!")
if exit_button.button.collidepoint(pos):
pygame.quit()
sys.exit()
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()
pygame.display.update()
The 'button click' functionality works by checking to see if the mouse position overlaps the button rect. I can reposition the blitted view of the rectangle in the Button.view() method, but the actual rectangle doesn't move with it, which makes the clicking functionality trigger in the wrong location in the window. Is there any way to move the actual button rectangle collision along with the blitted view of it?
Thanks in advance.
I'd replace the create method with an __init__ method in which the background surface, the text surface and their corresponding rects are created. That allows you to pass all the needed parameters during the instantiation:
start_button = Button(10, 10, 300, 100, "Clicky Button!", BLUE)
Use the parameters to place the self.button rect at the desired coordinates:
self.button = pygame.Rect(x, y, w, h)
You can also use the get_rect method of the button surface to create the rect (see the text_rect creation).
The only purpose of the view method is to blit the surfaces at their rects.
import sys
import pygame
pygame.init()
RED = (255, 0, 0)
GREEN = ( 0, 255, 0)
BLUE = ( 50, 130, 255)
screen_surf = pygame.display.set_mode((500,500), 0, 24)
screen_surf.fill((100,0,0))
clock = pygame.time.Clock()
# No need to recreate the font object all the time.
SYS_FONT = pygame.font.SysFont(None, 25)
class Button():
def __init__(self, x, y, w, h, text, colour):
self.button_surf = pygame.Surface((w,h), 0, 24)
self.button_surf.fill(colour)
self.button = pygame.Rect(x, y, w, h)
self.text_surf = SYS_FONT.render(text, False, (255,255,255))
# Pass the center coords of the button rect to the newly
# created text_rect for the purpose of centering the text.
self.text_rect = self.text_surf.get_rect(center=self.button.center)
def view(self, screen_surf):
screen_surf.blit(self.button_surf, self.button)
screen_surf.blit(self.text_surf, self.text_rect)
# Button() calls the __init__ method.
start_button = Button(10, 10, 300, 100, "Clicky Button!", BLUE)
start_button.view(screen_surf) # Call `view` in a separate line.
exit_button = Button(10, 200, 300, 50, "Exit!", GREEN)
exit_button.view(screen_surf)
while True:
for event in pygame.event.get():
if event.type == pygame.MOUSEBUTTONUP:
if start_button.button.collidepoint(event.pos):
print("You opened a chest!")
elif exit_button.button.collidepoint(event.pos):
pygame.quit()
sys.exit()
elif event.type == pygame.QUIT:
pygame.quit()
sys.exit()
pygame.display.update()
clock.tick(60) # Limit the frame rate to 60 FPS.
In my code, I am trying to place a text box in a specific location.
screen = pygame.display.set_mode((1000, 600), 0, 32) #Set the window to 1000x600
WHITE = (255, 255, 255)
BLUE = (0, 0, 255)
text = font.render('Start', True, BLACK)
textRect = text.get_rect()
What does the last line do, and how can I modify this code so that the text is placed at a specific (x,y) coordinate?
It get the rectangle associated with the rendered surface, change the location like so:
textRect.center = (center_x, center_y) # set center to (x, y) coordinates
Also, be sure that you are updating the screen and drawing the surface in your game loop:
while True:
pygame.display.flip()
screen.blit(text, textRect)
for event in pygame.event.get():
if event.type == QUIT:
pygame.quit()
sys.exit()