Анимация по кадрам

Картинки в «Комете» уже настоящие, но метеор по-прежнему просто исчезает: секунду назад летел, а теперь его нет. Сбитому метеору полагается взрыв, а взрыв — это не одна картинка, а несколько, которые быстро сменяют друг друга. В этом уроке научим игру проигрывать такие серии и пустим вспышку на месте каждого уничтоженного метеора.

Как работает мультфильм

Помните блокноты-перелистывалки, где на каждой страничке нарисован человечек в чуть другой позе? Если быстро пролистать блокнот большим пальцем, человечек оживает и бежит. Мультфильм устроен так же: набор неподвижных картинок и скорость, с которой их показывают. Взрыв в игре — тот же блокнот. На первой страничке маленький яркий шар, на второй он побольше, на третьей ещё больше и уже бледнее, и так до последней, где от взрыва остаётся едва заметное облачко.

Официальные слова такие. Каждая страничка называется кадром анимации, а время, которое один кадр остаётся на экране, — frame_time (по-русски «время кадра»). Само слово «анимация» означает просто «оживление»: показ серии картинок один за другим. У нашего взрыва будет шесть кадров по 0,06 секунды, то есть вся вспышка займёт 0,36 секунды.

Как выбрать, какую картинку показать

Самая очевидная идея: завести счётчик, увеличивать его на единицу на каждом обороте цикла, и пусть счётчик говорит, какой кадр рисовать. Работает, но скорость взрыва будет зависеть от FPS. При 60 кадрах игры в секунду шесть кадров анимации пролетят за 6 / 60 = 0,1 секунды, и вспышка мелькнёт незаметно. На слабом компьютере с 30 кадрами игры та же вспышка продлится 0,2 секунды. Мы уже сталкивались с этой бедой, когда двигали корабль, и вылечили её временем кадра dt. Лечим и здесь.

Каждый взрыв запоминает elapsed — сколько секунд прошло с его рождения, и на каждом обороте цикла прибавляет к нему dt. А номер кадра вычисляется из прошедшего времени: делим elapsed на frame_time и отбрасываем дробную часть. Секунда одинакова на любом компьютере, поэтому и взрыв везде длится одинаково. Для frame_time = 0.06 получается такая таблица:

Например, elapsed = 0.13: 0.13 / 0.06 примерно 2,17, целая часть — 2, значит, показываем кадр с номером 2. Номера, как всегда в Python, начинаются с нуля, поэтому шесть кадров имеют номера от 0 до 5. Номера 6 не существует, и это важно запомнить.

Функция frame_index

Эту арифметику удобно вынести в отдельную функцию в logic.py, как мы делали со всей логикой игры: она не знает ни про картинки, ни про Pygame, поэтому её легко проверять отдельно. Представьте помощника, которого вы спрашиваете: «Прошло столько-то секунд, один кадр длится столько-то, всего кадров столько-то. Какой показывать?» Помощник отвечает номером кадра, а если кадры закончились — говорит «ничего».

У анимаций бывает два характера. Взрыв проигрывается один раз и исчезает. А мерцающее пламя двигателя или крутящаяся монетка должны идти по кругу: после последнего кадра снова первый. Это различие мы передаём параметром loop (по-английски «петля»): True — крутить по кругу, False — проиграть один раз.

Для круга пригодится знакомый по функции wrap оператор % — остаток от деления. Если кадров четыре, то индекс 4 превращается в 0, индекс 5 — в 1, и так далее без конца. А «ничего» в Python записывается особым значением None: это не ноль и не пустая строка, а отдельный маркер «значения нет». Проверять его принято словами is None.

def frame_index(elapsed, frame_time, count, loop):
    index = int(elapsed / frame_time)
    if loop:
        return index % count
    if index >= count:
        return None
    return index

Поиграем с функцией: кадров четыре, каждый длится полсекунды, значит, вся анимация занимает две секунды.

print(frame_index(0.0, 0.5, 4, False))
print(frame_index(1.6, 0.5, 4, False))
print(frame_index(2.0, 0.5, 4, False))
print(frame_index(2.0, 0.5, 4, True))

0
3
None
0

Разберём последние две строки. Ровно на отметке 2,0 секунды 2.0 / 0.5 даёт 4, а кадров с номерами 0–3 всего четыре: разовая анимация закончилась, ответ None. Та же отметка в режиме loop=True превращается в 4 % 4 = 0 — всё началось сначала. Заметьте, что на самой границе кадр уже сменился: кадр 3 живёт от 1,5 (включая) до 2,0 (не включая).

