pythonfontspygame-widgets

Scale pygame button size based on font size


I want to take a font size (14) and using pygame_widgets.button.Button() scale it to match the font size up to a maximum

almost every question I've seen on here has been the other way around at the moment I'm unfamiliar with the maths that would be used but I would greatly appreciate the help

import pygame
import pygame_widgets
from pygame_widgets.button import Button

pygame.init()

font_size = 14

screen = pygame.display.set_mode((640, 480))

font = pygame.font.SysFont('Arial', font_size)

Wide = 60  # Math
High = 20  # Math

button = Button(
    screen,  # surface to display
    10,  # Button's top left x coordinate
    10,  # Button's top left y coordinate
    Wide,  # Button's Width
    High,  # Button's Height
    text="Button",
    fontSize=font_size,
    inactiveColour=(255, 255, 255),
    hoverColour=(245, 245, 245),
    pressedColour=(230, 230, 230),
    radius=2,  # curve on the button corners
    onClick=lambda: print("Click")
)

while True:
    events = pygame.event.get()
    for event in events:
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

        screen.fill((200, 200, 200))
        
        pygame_widgets.update(events)

        pygame.display.update()

Solution

  • For scaling a button's size dynamically based on its font size you can use a simple proportional scaling method.

    I've implemented it in code done below:

    import pygame
    import pygame_widgets
    from pygame_widgets.button import Button
    import sys
    
    pygame.init()
    
    screen = pygame.display.set_mode((640, 480))
    
    base_font_size = 14
    current_font_size = 14
    max_font_size = 40  # Max font size for scaling
    
    # Button size at base font size (14)
    base_button_width = 60
    base_button_height = 20
    
    def scale_button_size(font_size, max_size):
        """ Scales the button dimensions proportionally to font size """
        scale_factor = font_size / base_font_size
        width = min(base_button_width * scale_factor, max_size)
        height = min(base_button_height * scale_factor, max_size)
        return int(width), int(height)
    
    # Get scaled button dimensions
    Wide, High = scale_button_size(current_font_size, max_font_size)
    
    # Create button with scaled dimensions
    button = Button(
        screen,
        10,  # Button's top-left x coordinate
        10,  # Button's top-left y coordinate
        Wide,  # Button's width
        High,  # Button's height
        text="Button",
        fontSize=current_font_size,
        inactiveColour=(255, 255, 255),
        hoverColour=(245, 245, 245),
        pressedColour=(230, 230, 230),
        radius=2,
        onClick=lambda: print("Click")
    )
    
    while True:
        events = pygame.event.get()
        for event in events:
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
    
        screen.fill((200, 200, 200))
        pygame_widgets.update(events)
        pygame.display.update()