使用 pygame 创建滑块

Question

我正在创建一个 covid 模拟器，并使用滑块来允许用户调整数字，例如待在家里的人数。 我已经能够成功地创建滑块，但是由于某种原因，当我尝试移动一个时，它们都移动了。 我创建的代码是：

def saved_sim():
    slider1 = 600
    slider2 = 600
    #size_of_gas_cloud = 400
    running = True
    while running:
        menu.fill(BACKGROUND_COLOR)
        title = Label(menu, "Editting features for simulation", 1, font_title, BLACK, 330, 30)
        Sub_heading = Label(menu, "Please edit the features using sliders before selecting a location", 1, font_para, BLACK, 5, 100)

        if pygame.mouse.get_pressed()[0] != 0:
            # collision detection also needed here
            slider1 = pygame.mouse.get_pos()[0] - 5
            if slider1 < 600:
                slider1 = 600
            if slider1 > 800:
                slider1 = 800

        if pygame.mouse.get_pressed()[0] != 0:
            # collision detection also needed here
            slider2 = pygame.mouse.get_pos()[0] - 5
            if slider2 < 600:
                slider2 = 600
            if slider2 > 800:
                slider2 = 800

        pygame.draw.rect(menu, BLACK, Rect(600, 300, 210, 10))
        pygame.draw.rect(menu, RED, Rect(slider1, 300, 10, 10))

        pygame.draw.rect(menu, BLACK, Rect(600, 400, 210, 10))
        pygame.draw.rect(menu, RED, Rect(slider2, 400, 10, 10))

感谢您提前提供任何帮助。

Answer 1

这是一个 slider class 可以帮助您以更方便的方式创建滑块。 代码已注释，但如果您有任何问题，请随时提出问题。

import pygame

d = pygame.display.set_mode((500, 500))
pygame.init()

#Takes rectangle's size, position and a point. Returns true if that
#point is inside the rectangle and false if it isnt.
def pointInRectanlge(px, py, rw, rh, rx, ry):
    if px > rx and px < rx  + rw:
        if py > ry and py < ry + rh:
            return True
    return False

#Blueprint to make sliders in the game
class Slider:
    def __init__(self, position:tuple, upperValue:int=10, sliderWidth:int = 30, text:str="Editing features for simulation",
                 outlineSize:tuple=(300, 100))->None:
        self.position = position
        self.outlineSize = outlineSize
        self.text = text
        self.sliderWidth = sliderWidth
        self.upperValue = upperValue
        
    #returns the current value of the slider
    def getValue(self)->float:
        return self.sliderWidth / (self.outlineSize[0] / self.upperValue)

    #renders slider and the text showing the value of the slider
    def render(self, display:pygame.display)->None:
        #draw outline and slider rectangles
        pygame.draw.rect(display, (0, 0, 0), (self.position[0], self.position[1], 
                                              self.outlineSize[0], self.outlineSize[1]), 3)
        
        pygame.draw.rect(display, (0, 0, 0), (self.position[0], self.position[1], 
                                              self.sliderWidth, self.outlineSize[1] - 10))

        #determite size of font
        self.font = pygame.font.Font(pygame.font.get_default_font(), int((15/100)*self.outlineSize[1]))

        #create text surface with value
        valueSurf = self.font.render(f"{self.text}: {round(self.getValue())}", True, (255, 0, 0))
        
        #centre text
        textx = self.position[0] + (self.outlineSize[0]/2) - (valueSurf.get_rect().width/2)
        texty = self.position[1] + (self.outlineSize[1]/2) - (valueSurf.get_rect().height/2)

        display.blit(valueSurf, (textx, texty))

    #allows users to change value of the slider by dragging it.
    def changeValue(self)->None:
        #If mouse is pressed and mouse is inside the slider
        mousePos = pygame.mouse.get_pos()
        if pointInRectanlge(mousePos[0], mousePos[1]
                            , self.outlineSize[0], self.outlineSize[1], self.position[0], self.position[1]):
            if pygame.mouse.get_pressed()[0]:
                #the size of the slider
                self.sliderWidth = mousePos[0] - self.position[0]

                #limit the size of the slider
                if self.sliderWidth < 1:
                    self.sliderWidth = 0
                if self.sliderWidth > self.outlineSize[0]:
                    self.sliderWidth = self.outlineSize[0]

slider = Slider((100, 100))

while True:
    pygame.event.get()
    d.fill((255, 255, 255))

    slider.render(d)
    slider.changeValue()
    print(slider.getValue())
    
    pygame.display.update()

Answer 2

您必须检查鼠标 cursor 是否在 slider 的矩形区域内。 使用pygame.Rect对象和collidepoint()来测试鼠标 cursor 是否在 slider 上。 鼠标 cursor 的 position 可以通过pygame.mouse.get_pos()获得。

slider_rect1 = pygame.Rect(600, 300, 210, 10)
slider_rect2 = pygame.Rect(600, 400, 210, 10)

mouse_pos = pygame.mouse.get_pos()

if slider_rect1.collidepoint(mouse_pos) and pygame.mouse.get_pressed()[0] != 0:
    # [...]

if slider_rect2.collidepoint(mouse_pos) and pygame.mouse.get_pressed()[0] != 0:
    # [...]

另请参阅如何检测何时单击矩形 object、图像或精灵

Function saved_sim ：

def saved_sim():
    slider1 = 600
    slider2 = 600
    #size_of_gas_cloud = 400

    slider_rect1 = pygame.Rect(600, 300, 210, 10)
    slider_rect2 = pygame.Rect(600, 400, 210, 10)

    running = True
    while running:
        menu.fill(BACKGROUND_COLOR)
        title = Label(menu, "Editting features for simulation", 1, font_title, BLACK, 330, 30)
        Sub_heading = Label(menu, "Please edit the features using sliders before selecting a location", 1, font_para, BLACK, 5, 100)

        mouse_pos = pygame.mouse.get_pos()

        if slider_rect1.collidepoint(mouse_pos) and pygame.mouse.get_pressed()[0] != 0:
            # collision detection also needed here
            slider1 = pygame.mouse.get_pos()[0] - 5
            if slider1 < 600:
                slider1 = 600
            if slider1 > 800:
                slider1 = 800

        if slider_rect2.collidepoint(mouse_pos) and pygame.mouse.get_pressed()[0] != 0:
            # collision detection also needed here
            slider2 = pygame.mouse.get_pos()[0] - 5
            if slider2 < 600:
                slider2 = 600
            if slider2 > 800:
                slider2 = 800

        pygame.draw.rect(menu, BLACK, slider_rect1)
        pygame.draw.rect(menu, RED, Rect(slider1, 300, 10, 10))

        pygame.draw.rect(menu, BLACK, slider_rect2)
        pygame.draw.rect(menu, RED, Rect(slider2, 400, 10, 10))