Рисуем кадры взрыва

Нужны шесть картинок: explosion_0.png … explosion_5.png. Рисовать каждую отдельным кодом было бы долго, поэтому напишем одну функцию, которая получает номер кадра и рисует именно его, а цикл вызовет её шесть раз. Файл, как и в прошлом уроке, создаёт make_assets.py.

Идея такая. Пусть t показывает, как далеко зашёл взрыв: у нулевого кадра t = 0, у последнего t = 1, у остальных — что-то между. Тогда от t легко зависят все остальные параметры: радиус вспышки растёт от 10 до 46 пикселей, а цвет гаснет. Гаснуть помогает прозрачность. До сих пор мы задавали цвет тремя числами (красный, зелёный, синий). Четвёртое число — alpha (альфа-канал) — сообщает, насколько цвет непрозрачен: 255 — сплошной, 0 — невидимый. Работает на поверхностях с pygame.SRCALPHA, как раз такие мы уже создаём для картинок.

count = 6
index = 3
t = index / (count - 1)
radius = 10 + int(t * 36)
alpha = int(255 - t * 204)
print(t, radius, alpha)

Для шести кадров получаются такие значения:

Остаётся нарисовать на поверхности три круга друг в друге с одним и тем же радиусом-множителем: большой оранжевый, поменьше жёлтый и маленький светлый в центре. Полный код функции будет в практике ниже.

Спрайт Explosion

Каждый взрыв — отдельный маленький живой объект: родился на месте метеора, проиграл свои шесть кадров и исчез. Такие объекты у нас уже есть: лазер живёт, пока не вылетит за экран. Взрыв устроен так же, только «умирает» не за краем экрана, а когда кончились кадры. Значит, это спрайт, класс Explosion, и у него те же привычные части: image, rect и метод update(dt, *args).

Внутри взрыв хранит список кадров frames и elapsed — свои личные часы. Вот как выглядит его метод update (конструктор будет в практике):

class Explosion(pygame.sprite.Sprite):
    # __init__ (frames, elapsed, image, rect) будет в практике

    def update(self, dt, *args):
        self.elapsed += dt
        index = frame_index(self.elapsed, EXPLOSION_FRAME_TIME, len(self.frames), False)
        if index is None:
            self.kill()
        else:
            self.image = self.frames[index]

Загружаем кадры один раз

Откуда возьмётся список frames? Его соберёт маленькая функция load_frames(prefix, count): она в цикле читает файлы explosion_0.png, explosion_1.png и так далее. Важно, где её вызвать. Читать файлы с диска — дело небыстрое. Если каждый новый взрыв будет заново грузить шесть картинок, то при серии взрывов игра начнёт подтормаживать. Поэтому поступаем как в библиотеке: книгу покупают один раз, а читают все по очереди. Список кадров загружается один раз в main.py, после создания окна (помните про convert_alpha), и передаётся каждому новому взрыву. Это безопасно, потому что взрыв кадры не меняет, а только выбирает, какой показать.

Названия файлов собираем так: f"{prefix}_{i}.png". Это знакомая f-строка: то, что стоит в фигурных скобках, подставляется в текст. При prefix = "explosion" и i = 3 получится explosion_3.png.

Где взрываем

Взрыв должен вспыхивать в двух местах программы, и оба уже знакомы. Первое — попадание лазера: groupcollide возвращает словарь, в котором к каждому лазеру приписан список сбитых им метеоров. Второе — удар метеора по кораблю: spritecollide возвращает список врезавшихся метеоров. В обоих случаях метеоры уже удалены из групп, но объекты ещё живы на время нашего цикла, и у них можно спросить meteor.rect.center — центр, где взрыв и должен появиться.

Мы заведём в main.py крошечную функцию explode(center), которая создаёт взрыв и кладёт его в all_sprites. Больше никуда: если добавить взрыв в meteors или lasers, он сам станет участвовать в столкновениях и начнёт засчитывать очки.

Практика: взрывы в «Комете»

Добавим взрывы в «Комету». Правок немного, но в четырёх файлах, поэтому идите по порядку и после каждого шага сверяйтесь.

Шаг 1. logic.py: функция frame_index

Откройте logic.py и добавьте в самый конец файла:

