スプライトシートを切り分ける

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

アニメーションとは、複数の絵を次々に表示するものです。ゲームでは、それらの絵を1つのファイルにまとめておくことがよくあります。これはスプライトシートと呼ばれ、小さなフレームを横に並べたグリッドです。スターターではassets/sheets/platformer_characters.png全体を描画します。横に9フレーム、縦に3フレームあり、それぞれのサイズは24×24ピクセルです。緑色のキャラクターの歩行ポーズ2種類は、上段の左から最初の2つです。

sheet.subsurface(rect)を使うと、シート内のRectで指定した部分を、ピクセルをコピーせずに独立したSurfaceとして取得できます。行rowの列番号colのフレームは、(col * 24, row * 24)から始まります。

frames = []
for col in (0, 1):
    frame = sheet.subsurface((col * 24, 0, 24, 24))
    frames.append(pygame.transform.scale_by(frame, 3))

640×480のウィンドウでは24ピクセルは小さすぎるため、各フレームを3倍に拡大し、72×72にします。ピクセルアートは整数倍に拡大すると、輪郭の鮮明さが保たれます。ループの前に一度だけ切り出して拡大し、フレームをリストに入れておきましょう。次のレッスンではインデックスでフレームを選びます。

チャレンジ

中級

ループの前に、framesを作成します。最上段の列0と列1にあるフレームをそれぞれ24×24で切り出し、3倍に拡大します。
シート全体の代わりに、frames[0]を(200, 200)に、frames[1]を(368, 200)に描画します。

自分で試してみよう

import pygame

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

sheet = pygame.image.load("assets/sheets/platformer_characters.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(sheet, (212, 204))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()