Menu
CoddyTech
Bắt đầu học

Cắt sprite sheet

Thuộc phần Sprite và hình ảnh trong hành trình Pygame của Coddy. Bài học 26 trên 39.

Hoạt ảnh gồm một vài hình ảnh được hiển thị lần lượt. Trò chơi thường lưu các hình ảnh đó trong cùng một tệp, gọi là sprite sheet: một lưới gồm các khung hình nhỏ xếp sát cạnh nhau. Mã khởi đầu vẽ toàn bộ tệp assets/sheets/platformer_characters.png, gồm 9 khung hình theo chiều ngang và 3 khung theo chiều dọc, mỗi khung có kích thước 24 × 24 pixel. Hai dáng đi của nhân vật màu xanh lá cây là hai khung đầu tiên ở hàng trên cùng.

sheet.subsurface(rect) lấy phần bên trong một Rect trên sprite sheet và trả về một Surface riêng, mà không sao chép pixel nào. Khung hình thứ col ở hàng row bắt đầu tại (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))

24 pixel quá nhỏ trên cửa sổ 640 × 480, nên mỗi khung hình được phóng to gấp 3 lần, thành 72 × 72. Phóng to pixel art theo một số nguyên giúp các cạnh vẫn sắc nét. Hãy cắt và phóng to một lần trước vòng lặp, rồi lưu các khung hình trong một danh sách: ở những bài học tiếp theo, bạn sẽ chọn một khung theo chỉ số của nó.

challenge icon

Thử thách

Trung bình

Cắt hai khung hình đi bộ từ sprite sheet.

  1. Trước vòng lặp, tạo frames: hai khung hình ở cột 0 và 1 của hàng trên cùng, mỗi khung có kích thước 24 x 24, được phóng to gấp 3 lần.
  2. Thay vì vẽ toàn bộ sprite sheet, hãy vẽ frames[0] tại (200, 200) và frames[1] tại (368, 200).

Nhấn “Chơi”: hai khung hình đi bộ cỡ lớn. Sau đó nhấn “Kiểm tra”.

Tự làm thử

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

Tất cả bài học trong Sprite và hình ảnh

1Tải hình ảnh

Tải hình ảnhĐặt ảnh bằng RectDi chuyển ảnhLặp ảnh nềnĐiểm ảnh trong suốt

4Sprite và nhóm

Lớp SpriteNhómXóa bằng kill()Bắt bằng spritecollideNhóm đối đầu với nhóm

7Tuần tra giữa các vì sao

Tàu tuần traBắn laserBài học dự ánGiữ để bắnBài học dự ánKẻ địch xuất hiệnBài học dự ánBắn trúng và ghi điểmBài học dự ánVụ nổBài học dự ánBa mạngBài học dự ánTrò chơi kết thúcBài học dự ánThêm đợt địchBài học dự ánChiến thắngBài học dự án

2Xoay, lật, thu phóng

Xoay quanh tâmQuay mặt theo hướng bayThu phóng hình ảnhXoay từ hình ảnh gốc

5Va chạm chính xác đến từng pixel

Hình chữ nhật thật bất côngMặt nạSprite chính xác đến từng pixelVùng va chạm hình tròn

3Lớp cho đối tượng trong trò chơi

Lớp đầu tiên của bạnPhương thứcSelf là đối tượngDanh sách đối tượngĐối tượng có hình ảnhDanh sách kẻ địchLớp con

6Hoạt ảnh từ sprite sheet

Cắt sprite sheetBộ đếm khung hìnhTạo hoạt ảnh theo thời gianHiệu ứng nổ chỉ chạy một lần

Tự luyện tập: Playground Pygame