背景をタイル状に並べる

CoddyのPygameジャーニー「スプライトと画像」セクションの一部。レッスン 4/36。

単色では空が味気なくなります。assets/backgrounds/sky.pngは、繰り返し使うために作られた72×72ピクセルの画像です。コピーを横に並べると、端が継ぎ目なくつながります。1枚の小さな画像のコピーでウィンドウを覆うことをタイリングと呼びます。

2つのループを使うと、グリッドの1行ずつ、左上の角すべてを描画できます。

for x in range(0, 640, 72):
    for y in range(0, 480, 72):
        screen.blit(tile, (x, y))

range(0, 640, 72)は0、72、144と続き、576までです。576に配置したコピーは648まで届きますが、ウィンドウの端を越えています。pygameはウィンドウ内の部分を描画し、残りを省略するため、最後の列はきれいに切り取られます。

タイルはウィンドウ全体を覆うので、screen.fillの代わりになります。まずタイルを描画し、その上にほかのすべてを描画します。この画像には透過ピクセルがないため、単色画像向けのconvert_alpha()に相当する.convert()を使って読み込みます。

チャレンジ

簡単

set_modeの後に、assets/backgrounds/sky.pngを.convert()で読み込み、tileという名前の変数に格納します。
screen.fill(...)を、すべての(x, y)でtileを描画する2つのループに置き換えます。xはrange(0, 640, 72)、yはrange(0, 480, 72)です。
タイルを描画した後に船を描画するようにします。

自分で試してみよう

import pygame

pygame.init()
screen = pygame.display.set_mode((640, 480))
pygame.display.set_caption("Sky Tiles")
clock = pygame.time.Clock()

ship = pygame.image.load("assets/images/ship.png").convert_alpha()

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

    screen.fill((20, 22, 40))
    screen.blit(ship, (288, 360))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()