CODEWITHSUNDEEP
pythonpygame
kaktus_car
kaktus_car

Reputation: 986

pygame draw.rect() and draw.line() functions seem to override each other

I need to draw grid with rows*cols fields(nodes in my case) and for this I used pygame.draw.rect() and this runs ok, but when I wanted to draw grid lines with pygame.draw.line() I came across some "weird" behavior. Namely, the end_pos of horizontal lines seems to depend on the current value of i in the for loop when pygame.draw.rect() is present in the redraw().

import pygame as pg 

pg.init()

clock = pg.time.Clock()
FPS = 60

WIN_DIM = 800
window = pg.display.set_mode((WIN_DIM, WIN_DIM))


class Grid:

    grid = []

    def __init__(self, row, col, win_width):
        self.rows = row
        self.cols = col
        self.win_width = win_width
        self.node_width = win_width // row

    def make_grid(self):
        for row in range(self.rows):
            Grid.grid.append([])
            for col in range(self.cols):
                Grid.grid[row].append("node")


def redraw(grid):

    window.fill(pg.Color("White"))
    for i, row in enumerate(grid.grid):
        for j, node in enumerate(row):
            pg.draw.rect(window, pg.Color("White"), (0 + i*grid.node_width, 0 + j*grid.node_width, grid.node_width, grid.node_width))
            pg.draw.line(window, pg.Color("Grey"), (j * grid.node_width, 0), (j * grid.node_width, grid.win_width))
        pg.draw.line(window, pg.Color("Grey"), (0, i * grid.node_width), (grid.win_width, i * grid.node_width))
    pg.display.update()


def main_loop():

    main_grid = Grid(10, 10, WIN_DIM)
    main_grid.make_grid()

    run = True
    while run:

        clock.tick(FPS)

        for event in pg.event.get():
            if event.type == pg.QUIT:
                run = False

        redraw(main_grid)


main_loop()

pg.quit()

grid_with_rect

But when I remove pg.draw.rect() in redraw() then everything is fine:

grid_without_rect

I suspect that outlining of the rect somehow "overrides" the line but I am not sure.

Upvotes: 1

Views: 424

Answers (1)

Rabbid76
Rabbid76

Reputation: 211176

I suspect that outlining of the rect somehow "overrides" the line but I am not sure.

Yes of course. You draw 1 white rectangle followed by 1 gray line in a nested loop. You don't draw all the white rectangles before the gray, lines are draw. The rectangles and lines are drawn alternately:

for i, row in enumerate(grid.grid):
   for j, node in enumerate(row):
       pg.draw.rect(window, pg.Color("White"), (0 + i*grid.node_width, 0 + j*grid.node_width, grid.node_width, grid.node_width))
       pg.draw.line(window, pg.Color("Grey"), (j * grid.node_width, 0), (j * grid.node_width, grid.win_width))
  pg.draw.line(window, pg.Color("Grey"), (0, i * grid.node_width), (grid.win_width, i * grid.node_width))

Compare it to:

for i, row in enumerate(grid.grid):
    for j, node in enumerate(row):
        pg.draw.rect(window, pg.Color("White"), (0 + i*grid.node_width, 0 + j*grid.node_width, grid.node_width, grid.node_width))
for i, row in enumerate(grid.grid):
    for j, node in enumerate(row):
        pg.draw.line(window, pg.Color("Grey"), (j * grid.node_width, 0), (j * grid.node_width, grid.win_width))
    pg.draw.line(window, pg.Color("Grey"), (0, i * grid.node_width), (grid.win_width, i * grid.node_width))

Upvotes: 1

Related Questions