how to make PNG canvas see-through in pygame when blitting image

Question

I want to blit pawnPic to the screen and leave the background "invisible" or "see-through". right now the white canvas is blocking up the whole chess board block so it looks terrible. Here is the shortened code that im using.


FPS = 30
black = (0,0,0)
white = (255, 255, 255)
brown = (139, 69, 19)
lBrown = (235, 188, 128)
HEIGHT, WIDTH = 960, 960
game_display = pygame.display.set_mode((HEIGHT, WIDTH))
pygame.display.set_caption("Chess")

boxL = int(((HEIGHT-40) / 8))
clock = pygame.time.Clock()
pawnPic = pygame.image.load(r'C:\Users\Adjun\Dropbox\My PC (DESKTOP-BHG02HU)\Pictures\Saved Pictures\pawnPic.png')
pawnPic = pygame.transform.scale(pawnPic, (115, 115))
pawn1X = boxL * 3 + 20
pawn1Y = boxL * 5 + 20
Exit_game = True
while Exit_game:
    clock.tick(FPS)
    mouse_x, mouse_y = pygame.mouse.get_pos()
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            Exit_game = False
    game_display.fill(white)
    for i in range(4):
        i += 1
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 210, 20, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 95, 135, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 210, 250, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 95, 365, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 210, 480, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 95, 595, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 210, 710, 115, 115), 0)
        pygame.draw.rect(game_display, lBrown, (115 * i * 2 - 95, 825, 115, 115), 0)

        pygame.draw.rect(game_display, brown, (115 * i * 2 - 95, 20, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 210, 135, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 95, 250, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 210, 365, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 95, 480, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 210, 595, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 95, 710, 115, 115), 0)
        pygame.draw.rect(game_display, brown, (115 * i * 2 - 210, 825, 115, 115), 0)
        pygame.draw.rect(game_display, black, (20, 20, 920, 920), 1)
        game_display.blit(pawnPic, (pawn1X, pawn1Y))
    pygame.display.update()

Also if anyone knows, if i have multiple blitted pawns, how do i make pygame know which image the mouse is over without making pygame check individuall each pixel or each board spot

@AKX i'm not sure what you mean by that. https://www.hiclipart.com/free-transparent-background-png-clipart-tzgom this is image that im talking about if that helps. the link itself says transparent so i assume so — Kamil Leocadie-Olsen, Oct 14 '20 at 17:49
@KamilLeocadie-Olsen I've you've downloaded the image correctly, then the background would be transparent. — Rabbid76, Oct 14 '20 at 19:02
Ive redownloaded it and it still doesnt work. im right clicking the image then pressing "save image as". is that the correct way or am i meant to do something else? @Rabbid76 — Kamil Leocadie-Olsen, Oct 14 '20 at 19:12
@KamilLeocadie-Olsen When you do "save image as", then the transparency is lost ynd you probably get a checkered background. You have to use the official download. Try another image for debug reasons — Rabbid76, Oct 14 '20 at 19:15
@KamilLeocadie-Olsen You only downloaded the preview instead of the real image. That's the trick on sites like this. To get the real picture you need to register or even to pay. — Rabbid76, Oct 14 '20 at 19:20

score 0 · Accepted Answer · answered Oct 14 '20 at 19:41

Use the "segoeuisymbol" system font for the chess patterns instead of images. See Unicode characters supported by the Segoe UI Symbol font. For instance, the Unicode Character of the WHITE CHESS PAWN is '\u2659':

seguisy115 = pygame.font.SysFont("segoeuisymbol", 115)
pawnChar = '\u2659'
pawnPic = seguisy115 .render(pawnChar, True, black)

See also Displaying unicode symbols using pygame.

how to make PNG canvas see-through in pygame when blitting image

1 Answers1