Designing a Button UI Module for Pygame

  • caption – The string for the text caption in the center of the button.
  • rect – A pygame.Rect object which gives the position and size of the button.
  • visible – A boolean that sets the button to visible (True) or invisible (False).
  • fgcolor – An RGB tuple or pygame.Color object for the text (foreground) color.
  • bgcolor – An RGB tuple or pygame.Color object for the background color.
  • font – A pygame.font.Font object for the font (and size) to use for the text caption.

Setting any of these properties (other than rect) will result in the button becoming a text-based button if it was previously an image-based button. Setting the rect property of an image-based button simply resizes the images.

Note that we don’t have properties for setting the normal, down, and highlight Surfaces. This is because when we switch from a normal text-based button (which uses the caption, fgcolor, bgcolor, and font properties) to an image-based button, we want to set the images for all three Surfaces at the same time (even though we have defaults for the down and highlight surfaces.)

The Preamble Code

Here’s the code that goes at the top of the pygbutton.py file. It imports Pygame and calls the init() function for the fonts and creates a few constants that we’ll use in the module.

import pygame from pygame.locals import * pygame.font.init() PYGBUTTON_FONT = pygame.font.Font('freesansbold.ttf', 14) BLACK = ( 0, 0, 0) WHITE = (255, 255, 255) DARKGRAY = ( 64, 64, 64) GRAY = (128, 128, 128) LIGHTGRAY = (212, 208, 200)

The Constructor Function

The constructor function is fairly straight forward. There are many different attributes that we can customize for a button, but we can always just create a standard default button.

class PygButton(object): def __init__(self, rect=None, caption='', bgcolor=LIGHTGRAY, fgcolor=BLACK, font=None, normal=None, down=None, highlight=None): if rect is None: self._rect = pygame.Rect(0, 0, 30, 60) else: self._rect = pygame.Rect(rect) self._caption = caption self._bgcolor = bgcolor self._fgcolor = fgcolor if font is None: self._font = PYGBUTTON_FONT else: self._font = font # tracks the state of the button self.buttonDown = False # is the button currently pushed down? self.mouseOverButton = False # is the mouse currently hovering over the button? self.lastMouseDownOverButton = False # was the last mouse down event over the mouse button? (Used to track clicks.) self._visible = True # is the button visible self.customSurfaces = False # button starts as a text button instead of having custom images for each surface if normal is None: # create the surfaces for a text button self.surfaceNormal = pygame.Surface(self._rect.size) self.surfaceDown = pygame.Surface(self._rect.size) self.surfaceHighlight = pygame.Surface(self._rect.size) self._update() # draw the initial button images else: # create the surfaces for a custom image button self.setSurfaces(normal, down, highlight)

For image-based buttons, the setSurfaces() method is called, which handles the default images for the Down and Highlight state if they are unspecified. It also checks that the images are the same size. Note that the user can specify either pygame.Surface objects or string filename values.

Page 3 of 6 | Previous page | Next page