def frame_index(elapsed, frame_time, count, loop):
    index = int(elapsed / frame_time)
    if loop:
        return index % count
    if index >= count:
        return None
    return index

Шаг 2. make_assets.py: шесть кадров взрыва

В make_assets.py три правки. Сразу после строки ASSETS = ... добавьте константу (число кадров должно совпадать с тем, что будет в main.py):

EXPLOSION_COUNT = 6

Функцию, рисующую один кадр, вставьте после make_laser() и до save():

def make_explosion_frame(index, count):
    t = index / (count - 1)
    radius = 10 + int(t * 36)
    alpha = int(255 - t * 204)
    image = pygame.Surface((96, 96), pygame.SRCALPHA)
    center = (48, 48)
    pygame.draw.circle(image, (255, 120, 40, alpha), center, radius)
    pygame.draw.circle(image, (255, 200, 80, alpha), center, int(radius * 0.7))
    pygame.draw.circle(image, (255, 245, 200, alpha), center, int(radius * 0.35))
    return image

И перед последней строкой с print добавьте цикл, который рисует и сохраняет все кадры. Номер превращаем в текст функцией str, как делали с очками на табло:

for i in range(EXPLOSION_COUNT):
    save(make_explosion_frame(i, EXPLOSION_COUNT), "explosion_" + str(i) + ".png")

Запустите скрипт ещё раз, чтобы файлы появились:

python make_assets.py

В папке assets/ теперь десять файлов: четыре старых и шесть новых explosion_0.png … explosion_5.png. Откройте любой в просмотрщике картинок: на прозрачном фоне увидите оранжево-жёлтый круг (у последнего кадра он самый большой и бледный).

Шаг 3. sprites.py: load_frames и Explosion

В начале sprites.py дополните импорт из logic (остальные строки начала файла не трогайте):

from logic import direction_from_keys, frame_index, step_ship

Константу времени кадра добавьте после строки LASER_SPEED = 700:

EXPLOSION_FRAME_TIME = 0.06

Функцию загрузки кадров поставьте сразу после load_image, до классов:

def load_frames(prefix, count):
    frames = []
    for i in range(count):
        frames.append(load_image(f"{prefix}_{i}.png"))
    return frames

А класс Explosion добавьте в самый конец файла:

class Explosion(pygame.sprite.Sprite):
    def __init__(self, center, frames):
        super().__init__()
        self.frames = frames
        self.elapsed = 0.0
        self.image = frames[0]
        self.rect = self.image.get_rect(center=center)

    def update(self, dt, *args):
        self.elapsed += dt
        index = frame_index(self.elapsed, EXPLOSION_FRAME_TIME, len(self.frames), False)
        if index is None:
            self.kill()
        else:
            self.image = self.frames[index]

Шаг 4. main.py: загружаем кадры и взрываем

В main.py пять небольших правок. Первая — импорт:

from sprites import Crystal, Explosion, Laser, Meteor, Player, load_frames

Вторая — константа после CRYSTAL_SCORE = 25:

EXPLOSION_COUNT = 6

Третья — загрузка кадров сразу после строки font = pygame.font.Font(None, 32). Окно к этому месту уже создано, значит, convert_alpha сработает:

explosion_frames = load_frames("explosion", EXPLOSION_COUNT)

Четвёртая — функция explode. Поставьте её после строки shot_cooldown = Cooldown(SHOT_COOLDOWN), когда группа all_sprites уже создана:

def explode(center):
    all_sprites.add(Explosion(center, explosion_frames))

Пятая — сами взрывы. Найдите в цикле блок удара по кораблю и блок попадания лазера и замените их на эти. Новые строки — цикл for meteor in hits и внутренний цикл у лазера:

while running:
    # ... начало цикла без изменений ...
    hits = pygame.sprite.spritecollide(player, meteors, True, pygame.sprite.collide_circle)
    for meteor in hits:
        explode(meteor.rect.center)
    if hits and invulnerable <= 0:
        lives -= 1
        invulnerable = INVULNERABLE_TIME

    caught = pygame.sprite.spritecollide(player, crystals, True, pygame.sprite.collide_circle)
    score += CRYSTAL_SCORE * len(caught)

    shots = pygame.sprite.groupcollide(lasers, meteors, True, True)
    for hit_meteors in shots.values():
        score += METEOR_SCORE * len(hit_meteors)
        for meteor in hit_meteors:
            explode(meteor.rect.center)
    # ... дальше цикл без изменений ...

