Текст PyGame под кнопкой

Question

У меня проблема с моим кодом, в частности с pygame и кнопками

Изначально я добавлял кнопки вручную, но решил, что вместо них будет лучше использовать классы. Однако текст отображается под моей кнопкой, а не поверх нее.

Как заставить текст отображаться поверх кнопки?

Вот мой код:

import pygame as P
import sys

P.init()

class MENU():
    def __init__(self, BUTTON_COUNT, WINDOW, RESOLUTION, BUTTON_WIDTH, BUTTON_HEIGHT, BUTTON_PADDING_X, BUTTON_PADDING_Y):
        self.WINDOW = WINDOW
        self.BUTTON_COUNT = BUTTON_COUNT
        self.RESOLUTION = RESOLUTION
        self.BUTTON_WIDTH = BUTTON_WIDTH
        self.BUTTON_HEIGHT = BUTTON_HEIGHT
        self.BUTTON_PADDING_X = BUTTON_WIDTH + BUTTON_PADDING_X
        self.BUTTON_PADDING_Y = BUTTON_HEIGHT + BUTTON_PADDING_Y

        self.SETTINGS_ON = True
        self.ONCE = False
        self.FPS = P.time.Clock()

        while self.SETTINGS_ON:
            self.FPS.tick(30)
            self.WINDOW.fill((0, 0, 0))

            self.CENTER_X = RESOLUTION[0]//2
            self.CENTER_Y = RESOLUTION[1]//2

            self.TITLE_FONT = P.font.SysFont("calibri", 75)
            self.MESSAGE_FONT = P.font.SysFont("calibri", 20)
            self.BUTTON_FONT = P.font.SysFont("calibri", 25)

            if self.ONCE == False:
                self.CREATE_BUTTONS((127, 127, 127), (191, 191, 191), ("BUTTON 1", "BUTTON 2", "BUTTON 3"))
                self.ONCE = True
            if self.ONCE == True:
                self.VIEW_BUTTONS()


            event = P.event.wait()
            if event.type == P.KEYDOWN and event.key == P.K_RETURN:
                self.SETTINGS_ON = False

            if event.type == P.MOUSEMOTION:
                for i in range(0, self.BUTTON_COUNT):
                    if vars(self)["BTN"+str(i+1)+"_RECT"].collidepoint(event.pos):
                        vars(self)["BTN"+str(i+1)+"_CX"] = vars(self)["BTN"+str(i+1)+"_C1"]
                    else:
                        vars(self)["BTN"+str(i+1)+"_CX"] = vars(self)["BTN"+str(i+1)+"_C2"]

            if event.type == P.MOUSEBUTTONDOWN:
                for i in range(0, self.BUTTON_COUNT):
                    if vars(self)["BTN"+str(i+1)+"_RECT"].collidepoint(event.pos):
                        print("BUTTON CLICK")

            P.display.update()

    def CENTER_IT(self, text):
        self.CENTERED = (self.CENTER_X-text.get_width()//2, self.CENTER_Y-text.get_height()//2)

    def CREATE_BUTTONS(self, COLOR1, COLOR2, TEXTS):
        for i in range(0, self.BUTTON_COUNT):
            vars(self)["BTN"+str(i+1)+"_CX"] = COLOR1
            vars(self)["BTN"+str(i+1)+"_C1"] = COLOR1
            vars(self)["BTN"+str(i+1)+"_C2"] = COLOR2
            vars(self)["BTN"+str(i+1)+"_RECT"] = P.Rect(self.CENTER_X-self.BUTTON_WIDTH//2, self.CENTER_Y-self.BUTTON_HEIGHT//2-self.BUTTON_PADDING_Y*(i-1), self.BUTTON_WIDTH, self.BUTTON_HEIGHT)
            vars(self)["BTN"+str(i+1)+"_TEXT"] = self.BUTTON_FONT.render(TEXTS[i], True, (255, 255, 255))
    def VIEW_BUTTONS(self):
        for i in range(0, self.BUTTON_COUNT):
            P.draw.rect(self.WINDOW, vars(self)["BTN"+str(i+1)+"_CX"], vars(self)["BTN"+str(i+1)+"_RECT"])
            self.CENTER_IT(vars(self)["BTN"+str(i+1)+"_TEXT"])
            self.WINDOW.blit(vars(self)["BTN"+str(i+1)+"_TEXT"], (self.CENTERED[0], self.CENTERED[1]+self.BUTTON_PADDING_Y*(i-1)))


class MainWindow():
    def __init__(self):
        self.RESOLUTION = (1024, 768)
        self.WINDOW = P.display.set_mode(self.RESOLUTION)
        self.Variables()
        self.Main()

    def Variables(self):
        self.GAMEMODE = -1
        self.ONCE = False
        self.FPS = P.time.Clock()

    def Main(self):
        while True:
            self.FPS.tick(30)
            if self.GAMEMODE == -1:
                if self.ONCE == False:
                    SETTINGS = MENU(3, self.WINDOW, self.RESOLUTION, 168, 64, 10, 10)
                    self.GAMEMODE = 2

            if self.GAMEMODE != -1:
                self.ONCE = False

            P.display.update()

            event = P.event.wait()

if __name__ == '__main__':
    MainWindow()

P.quit()
exit()

Answer 1

Проблема в функции MENU.CENTER_IT(). Он центрирует текст кнопки на экране относительно высоты текстового изображения, а не в месте расположения кнопки.

Я изменил эту функцию, чтобы принять прямоугольник кнопки в качестве параметра и пусть он вычислит центрированную позицию относительно этого прямоугольника:

def CENTER_IT(self, butt_rect, text):
    #self.CENTERED = (self.CENTER_X-text.get_width()//2, self.CENTER_Y-text.get_height()//2)
    # Centre text over the top of button rectangle
    text_x = butt_rect.x + ( ( butt_rect.width  - text.get_width() )  // 2 )
    text_y = butt_rect.y + ( ( butt_rect.height - text.get_height() ) // 2 )
    self.CENTERED = ( text_x, text_y )

Затем вызывающему коду в MENU.VIEW_BUTTONS() необходимо передать прямоугольник кнопки в модифицированную функцию центрирования:

def VIEW_BUTTONS(self):
    for i in range(0, self.BUTTON_COUNT):
        P.draw.rect(self.WINDOW, vars(self)["BTN"+str(i+1)+"_CX"], vars(self)["BTN"+str(i+1)+"_RECT"])
        self.CENTER_IT(vars(self)["BTN"+str(i+1)+"_RECT"], vars(self)["BTN"+str(i+1)+"_TEXT"])
        self.WINDOW.blit(vars(self)["BTN"+str(i+1)+"_TEXT"], ( self.CENTERED[0], self.CENTERED[1] ) )

Это устраняет проблему.

Использование функциональности python vars для создания новых переменных во время выполнения делает код более трудным для чтения и отладки. Эти значения лучше хранить в простой структуре данных, такой как список или класс «Button».

Ваш код не обрабатывает событие pygame.QUIT.

Answer 2

Поскольку это весь ваш код, для удобства в обеих наших частях я просто продемонстрирую, как создать кнопку с текстом

, вы можете использовать freetype module

import pygame
import pygame.freetype # you have to do this import explicitly

Вы создаете объект Font

my_font = pygame.freetypeFont(name='Arial', size=24) 

, а затем вы можете отрендерить его для создания текстовой поверхности, а также прямоугольника с таким же размером

txt_surface, txt_rect = my_font.render(text='Press this Button', 
                                       fgcolor=pg.Color('Black'))

Если у вас есть объект Button, который имеет изображение и атрибут rect (что на самом деле должно), тогда вы можете использовать txt_rect, чтобы выровнять центр, а затем перетащить его на изображение кнопки "обращается к изображению кнопки.

Answer 3

Я попытался запустить ваш код, и из того, что я понимаю, кажется, есть проблема с тем, как вы рисуете текст и кнопки на холсте.

Изображение отражает холст после изменения этой строки self.WINDOW.blit(vars(self)["BTN"+str(i+1)+"_TEXT"], (self.CENTERED[0], self.CENTERED[1]+self.BUTTON_PADDING_Y*(i-1)+150))

Итак, это говорит мне о том, что кнопки 1,2 создаются после текста и, следовательно, располагаются поверх текста. Вы должны отладить свой код и понять, как все применяется. Вы можете легко найти ошибку.