pythonuser-interfacepygamesnap-to-grid

Python: How to make drawn elements snap to grid in pygame


I am experimenting with a Pathfinding project and got stuck while creating a working GUI. I'm using pygame and already created a grid and a feature, which draws cubes when you press (or keep pressing) the mouse-button. However, these cubes just go wherever you click, and do not snap to the grid. I thought about using modulo somehow but I cannot seem to get it to work. Please find the code attached below. The Cube class is what I use for the squares drawn on the screen. Moreover, the drawgrid() function is how I set up my grid. I'd love some help on this, as I've been stuck on this roadblock for three days now.

class Cube:
    def update(self):
        self.cx, self.cy = pygame.mouse.get_pos()
        self.square = pygame.Rect(self.cx, self.cy, 20, 20)

    def draw(self):
        click = pygame.mouse.get_pressed()
        if click[0]:  # evaluate left button
            pygame.draw.rect(screen, (255, 255, 255), self.square)

Other drawgrid() function:

def drawgrid(w, rows, surface):
    sizebtwn = w // rows  # Distance between Lines
    x = 0
    y = 0
    for i in range(rows):
        x = x + sizebtwn
        y = y + sizebtwn
        pygame.draw.line(surface, (255, 255, 255), (x, 0), (x, w))
        pygame.draw.line(surface, (255, 255, 255), (0, y), (w, y))

Solution

  • You have to align the position to the grids size. Use the floor division operator (//) to divide the coordinates by the size of a cell and compute the integral index in the grid:

    x, y = pygame.mouse.get_pos()
    
    ix = x // sizebtwn
    iy = y // sizebtwn
    

    Multiply the result by the size of a cell to compute the coordinate:

    self.cx, self.cy = ix * sizebtwn, iy * sizebtwn
    

    Minimal example:

    import pygame
    pygame.init()
    
    screen = pygame.display.set_mode((200, 200))
    clock = pygame.time.Clock()
    
    def drawgrid(w, rows, surface):
        sizebtwn = w // rows 
        for i in range(0, w, sizebtwn):
            x, y = i, i
            pygame.draw.line(surface, (255, 255, 255), (x, 0), (x, w))
            pygame.draw.line(surface, (255, 255, 255), (0, y), (w, y))
    
    class Cube:
        def update(self, sizebtwn):
            x, y = pygame.mouse.get_pos()
            ix = x // sizebtwn
            iy = y // sizebtwn
            self.cx, self.cy = ix * sizebtwn, iy * sizebtwn
            self.square = pygame.Rect(self.cx, self.cy, sizebtwn, sizebtwn)
        def draw(self, surface):
            click = pygame.mouse.get_pressed()
            if click[0]:
                pygame.draw.rect(surface, (255, 255, 255), self.square)
    
    cube = Cube()
    
    run = True
    while run:
        clock.tick(60)
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                run = False
    
        cube.update(screen.get_width() // 10)
    
        screen.fill(0)
        drawgrid(screen.get_width(), 10, screen)
        cube.draw(screen)
        pygame.display.flip()