python-3.xpygameisometric

Pygame incorrectly rendering an isometric image


This is my code...

import pygame as pyg
import sys

#Game constants
SCREENSIZE = (1400, 800)
running = True

disp = pyg.display.set_mode(SCREENSIZE)

tilemap = [
    pyg.image.load("Grass.png").convert()
]

for y in range(8):
    for x in range(8):
        disp.blit(tilemap[0], (300+x*32 - y*32, 200+x*16 + y*16))

while running:
    for event in pyg.event.get():
        if event.type == pyg.QUIT:
            sys.exit()

    pyg.display.update()

This is the result on my computer. I am using Windows 11 with a AMD Rysen 7 5700G with integrated graphics...

Result of code

This is the asset image I am using to build the isometric world

Source asset

Why am I getting all those black triangles in my image?


Solution

  • You have to use convert_alpha() instead of convert(). convert is for fully solid surfaces and discards the alpha information.

    pyg.image.load("Grass.png").convert()

    pyg.image.load("Grass.png").convert_alpha()
    

    See also How do I blit a PNG with some transparency onto a surface in Pygame?.