How to add an alpha value to surface objects in pygame?

Question

I am trying to make a menu screen where the 'New Game' and 'Load Game' icons appear to have no box around them until the mouse is over them at which point they have an opaque blue box. I have yet to implement the mouse controls in the code as I currently cannot get the blue box to become opaque. Any advice would be great. Currently the screen is black when the code is run, however removing line 30 causes the screen to appear as it should but with no alpha values.

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

FPS = 30 # frames per second, the general speed of the program
WINDOWWIDTH = 1000 # size of the window's width in pixels
WINDOWHEIGHT = 600 # size of window's height in pixels

#            R    G    B
WHITE    = (255, 255, 255)
RED      = (255, 0, 0)
BLUEINVIS = (0, 0, 255, 255)
BLUEOP = (0, 0, 255, 128)

# Colors

TEXTCOLOR = WHITE
TEXTBOXCOLOR = BLUEINVIS
HIGHLIGHTCOLOR = BLUEOP

BASICFONTSIZE = 20


def main():
    global FPSCLOCK, DISPLAYSURF, BASICFONT
    pygame.init()
    FPSCLOCK = pygame.time.Clock()
    DISPLAYSURF = pygame.display.set_mode((WINDOWWIDTH, WINDOWHEIGHT))
    DISPLAYSURF = DISPLAYSURF.convert_alpha()
    pygame.display.set_caption('Menu')

    BASICFONT = pygame.font.Font('freesansbold.ttf', 50)


    NEW_SURF, NEW_RECT = makeText('New Game', TEXTCOLOR, TEXTBOXCOLOR, WINDOWWIDTH /     2, WINDOWHEIGHT - (WINDOWHEIGHT * 3 / 8))
    LOAD_SURF, LOAD_RECT = makeText('Load Game', TEXTCOLOR, TEXTBOXCOLOR, WINDOWWIDTH / 2, WINDOWHEIGHT - (WINDOWHEIGHT / 4))

    DISPLAYSURF.convert_alpha()

    while True: # main game loop

        DISPLAYSURF.fill(RED)
        DISPLAYSURF.blit(NEW_SURF, NEW_RECT)
        DISPLAYSURF.blit(LOAD_SURF, LOAD_RECT)


        for event in pygame.event.get(): # event handling loop
            #if event.type == MOUSEBUTTONUP:

                #if NEW_RECT.collidepoint(event.pos):

                #elif LOAD_RECT.collidepoint(event.pos):

            #if newRectObj.collidepoint(event.pos):
                #newSurfaceObj = fontObj.render('New Game', True, TEXTCOLOR, HIGHLIGHTCOLOR)            

            if event.type == QUIT:
                pygame.quit()
                sys.exit()

        pygame.display.update()
        FPSCLOCK.tick(FPS)

def makeText(text, color, bgcolor, x, y):
    # create the Surface and Rect objects for some text.
    textSurf = BASICFONT.render(text, True, color, bgcolor)
    textRect = textSurf.get_rect()
    textRect.center = (x, y)
    return (textSurf, textRect)

if __name__ == '__main__':
    main()

score 1 · Answer 1 · answered Jul 22 '13 at 14:30

Use: surface = surface.convert_alpha()

Using surface.convert_alpha() alone does nothing. The convert_alpha() returns a suface with an alpha value.

http://www.pygame.org/docs/ref/surface.html#pygame.Surface.convert_alpha

Eg.: image1 = pygame.image.load("images/person.png").convert_alpha()

score 1 · Answer 2 · edited May 23 '17 at 11:57

If I replace your code by this snippet, it displays your text (white on blue) when the cursor hovers it (inspired from this SO question). I also added some transparency if you want (uncomment the set_alpha lines):

def main():
    global BASICFONT
    pygame.init()
    FPSCLOCK = pygame.time.Clock()
    DISPLAYSURF = pygame.display.set_mode((WINDOWWIDTH, WINDOWHEIGHT))
    background=pygame.Surface((DISPLAYSURF.get_rect().width, DISPLAYSURF.get_rect().height))
    background.fill(RED)

    BASICFONT = pygame.font.Font('freesansbold.ttf', 50)

    pygame.display.set_caption('Menu')

    NEW_SURF, NEW_RECT = makeText('New Game', TEXTCOLOR, TEXTBOXCOLOR, WINDOWWIDTH /     2, WINDOWHEIGHT - (WINDOWHEIGHT * 3 / 8))
    LOAD_SURF, LOAD_RECT = makeText('Load Game', TEXTCOLOR, TEXTBOXCOLOR, WINDOWWIDTH / 2, WINDOWHEIGHT - (WINDOWHEIGHT / 4))
    #NEW_SURF.set_alpha(128)
    #LOAD_SURF.set_alpha(128)

    while True: # main game loop

        DISPLAYSURF.blit(background, background.get_rect())
        DISPLAYSURF.blit(NEW_SURF, NEW_RECT)
        DISPLAYSURF.blit(LOAD_SURF, LOAD_RECT)

        for event in pygame.event.get(): # event handling loop
            if event.type == MOUSEMOTION:
                if NEW_RECT.collidepoint(event.pos):
                  NEW_SURF = BASICFONT.render('New Game', True, TEXTCOLOR, HIGHLIGHTCOLOR)
                  #NEW_SURF.set_alpha(255)

                elif LOAD_RECT.collidepoint(event.pos):
                  LOAD_SURF = BASICFONT.render('Load Game', True, TEXTCOLOR, HIGHLIGHTCOLOR)
                  #LOAD_SURF.set_alpha(255)

                else:
                  NEW_SURF = BASICFONT.render('New Game', True, TEXTCOLOR, TEXTBOXCOLOR)
                  LOAD_SURF = BASICFONT.render('Load Game', True, TEXTCOLOR, TEXTBOXCOLOR)
                  #NEW_SURF.set_alpha(128)
                  #LOAD_SURF.set_alpha(128)

Thanks for your help. It's my first time posting here and I am not disappointed. I was just wondering if there was any way for my text and it's surrounding box to have different alpha values. I'd like the text to always be 255 and the box to change if possible. — Ben McAlindin, Jul 23 '13 at 10:05

How to add an alpha value to surface objects in pygame?

2 Answers2