Clickable images in pygame? - pygame

Question

#Imported Pygame
import pygame
#The Colors
BLACK = ( 0, 0, 0)
GREEN = ( 0, 255, 0)
WHITE = ( 255, 255, 255)
RED = ( 255, 0, 0)
ORANGE = ( 255, 115, 0)
YELLOW = ( 242, 255, 0)
BROWN = ( 115, 87, 39)
PURPLE = ( 298, 0, 247)
GRAY = ( 168, 168, 168)
PINK = ( 255, 0, 234)
pygame.init()
#The Screen
screen = pygame.display.set_mode([1000,500])
#Name of the window
pygame.display.set_caption("My first game")
clock = pygame.time.Clock()
#The sounds
# Positions of graphics
background_position = [0,0]
singleplayer_position = [350,200]
#The graphics
background_image = pygame.image.load("Castle.png").convert()
singleplayer_image = pygame.image.load("SinglePlayer.png").convert()
singleplayer_image.set_colorkey(WHITE)
#Main Loop __________________________
done = False
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
# Copy of background or main menu
screen.blit(background_image, background_position)
#Copy of other images
screen.blit(singleplayer_image, singleplayer_position)
pygame.display.flip()
if pygame.mouse.get_pressed()[0] and singleplayer_image.collidepoint(mouse_pos):
print("Hi")
clock.tick(60)
#To quit game
pygame.quit()
This is basicaly my code, but I keep getting the error that pygame.surface object has no attribute collide point. Im trying to have a clickable image,, but it isn't working to well. If you could show a way that a image can be clickable thank you.

Answer 1

Your traceback is explaining the issue perfectly: pygame surfaces do not have an attribute collide_point. Collidepoint belongs to the Rect class, but you are calling it on a Surface object.
To test if if the mouse position collides with the image, you need to have a Rect that describes the images position. So, if you redefine your singleplayer_position...
singleplayer_position = Rect(350, 200, 100, 100) # Width/height of 100 pixels.
You can now use this variable for Rect methods, such as collidepoint.
singleplayer_position.collidepoint(mouse_pos)
Note: To have your Rect accurately represent the picture you load..
singleplayer_position = singleplayer_image.get_rect()
This defaults to the top left, but it has the correct width/height now. Lets move it to where you wanted it.
singleplayer_position = singleplayer_position.move(350, 200)
Edit, to show how to get mouse position:
Add at the top,
from pygame.locals import * # Brings in all the pygame keywords we need.
Now, add this to your event for loop.
if event.type == MOUSEBUTTONDOWN:
mouse_pos = event.pos # Now it will have the coordinates of click point.
if singleplayer_position.collidepoint(mouse_pos):
print('hi')
Now, whenever the mousebutton is clicked down, you can check the images Rect (singleplayer_position) to see if it collides with where the mouse was clickd.