如何在Pygame的子画面中添加“矩形”或文本？

Question

I'm trying to recreate a slide puzzle and I need to print to text to previously drawn rectangular sprites. This is how I set them up:

class Tile(Entity):
    def __init__(self,x,y):
        self.image = pygame.Surface((TILE_SIZE-1,TILE_SIZE-1))
        self.image.fill(LIGHT_BLUE)
        self.rect = pygame.Rect(x,y,TILE_SIZE-1,TILE_SIZE-1)
        self.isSelected = False
        self.font = pygame.font.SysFont('comicsansms',22) # Font for the text is defined

And this is how I've draw them:

def drawTiles(self):
    number = 0
    number_of_tiles = 15

    x = 0
    y = 1

    for i in range(number_of_tiles):
        label = self.font.render(str(number),True,WHITE) # Where the label is defined. I just want it to print 0's for now.
        x += 1
        if x > 4:
            y += 1
            x = 1

        tile = Tile(x*TILE_SIZE,y*TILE_SIZE)
        tile.image.blit(label,[x*TILE_SIZE+40,y*TILE_SIZE+40]) # How I tried to print text to the sprite. It didn't show up and didn't error, so I suspect it must have been drawn behind the sprite.
        tile_list.append(tile) 

This is how I tried to add Rect's (when it is clicked on with the mouse):

# Main program loop
for tile in tile_list:
    screen.blit(tile.image,tile.rect)
    if tile.isInTile(pos):
        tile.isSelected = True
        pygame.draw.rect(tile.image,BLUE,[tile.rect.x,tile.rect.y,TILE_SIZE,TILE_SIZE],2)
    else:
        tile.isSelected = False

isInTile:

def isInTile(self,mouse_pos):
    if self.rect.collidepoint(mouse_pos): return True

What am I doing wrong?

Answer 1

Coordinates in Pygame are relative to the surface that's being drawn on. The way you're currently drawing the rects on tile.image makes it draw at (tile.rect.x, tile.rect.y) relative to the topleft of tile.image. Most times tile.rect.x and tile.rect.y will be greater than the tile width and height, so it will be invisible. What you probably want is pygame.draw.rect(tile.image,BLUE,[0,0,TILE_SIZE,TILE_SIZE],2). This draws a rectangle on the tile from the topleft (0,0) of the tile to the bottom right (TILE_SIZE,TILE_SIZE).

The same goes for the text. For example if TILE_SIZE is 25 and x is 2, the x coordinate where the text is blit on tile.image is 2*25+40 = 90. 90 is bigger than the width of tile.image (which was TILE_SIZE-1=24), so it will draw outside of the surface, making it invisible. If you want to draw the text in the top left corner of tile.image, do tile.image.blit(label, [0,0]).