Python 3.11.2下Pygame等距图形沿左上-右下轴对齐问题

我在使用Python 3.11.2开发Pygame等距瓦片Demo时，遇到了图形沿左上→右下轴无法对齐的问题，截图如下：

以下是我的原始实现代码：

import pygame
import sys
import numpy as np

# Initialize Pygame
pygame.init()

# Constants for tile size and screen dimensions
TILE_SIZE = 128
SCREEN_WIDTH, SCREEN_HEIGHT = 1200, 1220

# Calculate the number of tiles that fit on the screen
num_horizontal_tiles = SCREEN_WIDTH // TILE_SIZE * 2
num_vertical_tiles = SCREEN_HEIGHT // TILE_SIZE * 2

# Define colors
WHITE = (255, 255, 255)

# Create the screen
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Isometric Tile Demo")

# Define an isometric tileset (PNG images)
tile_width = TILE_SIZE
tile_height = TILE_SIZE

# Function to load and draw isometric tiles
def draw_isometric_tile(x, y, image_path):
    iso_x = x - y // 2
    iso_y = (x + y) // 4 + TILE_SIZE // 4  # Adjust the Y position
    tile_image = pygame.image.load(image_path)
    tile_image = pygame.transform.scale(tile_image, (tile_width, tile_height))
    screen.blit(tile_image, (iso_x, iso_y))

# Terrain generation
terrain = np.random.choice(['grass', 'dirt', 'sand', 'water'], size=(num_horizontal_tiles, num_vertical_tiles), p=[0.6, 0.2, 0.1, 0.1])

# Define rules for terrain generation
terrain_rules = {
    'grass': ['dirt'],
    'dirt': ['grass', 'sand'],
    'sand': ['dirt', 'water'],
    'water': ['sand']
}

# Perform cellular automaton steps
for _ in range(5):  # You can adjust the number of iterations as needed
    new_terrain = terrain.copy()
    for x in range(num_horizontal_tiles):
        for y in range(num_vertical_tiles):
            current_terrain = terrain[x, y]
            neighboring_terrains = [terrain[i, j] for i in range(x - 1, x + 2) for j in range(y - 1, y + 2)
                                    if 0 <= i < num_horizontal_tiles and 0 <= j < num_vertical_tiles]
            new_terrain[x, y] = np.random.choice(terrain_rules[current_terrain])

    terrain = new_terrain

# Define the mapping of terrain types to image paths
terrain_images = {
    'grass': "C:/Users/seth/AppData/Local/Programs/Python/Python311/terrain_images/Isometric Grass tile 2.png",
    'dirt': "C:/Users/seth/AppData/Local/Programs/Python/Python311/terrain_images/Isometric Dirt tile.png",
    'sand': "C:/Users/seth/AppData/Local/Programs/Python/Python311/terrain_images/isometric Sand tile.png",
    'water': "C:/Users/seth/AppData/Local/Programs/Python/Python311/terrain_images/Isometric Water tile.png"
}

# Main game loop
running = True

