Pygame渲染等距图像出现黑色三角形渲染异常问题

基础信息 #

• 运行环境：搭载AMD锐龙7 5700G集成显卡的Windows 11设备
• 异常现象：等距草瓦片排布后出现大量不规则黑色三角形

原问题代码 #

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()

效果与素材参考 #

• 异常运行效果：
  
• 所用瓦片源素材：
  

问题成因 #

核心错误是瓦片加载时误用了convert()方法：

• Pygame的convert()会将图片转换为与显示表面匹配的无Alpha通道格式，直接丢弃PNG素材自带的透明通道。等距菱形瓦片的非图案区域原本是透明像素，通道丢失后这些区域会被填充为纯黑色。
• 等距瓦片交错叠放时，上层瓦片露出的黑色边角没有被透明处理，直接覆盖在下层瓦片上，最终形成大量黑色三角形异常。

修复方案 #

1. 替换图片转换方法：将加载瓦片时的convert()改为convert_alpha()，保留素材的Alpha透明通道，让菱形外的区域保持透明，消除黑色填充。
2. 校验尺寸匹配关系：确认所用Grass.png尺寸为标准等距瓦片规格（宽64px、高32px），当前代码使用的x方向32px、y方向16px的排布步长与该规格匹配，若素材尺寸不同需对应调整步长，避免错位。
3. 补充规范逻辑：退出前调用pygame.quit()释放资源，可选增加离屏缓冲减少绘制闪烁。

修复后可运行代码 #

import pygame as pyg
import sys

# 游戏常量
SCREENSIZE = (1400, 800)
running = True

disp = pyg.display.set_mode(SCREENSIZE)
# 可选：创建带透明通道的离屏渲染缓冲
render_buffer = pyg.Surface(SCREENSIZE, pyg.SRCALPHA)

tilemap = [
    # 替换为convert_alpha保留透明通道
    pyg.image.load("Grass.png").convert_alpha()
]

# 预先将所有瓦片绘制到离屏缓冲
render_buffer.fill((0, 0, 0, 0))
for y in range(8):
    for x in range(8):
        render_buffer.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:
            pyg.quit()
            sys.exit()

    # 每帧清空屏幕后绘制缓冲内容
    disp.fill((0, 0, 0))
    disp.blit(render_buffer, (0, 0))
    pyg.display.update()

内容的提问来源于stack exchange，提问作者TheEngineerGuy