Запуск и что должно получиться

python main.py

Стреляйте Пробелом по метеорам: на месте каждого сбитого вспыхивает оранжевый шар, быстро расширяется, бледнеет и пропадает примерно за треть секунды. Врежьтесь в метеор: вспышка появится и там, а жизнь, как раньше, убавится. Если сбить сразу несколько метеоров, взрывы идут одновременно и не мешают друг другу: у каждого свои часы.

Проверьте себя

• В папке assets/ десять PNG-файлов, среди них explosion_0.png … explosion_5.png.
• На месте каждого сбитого лазером метеора вспыхивает и гаснет круг, а при столкновении с кораблём — тоже.
• Нажмите F1: зелёная рамка у взрыва видна около трети секунды и затем исчезает — значит, kill() вызывается, спрайты не копятся.
• Счёт и жизни считаются так же, как до этого урока: взрывы на них не влияют.
• Вы можете объяснить, почему кадры взрыва загружаются в main.py один раз, а не в конструкторе Explosion.

Частые ошибки

IndexError: list index out of range

Что видно: ошибка в строке self.frames[index] или frames[6]. Почему: номер кадра дошёл до числа кадров. Для шести картинок допустимы номера 0–5, а шестой уже за пределами списка. Обычно забыли проверку index >= count или передали в frame_index неверное count. Как исправить: берите номер только из frame_index и передавайте len(self.frames).

Взрыв застыл на последнем кадре или спрайты копятся

Что видно: картинка вспышки остаётся на экране навсегда, а игра постепенно замедляется. Почему: в update нет проверки index is None и вызова kill(), либо вместо этого номер обрезают через min(index, 5); ещё вариант — в frame_index передали True вместо False. Как исправить: для разовой анимации loop=False, а на None отвечайте self.kill().

Взрыв удаляется, не успев показаться

Что видно: на экране ничего не вспыхивает, хотя ошибок нет. Почему: условие записано как if not index:: кадр с номером 0 тоже считается ложью. Как исправить: пишите if index is None:.

Взрыв то мелькает, то тянется

Что видно: на быстром компьютере вспышка почти незаметна, на медленном затягивается. Почему: кадр анимации менялся на каждом обороте цикла вместо того, чтобы считаться по времени elapsed. Как исправить: копите elapsed += dt и выбирайте кадр через frame_index.

Игра подтормаживает при серии взрывов

Что видно: в момент, когда взрывается несколько метеоров, игра на мгновение замирает. Почему: файлы читаются с диска в __init__ каждого Explosion: шесть чтений на каждый взрыв. Как исправить: загрузите кадры один раз через load_frames в main.py и передавайте список в Explosion(center, frames).

FileNotFoundError: ... explosion_0.png

Что видно: игра падает при старте на строке с load_frames. Почему: после обновления make_assets.py скрипт ещё не запускали, новых файлов в assets/ нет. Как исправить: выполните python make_assets.py и проверьте имена файлов.

Взрыв появляется в левом верхнем углу

Что видно: вспышки рисуются в точке (0, 0). Почему: в Explosion.__init__ написали self.image.get_rect() без center=center. Как исправить: используйте get_rect(center=center).

Что важно запомнить

• Анимация — серия картинок (кадров анимации), которые быстро сменяют друг друга; время одного кадра — frame_time.
• Кадр выбираем по прошедшему времени, а не по числу оборотов цикла: int(elapsed / frame_time). Так скорость не зависит от FPS.
• frame_index(elapsed, frame_time, count, loop) в logic.py: при loop=True крутит по кругу через %, при False возвращает None, когда кадры кончились.
• Номера кадров идут с нуля: для шести кадров последний — пятый. Проверять результат нужно словами is None, а не not index.
• Цвет с четвёртым числом alpha задаёт прозрачность; на поверхности с pygame.SRCALPHA круг получает мягкое затухание.
• Кадры загружаются один раз после set_mode (load_frames) и передаются каждому Explosion.
• Взрыв — обычный спрайт: elapsed += dt, frame_index, а когда вернулся None — kill(). В all_sprites его добавляем, в meteors и lasers — нет.

Теперь «Комета» красиво выглядит, но по-прежнему немая: лазер стреляет молча, а метеоры взрываются беззвучно. В следующем уроке дадим игре голос — звуки выстрела, взрыва, подбора кристалла и фоновую музыку.