如何让Pygame按钮的碰撞矩形随Surface绘制位置同步移动？

你的代码 #

import pygame, sys, os.path
pygame.init()
# set up the colours
# R G B
BLACK = ( 0, 0, 0)
WHITE = (255, 255, 255)
RED = (255, 0, 0)
GREEN = ( 0, 255, 0)
BLUE = ( 50, 130, 255)
screen_surf = pygame.display.set_mode((500,500), 0, 24)
pygame.display.set_caption("Lewis' Menu")
screen_surf.fill((100,0,0))

class Button():
    def create(self,w,h,colour):
        self.button_surf = pygame.Surface((w,h), 0, 24)
        self.button = pygame.draw.rect(self.button_surf, colour, (0, 0, w, h))
    def view(self,text,x,y):
        width = self.button_surf.get_width()
        height = self.button_surf.get_height()
        sys_font = pygame.font.SysFont(("None"), 25)
        rendered = sys_font.render(text,0,(255,255,255))
        self.button_surf.blit(rendered, ((width - 140),((height / 2) - 10)))
        screen_surf.blit(self.button_surf, (x,y))

start_button = Button()
start_button.create(300,100,BLUE), start_button.view("Clicky Button!",10,10)
exit_button = Button()
exit_button.create(300,50,GREEN), exit_button.view("Exit!",10,200)

while True:
    pos = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == pygame.MOUSEBUTTONUP:
            if start_button.button.collidepoint(pos):
                print("You opened a chest!")
            if exit_button.button.collidepoint(pos):
                pygame.quit()
                sys.exit()
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()
    pygame.display.update()

你的问题 #

我正在尝试移动Pygame Surface，当前按钮点击功能通过检测鼠标位置是否与按钮rect重叠实现。我可在Button.view()方法中重新定位矩形的绘制位置，但实际碰撞矩形并未随之移动，导致点击功能在窗口错误位置触发。请问如何让按钮碰撞矩形随绘制的Surface同步移动？

问题的核心很明确：你现在保存的self.button是按钮Surface内部的局部矩形，它的坐标是相对于Surface左上角（(0,0)）的，而你碰撞检测时用的是窗口的全局鼠标位置，两者坐标系不匹配，自然会出现点击错位。

下面给你两种可行的解决方案，推荐第一种，更直观易维护：

方案1：维护全局坐标系的碰撞矩形 #

给Button类添加全局位置属性，每次绘制时更新这个位置，然后基于它生成全局坐标系下的碰撞矩形：

修改后的完整代码 #

import pygame, sys, os.path
pygame.init()
# set up the colours
# R G B
BLACK = ( 0, 0, 0)
WHITE = (255, 255, 255)
RED = (255, 0, 0)
GREEN = ( 0, 255, 0)
BLUE = ( 50, 130, 255)
screen_surf = pygame.display.set_mode((500,500), 0, 24)
pygame.display.set_caption("Lewis' Menu")

class Button():
    def create(self,w,h,colour):
        self.button_surf = pygame.Surface((w,h), 0, 24)
        self.colour = colour
        # 绘制Surface内部的矩形，不需要保存这个局部rect
        pygame.draw.rect(self.button_surf, colour, (0, 0, w, h))
        # 记录按钮的尺寸
        self.width = w
        self.height = h
        # 初始化按钮在窗口中的全局位置
        self.x = 0
        self.y = 0
    
    def view(self,text,x,y):
        # 更新按钮的全局位置
        self.x = x
        self.y = y
        width = self.button_surf.get_width()
        height = self.button_surf.get_height()
        
        # 重新填充Surface，避免多次调用view时文本重叠
        self.button_surf.fill(self.colour)
        
        # 渲染文本并居中显示（更通用的居中方式）
        sys_font = pygame.font.SysFont(None, 25)
        rendered = sys_font.render(text, 0, WHITE)
        text_x = (width - rendered.get_width()) // 2
        text_y = (height - rendered.get_height()) // 2
        self.button_surf.blit(rendered, (text_x, text_y))
        
        # 将按钮绘制到窗口的对应位置
        screen_surf.blit(self.button_surf, (x,y))
    
    # 新增方法：获取全局坐标系下的碰撞矩形
    def get_collision_rect(self):
        return pygame.Rect(self.x, self.y, self.width, self.height)

# 初始化按钮
start_button = Button()
start_button.create(300,100,BLUE)

exit_button = Button()
exit_button.create(300,50,GREEN)

while True:
    # 每次循环先清空背景，避免按钮移动后留下残影
    screen_surf.fill((100,0,0))
    
    # 重绘按钮（如果需要动态移动按钮，只需要修改这里的x、y参数即可）
    start_button.view("Clicky Button!",10,10)
    exit_button.view("Exit!",10,200)
    
    pos = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == pygame.MOUSEBUTTONUP:
            # 使用全局碰撞矩形检测点击
            if start_button.get_collision_rect().collidepoint(pos):
                print("You opened a chest!")
            if exit_button.get_collision_rect().collidepoint(pos):
                pygame.quit()
                sys.exit()
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()
    pygame.display.update()

关键改动说明 #

1. 给Button类新增了x、y属性，记录按钮在窗口中的全局位置
2. 新增get_collision_rect()方法，返回基于全局位置的矩形，用于碰撞检测
3. 优化了文本居中逻辑，不再依赖固定数值，适配不同长度的文本
4. 每次循环重绘背景和按钮，避免移动按钮后出现残影

方案2：转换鼠标坐标为Surface局部坐标 #

如果你想保留原来的局部矩形，也可以在碰撞检测时，把全局鼠标位置转换为按钮Surface的局部坐标：

修改碰撞检测部分的代码 #

while True:
    # ... 其他代码省略 ...
    pos = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == pygame.MOUSEBUTTONUP:
            # 计算鼠标相对于start_button的局部位置
            local_start_pos = (pos[0] - start_button.x, pos[1] - start_button.y)
            if start_button.button.collidepoint(local_start_pos):
                print("You opened a chest!")
            
            # 计算鼠标相对于exit_button的局部位置
            local_exit_pos = (pos[0] - exit_button.x, pos[1] - exit_button.y)
            if exit_button.button.collidepoint(local_exit_pos):
                pygame.quit()
                sys.exit()
        # ... 其他事件处理代码省略 ...

这种方法需要额外维护按钮的全局位置x和y，不如方案1直观，适合不想大改原有代码的场景。

内容的提问来源于stack exchange，提问作者Lewis