Develop Reference

I need to add text to my rectangles, how would I do this?

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)

How to single click and turn to another page in Pygame?

So I'm writing this code for a school assignment, which I'm supposed to use pygame and display some text. I put those text in different pages, and if single click the screen, it will show the next screen.
Here is what I have so far:
import pygame
pygame.init()
pygame.font.init()
# defining the screen
SIZE = (1000, 700)
screen = pygame.display.set_mode(SIZE)
# define time
clock = pygame.time.Clock()
#define button
button = 0
# define font
fontIntro = pygame.font.SysFont("Times New Roman",30)
# define draw scene
def drawIntro(screen):
#start
if button > 0:
screen.fill((0, 0, 0))
text = fontIntro.render("Sigle click to start", 1, (255,255,255))
screen.blit(text, (300, 300, 500, 500))
pygame.display.flip()
#page1
if button == 1:
screen.fill((0, 0, 0))
text = fontIntro.render("page 1", True, (255, 255, 255))
pygame.display.flip()
#page2
if button == 1:
screen.fill((0, 0, 0))
text = fontIntro.render("page 2", True, (255, 255, 255))
screen.blit(text, (300,220,500,200))
pygame.display.flip()
#page3
if button == 1:
screen.fill((0, 0, 0))
text = fontIntro.render("page3", True, (255, 255, 255))
screen.blit(text, (200,190,500,200))
pygame.display.flip()
running = True
while running:
for evnt in pygame.event.get():
if evnt.type == pygame.QUIT:
running = False
if evnt.type == pygame.MOUSEMOTION:
mx,my = evnt.pos
print(evnt.pos)
drawIntro(screen)
pygame.quit()
Though it is not working, can someone please help?! Thanks!

You define button = 0 at the beginning, but never change its value in your main loop. In your drawIntro function, you check if button > 0 or if button == 1
So obviously you never execute any of those if statements.
You need to catch the mouse button by calling pygame.mouse.get_pressed() and figure how to switch correctly to the next page.
By the way, you also have if button == 1 three times, which is not what you want I guess, because the if statements will be immediately executed as they are written, so your page 3 will be shown immediately. You need some counter to keep track of which page you need to show next time the mouse button is pressed.

You need to increment the button counter when the user presses a mouse button.
The drawIntro function shouldn't be called in the event loop once per pygame.MOUSEMOTION event but in the main while loop. Also, change MOUSEMOTION to MOUSEBUTTONDOWN to increment the button once per click.
The conditionals in the drawIntro function are incorrect.
import pygame
pygame.init()
SIZE = (1000, 700)
screen = pygame.display.set_mode(SIZE)
clock = pygame.time.Clock()
button = 0
fontIntro = pygame.font.SysFont("Times New Roman",30)
def drawIntro(screen):
#start
if button == 0: # == 0
screen.fill((0, 0, 0))
text = fontIntro.render("Sigle click to start", 1, (255,255,255))
screen.blit(text, (300, 300, 500, 500))
elif button == 1: #page1
screen.fill((0, 0, 0))
text = fontIntro.render("page 1", True, (255, 255, 255))
screen.blit(text, (300,220,500,200))
elif button == 2: #page2
screen.fill((0, 0, 0))
text = fontIntro.render("page 2", True, (255, 255, 255))
screen.blit(text, (300,220,500,200))
elif button == 3: #page3
screen.fill((0, 0, 0))
text = fontIntro.render("page3", True, (255, 255, 255))
screen.blit(text, (200,190,500,200))
running = True
while running:
for evnt in pygame.event.get():
if evnt.type == pygame.QUIT:
running = False
if evnt.type == pygame.MOUSEBUTTONDOWN: # Once per click.
button += 1
drawIntro(screen)
pygame.display.flip()
pygame.quit()

How to implement button interaction for Main Menu (Pygame)

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

Main menu help (pygame)

I have created mouse clicking functions to print (start, options and about) when I click those buttons. I just don't know how to go to the next stage of actually opening a new page once clicking those buttons. I had a go with trying to screen.fill when clicking the button but it would only last a couple of seconds and buttons would appear in front of it.
I am fairly new to pygame.
Here is my code so far,
import pygame
from pygame import *
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)
#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)
#Background
bg = pygame.image.load("greybackground.png")
#Fonts
FONT = pygame.font.SysFont ("Times New Norman", 60)
text1 = FONT.render("START", True, WHITE)
text2 = FONT.render("OPTIONS", True, WHITE)
text3 = FONT.render("ABOUT", True, WHITE)
#Buttons
rect1 = pygame.Rect(300,300,205,80)
rect2 = pygame.Rect(300,400,205,80)
rect3 = pygame.Rect(300,500,205,80)
buttons = [
[text1, rect1, BLACK],
[text2, rect2, BLACK],
[text3, rect3, BLACK],
]
running = False
def game_intro():
while not running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
return
elif event.type == pygame.MOUSEMOTION:
for button in buttons:
if button[1].collidepoint(event.pos):
button[2] = HOVER_COLOR
else:
button[2] = BLACK
screen.blit(bg, (0, 0))
for text, rect, color in buttons:
pygame.draw.rect(screen, color, rect)
screen.blit(text, rect)
if event.type == pygame.MOUSEBUTTONDOWN:
if event.button == 1:
if rect1.collidepoint(event.pos):
screen.fill((0, 0, 0))
elif rect2.collidepoint(event.pos):
print ('options')
elif rect3.collidepoint(event.pos):
print ('about')
if event.type == KEYDOWN:
if (event.key == K_UP):
print ("UP was pressed")
elif (event.key == K_DOWN):
print ("DOWN was pressed")
elif (event.key == K_w):
print ("W was pressed")
elif (event.key == K_s):
print ("S was pressed")
else:
print ("error")
pygame.display.flip()
clock.tick(60)
game_intro()
pygame.quit()

I actually had to do a similar thing myself. This is what you would put at the bottom:
while running:
event = pygame.event.wait()
if event.type == pygame.MOUSEBUTTONUP:
if event.button == 1:
x,y = pygame.mouse.get_pos()
if 300 <= x <= 505 and 300 <= y <= 380:
#change stuff here
running = False
#insert code here \/ for the next screen
This can be used universally for every button. If you need more buttons, just copy and paste the third if statment and change as needed.
Don't forget to do 'pygame.display.update()' to refresh the screen; else, you will see nothing change (which is what happened to me).
I hope this helps!

Python/Pygame: Placing text in a specific location

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()