Menu
CoddyTech

Parallax

Teil des Abschnitts Spielwelten der Pygame-Journey von Coddy. Lektion 23 von 35.

Schau aus einem fahrenden Zug: Der Zaun rast vorbei, und die weit entfernten Hügel bewegen sich kaum. Wenn du weit entfernte Dinge langsamer zeichnest als nahe, bekommt ein flaches Spiel ein Gefühl von Tiefe. Das nennt man Parallaxe.

Zeichne den Wolkenhintergrund mit einem Drittel der Kamerabewegung. Er wiederholt sich alle 72 Pixel, daher ist nur camera_x // 3 % 72 entscheidend: Sobald er um ein ganzes Bild weitergerutscht ist, sieht er wieder gleich aus.

shift = camera_x // 3 % 72
for y in range(0, 360, 72):
    for x in range(-shift, WIDTH, 72):
        screen.blit(background, (x, y))

Die x-Schleife beginnt bei -shift, links außerhalb des Fensters, sodass die erste Kopie den linken Rand abdeckt, während sie hinausrutscht. Die Kacheln und der Spieler verwenden weiterhin die gesamte camera_x: Sie sind nah.

challenge icon

Aufgabe

Mittel
  1. Zeichne statt screen.fill background (das im Starter geladen wurde) in einem Raster mit 72 Pixeln.
  2. Setze in jedem Frame shift = camera_x // 3 % 72 und beginne jede Reihe von Kopien bei x = -shift, in Schritten von 72 bis WIDTH.
  3. Zeichne die Kacheln und den Spieler wie zuvor nach dem Hintergrund.

Probier es selbst

import pygame

TILE = 36
WIDTH = 576
SPEED = 4
GRAVITY = 1
JUMP = -15
MAX_FALL = 12

LEVEL = [
    "................................................",
    "................................................",
    "#...........###..........####..........###.....#",
    "#..............................................#",
    "#.....####.........###.........###.............#",
    "#..............................................#",
    "#.P........#####.........######.........####...#",
    "#..............................................#",
    "#..............................................#",
    "################################################",
]

pygame.init()
screen = pygame.display.set_mode((WIDTH, 360))
pygame.display.set_caption("Parallax")
clock = pygame.time.Clock()

background = pygame.image.load("assets/backgrounds/clouds.png").convert_alpha()
block_img = pygame.image.load("assets/images/block.png").convert_alpha()
player_img = pygame.image.load("assets/images/player.png").convert_alpha()

walls = []
for row, line in enumerate(LEVEL):
    for col, char in enumerate(line):
        if char == "#":
            walls.append(pygame.Rect(col * TILE, row * TILE, TILE, TILE))
        elif char == "P":
            start = (col * TILE + TILE // 2, row * TILE + TILE)

level_width = len(LEVEL[0]) * TILE
player = player_img.get_rect(midbottom=start)
vel_y = 0
on_ground = False
camera_x = 0

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.KEYDOWN and event.key in (pygame.K_SPACE, pygame.K_UP):
            if on_ground:
                vel_y = JUMP
        elif event.type == pygame.KEYUP and event.key in (pygame.K_SPACE, pygame.K_UP):
            if vel_y < -4:
                vel_y = -4

    keys = pygame.key.get_pressed()
    dx = 0
    if keys[pygame.K_LEFT]:
        dx -= SPEED
    if keys[pygame.K_RIGHT]:
        dx += SPEED

    player.x += dx
    for wall in walls:
        if player.colliderect(wall):
            if dx > 0:
                player.right = wall.left
            elif dx < 0:
                player.left = wall.right

    vel_y = min(vel_y + GRAVITY, MAX_FALL)
    player.y += vel_y
    on_ground = False
    for wall in walls:
        if player.colliderect(wall):
            if vel_y > 0:
                player.bottom = wall.top
                on_ground = True
            elif vel_y < 0:
                player.top = wall.bottom
            vel_y = 0

    camera_x = player.centerx - WIDTH // 2
    camera_x = max(0, min(camera_x, level_width - WIDTH))

    screen.fill((140, 200, 240))
    for wall in walls:
        screen.blit(block_img, (wall.x - camera_x, wall.y))
    screen.blit(player_img, (player.x - camera_x, player.y))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()

Alle Lektionen in Spielwelten

Übe selbstständig: Pygame-Playground