Button's rectangle is in the wrong place

Question

I am developing an idle clicker game for a school project. There's a button that you can click on to upgrade your clicking power, but the rectangle assigned to it is in the wrong place. The button's rectangle is not on the button itself. Here is some of the code.

import pygame

pygame.init()
pygame.font.init()

screen = pygame.display.set_mode((800, 600))
clickimage = pygame.image.load('block.png')
button = pygame.image.load('button.png')
boxclip = clickimage.get_rect()
buttonclip = button.get_rect()
myfont = pygame.font.SysFont('Comic Sans MS', 50)
coins = 0
cost = 15

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        if pygame.mouse.get_pressed()[0] and boxclip.collidepoint(pygame.mouse.get_pos()):
            coins = coins+1
        if pygame.mouse.get_pressed()[0] and buttonclip.collidepoint(pygame.mouse.get_pos()):
            coins = coins-cost
    screen.fill((255, 255, 255))
    screen.blit(clickimage, (50, 50))
    screen.blit(button, (500, 50))
    coindisplay = myfont.render(f'Coins: {coins}', False, (0, 0, 0))
    costdisplay = myfont.render(f'Cost: {cost}', False, (0, 0, 0))
    screen.blit(coindisplay, (50, 310))
    screen.blit(costdisplay, (500, 200))
    pygame.display.update()

I assigned the button's rectangle to the button but it's for some reason overlapping the clickimage. Why is this happening?

score 0 · Answer 1 · answered Dec 13 '20 at 04:55

You are checking to see if the user clicked the block by checking the boxclip rect. You set the boxclip = clickimage.get_rect() before you blit the image to a place on the screen, so how could the rect know what position it is? It's position is likely set at 0, 0.

You can fix this by defining your own rectangle for the block.

boxclip = pygame.Rect(50, 50, clickimage.get_rect().width, clickimage.get_rect().height)

The first 2 arguments are the x and y positions and 50, 50 is where you blited it. Then you can check if the mouse collides with this rectangle. You also need to apply this to your button collisions as well.

score 0 · Accepted Answer · answered Dec 13 '20 at 07:33

pygame.Surface.get_rect.get_rect() returns a rectangle with the size of the Surface object, that always starts at (0, 0) since a Surface object has no position. The Surface is placed at a position when it is blit to the display. The position of the rectangle can be specified by a keyword argument. For example, the top ledt of the rectangle can be specified with the keyword argument topleft. These keyword argument are applied to the attributes of the pygame.Rect before it is returned (see pygame.Rect for a full list of the keyword arguments).

You only need to change 2 lines of your code:

clickimage = pygame.image.load('block.png')
button = pygame.image.load('button.png')
boxclip = clickimage.get_rect(topleft = (50, 50)) # <---
buttonclip = button.get_rect(topleft = (500, 50)) # <---

# [...]
running = True
while running:
    # [...]

    screen.blit(clickimage, boxclip)
    screen.blit(button, buttonclip)

    # [...]

Button's rectangle is in the wrong place

2 Answers2