Question

I’ve been trying to get this snippet of python code to work, but to no avail. So what I’m trying to do is to make my button have 3 states: idle, hover, and clicked.

However, for some reason the image isn’t changing. Could someone please tell me what I’m doing wrong?

import pygame,sys,os
from pygame.locals import *

BG = "bg.jpg"
BUTTON1 = "buttonidle.png"
BUTTON2 = "buttonhov.png"
BUTTON3 = "buttonclick.png"

def load_image(name, colorkey=None):
    fullname = os.path.join(name)
    try:
        image = pygame.image.load(fullname)
    except pygame.error, message:
        print "Can't load image:", name
        raise SystemExit, message
    image = image.convert()
    if colorkey is not None:
        if colorkey is -1:
            colorkey = image.get_at((0,0))
        image.set_colorkey(colorkey, RLEACCEL)
    return image, image.get_rect()


class Button(pygame.sprite.Sprite):

    global buttonsprite

    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        if buttonsprite == 1:
            self.image,self.rect = load_image(BUTTON1, -1)
        screen = pygame.display.get_surface()
        self.area = screen.get_rect()
        self.rect.topleft = 190, 140

        if buttonsprite == 2:
            self.image,self.rect = load_image(BUTTON2, -1)
        if buttonsprite == 3:
            self.image,self.rect = load_image(BUTTON3, -1)







buttonsprite = 1
pygame.init()
screen = pygame.display.set_mode((500,300))
pygame.display.set_caption('Window')

background = pygame.Surface(screen.get_size())
background = background.convert()
background.fill((255,255,255))

screen.blit(background,(0,0))
pygame.display.flip()

button = Button()
allsprites = pygame.sprite.RenderPlain((button))
allsprites.update()
screen.blit(background,(0,0))
allsprites.draw(screen)
pygame.display.flip()

while True:
    x,y = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()
    if x >= 193 and x <= 315 and y >= 143 and y <= 171:
        buttonsprite = 2
        if event.type == MOUSEBUTTONDOWN:
            buttonsprite = 3
    else:    
        buttonsprite = 1

Thank you!

EDIT:

Alright, I got some help and I added an update function. But it still doesn’t seem to work.

import pygame,sys,os
from pygame import *

BG = "bg.jpg"
BUTTON1 = "buttonidle.png"
BUTTON2 = "buttonhov.png"
BUTTON3 = "buttonclick.png"

buttonsprite = 1

def load_image(name, colorkey=None):
    fullname = os.path.join(name)
    try:
        image = pygame.image.load(fullname)
    except pygame.error, message:
        print "Can't load image:", name
        raise SystemExit, message
    image = image.convert()
    if colorkey is not None:
        if colorkey is -1:
            colorkey = image.get_at((0,0))
        image.set_colorkey(colorkey, RLEACCEL)
    return image, image.get_rect()


class Button(pygame.sprite.Sprite):

    global buttonsprite

    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image,self.rect = load_image(BUTTON3, -1)
        screen = pygame.display.get_surface()
        self.area = screen.get_rect()
        self.rect.topleft = 190, 140

    def update(self):
        if buttonsprite == 1:
            self.image,self.rect = load_image(BUTTON1, -1)
        if buttonsprite == 2:
            self.image,self.rect = load_image(BUTTON2, -1)
        if buttonsprite == 3:
            self.image,self.rect = load_image(BUTTON3, -1)




pygame.init()
screen = pygame.display.set_mode((500,300))
pygame.display.set_caption('Window')

background = pygame.Surface(screen.get_size())
background = background.convert()
background.fill((255,255,255))

screen.blit(background,(0,0))
pygame.display.flip()

button = Button()
allsprites = pygame.sprite.RenderPlain((button))
allsprites.update()
screen.blit(background,(0,0))
allsprites.draw(screen)
pygame.display.flip()

while True:

    x,y = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()
        if event.type == MOUSEBUTTONUP:
            if x>=193 and x<=315 and y>=143 and y<=171:
                buttonsprite = 2
                button.update()
            else:
                buttonsprite = 1
                button.update()
        if event.type == MOUSEBUTTONDOWN:
            if x>=193 and x<=315 and y>=143 and y<=171:
                buttonsprite = 3
                button.update()
            else:
                pass

Answer 1

I would think that it’s because you’re not calling some sort of update function that actively changes the image. If you were to recreate the button after you’d be able to see the change you want.

Basically, changing the value doesn’t go far enough towards what you want to do, you need to let the Button know that it’s got a new value.

Bad related example:

def button():
  global number
  print number

number = 1

button() 
>>> 1           <----------------↰
number = 'A STRING NOW'          ↑
#now the printed string doesn't above change, so you'd have to call button again for it to change:
button()
>>> A STRING NOW # <-- BAM