# Initial camera position
camera_x, camera_y = 0, 0

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # Handle camera movement
    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        camera_x -= 5
    if keys[pygame.K_RIGHT]:
        camera_x += 5
    if keys[pygame.K_UP]:
        camera_y -= 5
    if keys[pygame.K_DOWN]:
        camera_y += 5

    # Clear the screen
    screen.fill(WHITE)

    # Draw isometric tiles based on camera position
    for x in range(num_horizontal_tiles):
        for y in range(num_vertical_tiles):
            tile_type = terrain[x, y]  # Get terrain type at this position
            image_path = terrain_images.get(tile_type, "")  # Get image path based on terrain type
            if image_path:
                draw_isometric_tile((x - camera_x) * tile_width + SCREEN_WIDTH // 2,
                                    (y - camera_y) * tile_height + SCREEN_HEIGHT // 2, image_path)

    pygame.display.flip()

# Quit Pygame
pygame.quit()
sys.exit()

问题根源与修复方案 #

1. 等距坐标转换公式错误 #

原始代码中draw_isometric_tile函数的坐标计算逻辑不符合等距投影的标准规则，导致瓦片沿左上→右下轴错位。等距瓦片的正确投影需要基于瓦片宽度的一半和瓦片高度的四分之一来计算偏移：

标准等距坐标转换公式（针对网格坐标(grid_x, grid_y)）：

• 屏幕X坐标：(grid_x - grid_y) * (tile_width // 2) + 屏幕中心X偏移
• 屏幕Y坐标：(grid_x + grid_y) * (tile_height // 4) + 屏幕中心Y偏移

2. 重复加载图片导致性能问题 #

每次绘制瓦片时都调用pygame.image.load会严重拖慢程序运行，应该在初始化阶段一次性加载所有瓦片图片。

3. 相机移动逻辑适配错误 #

原始相机移动的步长和坐标系统不匹配，需要调整为基于网格单位的移动，适配新的坐标转换逻辑。

修改后的完整代码 #

import pygame
import sys
import numpy as np

# Initialize Pygame
pygame.init()

# Constants for tile size and screen dimensions
TILE_SIZE = 128
# 等距瓦片的高度通常是宽度的一半，保证排列对齐
TILE_HALF_WIDTH = TILE_SIZE // 2
TILE_QUARTER_HEIGHT = TILE_SIZE // 4
SCREEN_WIDTH, SCREEN_HEIGHT = 1200, 1220

# Calculate the number of tiles that fit on the screen
num_horizontal_tiles = (SCREEN_WIDTH // TILE_HALF_WIDTH) + 2
num_vertical_tiles = (SCREEN_HEIGHT // TILE_QUARTER_HEIGHT) + 2

# Define colors
WHITE = (255, 255, 255)

# Create the screen
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Isometric Tile Demo")

# Define the mapping of terrain types to image paths
terrain_images = {
    'grass': "C:/Users/seth/AppData/Local/Programs/Python/Python311/terrain_images/Isometric Grass tile 2.png",
    'dirt': "C:/Users/seth/AppData/Local/Programs/Python/Python311/terrain_images/Isometric Dirt tile.png",
    'sand': "C:/Users/seth/AppData/Local/Programs/Python/Python311/terrain_images/isometric Sand tile.png",
    'water': "C:/Users/seth/AppData/Local/Programs/Python/Python311/terrain_images/Isometric Water tile.png"
}

# 提前加载所有瓦片图片，避免重复加载
loaded_tiles = {}
for tile_type, path in terrain_images.items():
    img = pygame.image.load(path).convert_alpha()
    loaded_tiles[tile_type] = pygame.transform.scale(img, (TILE_SIZE, TILE_SIZE))

# Function to draw isometric tiles using preloaded images
def draw_isometric_tile(grid_x, grid_y, tile_img):
    # 计算等距投影坐标
    iso_x = (grid_x - grid_y) * TILE_HALF_WIDTH + SCREEN_WIDTH // 2
    iso_y = (grid_x + grid_y) * TILE_QUARTER_HEIGHT + SCREEN_HEIGHT // 4
    screen.blit(tile_img, (iso_x, iso_y))

# Terrain generation
terrain = np.random.choice(['grass', 'dirt', 'sand', 'water'], size=(num_horizontal_tiles, num_vertical_tiles), p=[0.6, 0.2, 0.1, 0.1])

# Define rules for terrain generation
terrain_rules = {
    'grass': ['dirt'],
    'dirt': ['grass', 'sand'],
    'sand': ['dirt', 'water'],
    'water': ['sand']
}

# Perform cellular automaton steps（优化逻辑：考虑邻居权重）
for _ in range(5):
    new_terrain = terrain.copy()
    for x in range(num_horizontal_tiles):
        for y in range(num_vertical_tiles):
            current_terrain = terrain[x, y]
            # 收集有效邻居
            neighbors = []
            for dx in (-1, 0, 1):
                for dy in (-1, 0, 1):
                    if dx == 0 and dy == 0:
                        continue
                    nx, ny = x + dx, y + dy
                    if 0 <= nx < num_horizontal_tiles and 0 <= ny < num_vertical_tiles:
                        neighbors.append(terrain[nx, ny])
            # 如果有邻居，优先选符合规则的邻居类型，否则随机选规则内的类型
            if neighbors:
                valid_neighbors = [n for n in neighbors if n in terrain_rules[current_terrain]]
                if valid_neighbors:
                    new_terrain[x, y] = np.random.choice(valid_neighbors)
                else:
                    new_terrain[x, y] = np.random.choice(terrain_rules[current_terrain])
            else:
                new_terrain[x, y] = np.random.choice(terrain_rules[current_terrain])
    terrain = new_terrain

# Main game loop
running = True

# Initial camera position（基于网格坐标的偏移）
camera_offset_x, camera_offset_y = 0, 0

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # Handle camera movement（调整步长适配网格）
    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        camera_offset_x += 2
    if keys[pygame.K_RIGHT]:
        camera_offset_x -= 2
    if keys[pygame.K_UP]:
        camera_offset_y += 2
    if keys[pygame.K_DOWN]:
        camera_offset_y -= 2

    # Clear the screen
    screen.fill(WHITE)

    # Draw isometric tiles based on camera position
    for grid_x in range(num_horizontal_tiles):
        for grid_y in range(num_vertical_tiles):
            tile_type = terrain[grid_x, grid_y]
            tile_img = loaded_tiles.get(tile_type)
            if tile_img:
                # 应用相机偏移到网格坐标
                draw_isometric_tile(grid_x + camera_offset_x, grid_y + camera_offset_y, tile_img)

    pygame.display.flip()

# Quit Pygame
pygame.quit()
sys.exit()

关键修改点说明 #

• 修正了等距坐标转换公式，确保瓦片沿左上→右下轴完全对齐
• 提前加载所有瓦片图片，提升运行性能
• 调整相机移动逻辑，适配新的网格坐标系统
• 优化了细胞自动机的地形生成逻辑，让地形过渡更自然（可选，与对齐问题无关）

内容的提问来源于stack exchange，提问作者Igetmadefunof-onthisapp