Search code examples
pythonhtmlcsspython-3.xpygame

pygame Image Position On The Mouse Is Off How To fix?


so I am tyring to position my image that is hovering next to my mouse but I want my image to be on the mouse not like a little seperate away from my mouse VIDEO EXAMPLE << as you can see my image that is hovering is not on my mouse its next to the mouse

# how I draw my image
MANUAL_CURSOR = pygame.image.load('nw.png').convert_alpha()


# how I displayed my image next to the mouse
window.blit(MANUAL_CURSOR,(pygame.mouse.get_pos()))

and here is my full game code

import pygame
pygame.init()

# draw our window
window = pygame.display.set_mode((500,540))
pygame.display.set_caption("Tic Tac TOE")



MANUAL_CURSOR = pygame.image.load('nw.png').convert_alpha()


MANUAL_CURSOR2 = pygame.image.load('nOW.png').convert_alpha()



bg = pygame.image.load("Player 1.png")
fps = 40

clock = pygame.time.Clock()

class button():
    def __init__(self, color, x,y,width,height, text=''):
        self.color = color
        self.x = x
        self.y = y
        self.width = width
        self.height = height
        self.text = text
        self.over = False

    def draw(self,window,outline=None):
                #Call this method to draw the button on the screen
        if outline:
            pygame.draw.rect(window, outline, (self.x-2,self.y-2,self.width+4,self.height+4),0)
                    
        pygame.draw.rect(window, self.color, (self.x,self.y,self.width,self.height),0)
                
        if self.text != '':
            font = pygame.font.SysFont('comicsans', 60)
            text = font.render(self.text, 1, (0,0,0))
            window.blit(text, (self.x + (self.width/2 - text.get_width()/2), self.y + (self.height/2 - text.get_height()/2)))

    def isOver(self, pos):
                #Pos is the mouse position or a tuple of (x,y) coordinates
        if pos[0] > self.x and pos[0] < self.x + self.width:
            if pos[1] > self.y and pos[1] < self.y + self.height:
                return True
                    
        return False

    def playSoundIfMouseIsOver(self, pos, sound):
        if self.isOver(pos):            
            if not self.over:
                beepsound.play()
                self.over = True
        else:
            self.over = False




                    
white = (250,250,250)
greenbutton2 = button((0,255,0),210,220,100,100, '')

greenbutton3 = button((0,255,0),350,220,100,100, '')

greenbutton4 = button((0,255,0),70,220,100,100, '')

greenbutton5 = button((0,255,0),70,350,100,100, '')



            
font = pygame.font.Font("fos.ttf", 60)
score = 0
cointext = font.render("" + str(score), True, (255,255,255))
coinrect = cointext.get_rect()
coinrect.center = ((620,50))


def redraw():
    window.fill((174, 214, 241))
    window.blit(bg,(0,0))
    greenbutton2.draw(window)
    greenbutton3.draw(window)
    greenbutton4.draw(window)
    greenbutton5.draw(window)


    if score >= 0:
        window.blit(MANUAL_CURSOR,(pygame.mouse.get_pos(+10)))

    if score >= 1:
        window.blit(MANUAL_CURSOR2,(pygame.mouse.get_pos()))

    if score >= 2:
        window.blit(MANUAL_CURSOR,(pygame.mouse.get_pos()))

    if score >= 3:
        window.blit(MANUAL_CURSOR2,(pygame.mouse.get_pos()))
        

    if score >= 4:
        window.blit(MANUAL_CURSOR,(pygame.mouse.get_pos()))

pos = pygame.mouse.get_pos()
        
# our main loop
runninggame = True
while runninggame:
    clock.tick(fps)
    for event in pygame.event.get():
        if event.type ==  pygame.QUIT:
            runninggame = False


        if event.type == pygame.MOUSEBUTTONDOWN:
            if greenbutton2.isOver(pos):
                score += 1
                cointext = font.render("" + str(score), True, (255,255,255))
                coinrect.center = ((620,50))
            
    redraw()


    pygame.display.update()

pygame.quit()

    

and the images I am using

enter image description here enter image description here enter image description here


Solution

  • Use get_rect o get a rectangle the size of the image and set the center of the rectangle with the mouse position. Use the rectangle to blit the image. For instance:

    window.blit(MANUAL_CURSOR,(pygame.mouse.get_pos()))

    window.blit(MANUAL_CURSOR, MANUAL_CURSOR.get_rect(center = pygame.mouse.get_pos()))
    

    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 position of the rectangle can be specified by a keyword argument. For example, the center of the rectangle can be specified with the keyword argument center. 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).