change image based on click in pygame

Question

I've done a google search and searched through my two python beginner books to find how to do this. I assume it has to be a simple task. Basically, I'm working with pygame with python.

I want that if I click on the button1_image, it changes to button1select_image, right? And if you click on button2_image, it sets button1select_image back to button1_image, and button2_image changes to button2select_image.

So what I am wondering is if it is a simple if else statement or is it much more complicated. Obviously, the buttons will do something else later but I cannot find a tutorial on how to do something like this based on the click of the users mouse.

# Button Mouse Click Image Change
# Demonstrates changing from one button image to another based on click of mouse.

from livewires import games, color

games.init(screen_width = 281, screen_height = 500, fps = 50)

button1_image = games.load_image("button1.png", transparent = False)
button1 = games.Sprite(image = button1_image, x = 28,y = 18)
games.screen.add(button1)

button1select_image = games.load_image("button1select.png", transparent = False)
button1select = games.Sprite(image = button1select_image, x = 28,y = 18)
games.screen.add(button1select)

button2_image = games.load_image("button2.png", transparent = False)
button2 = games.Sprite(image = button2_image, x = 56,y = 18)
games.screen.add(button2)

button2select_image = games.load_image("button2select.png", transparent = False)
button2select = games.Sprite(image = button2select_image, x = 56,y = 18)
games.screen.add(button2select)

games.screen.mainloop()

Answer 1

Take a look at this example menu : https://stackoverflow.com/a/10747990/341744 specifically at his code: https://gist.github.com/2802185

It creates a class Option, which changes color when you mouseover. You could extend it, so on click, the button calls a function. ( ie: new_game() , show_options() etc )

Answer 2

Here's some pseudocode:

selected_button = None
buttons = [button1, button2]

...

for event in pygame.event.get():
  ...
  if event.type == MOUSEBUTTONDOWN:
      for b in buttons:
          if b.rect.collidepoint(event.pos):
              if selected_button == b:
                  # unselect this button
              else:
                  # unselect the old button (if there's one) and select this one
  ...

Answer 3

Here, I whipped this up to show how the mouse works. The line if event.button == 1: checks if the left mouse button has been pressed, change the 1 to a 2 if you want the right mouse button.

import pygame, sys
from pygame.locals import *

TIMER = 30
SCREEN_X = 200
SCREEN_Y = 200

screen = pygame.display.set_mode((SCREEN_X, SCREEN_Y))
clock = pygame.time.Clock() #tick-tock

ending = button1 = button2 = False

corner1 = (28,18)  #Top Left corner of button 1
corner2 = (56,18)  #Top Left corner of button 2

image_length = 100 #length of the buttons
image_height = 100 #height of the buttons

counter = 0

#Main Loop:
while ending==False:
    counter+=1
    clock.tick(TIMER)
    for event in pygame.event.get():
        if event.type == KEYDOWN:
            if event.key == K_ESCAPE:
                ending=True # Time to leave
                print("Game Stopped Early by user")
        elif event.type == MOUSEBUTTONDOWN:
            if event.button == 1:
                mouse_x, mouse_y = event.pos
                if (mouse_x >= corner1[0]) and (mouse_x <= corner1[0]+image_length) and (mouse_y >= corner1[1]) and (mouse_y <= corner1[1]+image_height):
                    print ("Button one is selected")
                    button1=True
                    button2=False
                elif (mouse_x >= corner2[0]) and (mouse_x <= corner2[0]+image_length) and (mouse_y >= corner2[1]) and (mouse_y <= corner2[1]+image_height):
                    print ("Button two is selected")
                    button1=False
                    button2=True
                else:
                    print ("That's not a button")
                    button1=False
                    button2=False
    if counter == TIMER:  #prints the statements once a second
        counter=0
        if button1==True:
            print ("Button one is currently selected")
        elif button2==True:
            print ("Button two is currently selected")
        else:
            print ("No buttons currently selected")

At the print statements at the bottom. Simply use the selected image for buttons 1 or 2 if the button1 or button2 variable, respectively, is True. The else would be if none are selected so you have both of the images as the unselected button. If you don't know how to use images and the like, have a look around here: http://www.pygame.org/docs/ It really helped me. Try it out yourself, and if you're still stuck Stack Exchange will still be here for your questions :)

Hope it helps