在 pygame 中添加/创建下拉选择框的技巧 [英] tips on Adding/creating a drop down selection box in pygame

问题描述

我正在 pygame 中制作一个游戏，需要我有一个下拉框和单选按钮来选择一个选项.任何有关如何解决此问题的提示将不胜感激.

问候，

解决方案

我建议为图形 UI 元素实现一个类.该类有一个构造函数 (__init__)，它定义了所有必需的属性和所有必需的状态.Draw 方法，根据其当前状态绘制整个 UI 元素.该类应该有一个接收事件的更新方法，改变 UI 的状态:

class OptionBox():def __init__(self, x, y, w, h, color, ...):...定义绘制(自我，冲浪):...定义更新(自我，事件列表):...

另见

选项框:

导入pygameOptionBox() 类:def __init__(self, x, y, w, h, color, highlight_color, font, option_list, selected = 0):self.color = 颜色self.highlight_color = highlight_colorself.rect = pygame.Rect(x, y, w, h)self.font = 字体self.option_list = option_listself.selected = 选择self.draw_menu = Falseself.menu_active = Falseself.active_option = -1定义绘制(自我，冲浪):pygame.draw.rect(冲浪，self.highlight_color if self.menu_active else self.color, self.rect)pygame.draw.rect(surf, (0, 0, 0), self.rect, 2)msg = self.font.render(self.option_list[self.selected], 1, (0, 0, 0))surf.blit(msg, msg.get_rect(center = self.rect.center))如果 self.draw_menu:对于我，枚举中的文本(self.option_list):rect = self.rect.copy()rect.y += (i+1) * self.rect.heightpygame.draw.rect(surf, self.highlight_color if i == self.active_option else self.color, rect)msg = self.font.render(text, 1, (0, 0, 0))surf.blit(msg, msg.get_rect(center = rect.center))external_rect = (self.rect.x, self.rect.y + self.rect.height, self.rect.width, self.rect.height * len(self.option_list))pygame.draw.rect(冲浪，(0, 0, 0)，外层矩形，2)定义更新(自我，事件列表):mpos = pygame.mouse.get_pos()self.menu_active = self.rect.collidepoint(mpos)self.active_option = -1对于我在范围内(len(self.option_list)):rect = self.rect.copy()rect.y += (i+1) * self.rect.height如果 rect.collidepoint(mpos):self.active_option = i休息如果不是 self.menu_active 和 self.active_option == -1:self.draw_menu = False对于 event_list 中的事件:如果 event.type == pygame.MOUSEBUTTONDOWN 和 event.button == 1:如果 self.menu_active:self.draw_menu = 不是 self.draw_menuelif self.draw_menu 和 self.active_option >= 0:self.selected = self.active_optionself.draw_menu = False返回 self.active_option返回-1pygame.init()时钟 = pygame.time.Clock()窗口 = pygame.display.set_mode((640, 480))list1 = OptionBox(40, 40, 160, 40, (150, 150, 150), (100, 200, 255), pygame.font.SysFont(None, 30),[选项 1"、第二选项"、另一个选项"])运行 = 真运行时:时钟滴答(60)event_list = pygame.event.get()对于 event_list 中的事件:如果 event.type == pygame.QUIT:运行 = 错误selected_option = list1.update(event_list)如果 selected_option >= 0:打印(selected_option)window.fill((255, 255, 255))list1.draw(窗口)pygame.display.flip()pygame.quit()出口()

I am making a game in pygame that requires me to have a drop down box and radio buttons for selection of an option. Any hints as to how to go about this would be appreciated.

Regards,

解决方案

I recommend implementing a class for graphical UI elements. The class has a constructor (__init__) that defines all required attributes and all required states. A Draw method that draws the entire UI element depending on its current state. The class should have an update method that receives the events, changes the state of the UI:

class OptionBox():

    def __init__(self, x, y, w, h, color, ...):
        ...
    
    def draw(self, surf):
        ...

    def update(self, event_list):
        ...

See also UI elements and see some examples:

Dropdown menu

Radio Button

Option Box:

import pygame

class OptionBox():

    def __init__(self, x, y, w, h, color, highlight_color, font, option_list, selected = 0):
        self.color = color
        self.highlight_color = highlight_color
        self.rect = pygame.Rect(x, y, w, h)
        self.font = font
        self.option_list = option_list
        self.selected = selected
        self.draw_menu = False
        self.menu_active = False
        self.active_option = -1

    def draw(self, surf):
        pygame.draw.rect(surf, self.highlight_color if self.menu_active else self.color, self.rect)
        pygame.draw.rect(surf, (0, 0, 0), self.rect, 2)
        msg = self.font.render(self.option_list[self.selected], 1, (0, 0, 0))
        surf.blit(msg, msg.get_rect(center = self.rect.center))

        if self.draw_menu:
            for i, text in enumerate(self.option_list):
                rect = self.rect.copy()
                rect.y += (i+1) * self.rect.height
                pygame.draw.rect(surf, self.highlight_color if i == self.active_option else self.color, rect)
                msg = self.font.render(text, 1, (0, 0, 0))
                surf.blit(msg, msg.get_rect(center = rect.center))
            outer_rect = (self.rect.x, self.rect.y + self.rect.height, self.rect.width, self.rect.height * len(self.option_list))
            pygame.draw.rect(surf, (0, 0, 0), outer_rect, 2)

    def update(self, event_list):
        mpos = pygame.mouse.get_pos()
        self.menu_active = self.rect.collidepoint(mpos)
        
        self.active_option = -1
        for i in range(len(self.option_list)):
            rect = self.rect.copy()
            rect.y += (i+1) * self.rect.height
            if rect.collidepoint(mpos):
                self.active_option = i
                break

        if not self.menu_active and self.active_option == -1:
            self.draw_menu = False

        for event in event_list:
            if event.type == pygame.MOUSEBUTTONDOWN and event.button == 1:
                if self.menu_active:
                    self.draw_menu = not self.draw_menu
                elif self.draw_menu and self.active_option >= 0:
                    self.selected = self.active_option
                    self.draw_menu = False
                    return self.active_option
        return -1

pygame.init()
clock = pygame.time.Clock()
window = pygame.display.set_mode((640, 480))

list1 = OptionBox(
    40, 40, 160, 40, (150, 150, 150), (100, 200, 255), pygame.font.SysFont(None, 30), 
    ["option 1", "2nd option", "another option"])

run = True
while run:
    clock.tick(60)
    event_list = pygame.event.get()
    for event in event_list:
        if event.type == pygame.QUIT:
            run = False

    selected_option = list1.update(event_list)
    if selected_option >= 0:
        print(selected_option)

    window.fill((255, 255, 255))
    list1.draw(window)
    pygame.display.flip()
    
pygame.quit()
exit()

这篇关于在 pygame 中添加/创建下拉选择框的技巧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！