Анимация и эффекты боя

Цель

Данный модуль отвечает за визуальное оформление пошаговых сражений элементалей, предоставляя игроку насыщенный и динамичный опыт битвы. Он решает задачу создания последовательных анимаций, плавно переходящих от вступительной заставки к показу карт, появлению элементалей на арене, эффектам их столкновения и, наконец, демонстрации результата боя. Это значительно повышает вовлечённость пользователя и помогает лучше понять ход боя.

Функциональность

Основная логика анимации реализована в React-компоненте BattleAnimationPixi, который использует PixiJS для рендеринга графики и управления визуальными эффектами с высокой производительностью. Компонент управляет несколькими фазами анимации:

• intro — вступительный экран с заголовком и настроением боя;

• cards — показ карт игроков с анимацией появления;

• elementals — последовательное появление элементалей игрока и оппонента, их анимация боя и выделение победителя;

• result — финальный экран с итогом боя и соответствующей визуальной индикацией.

Каждая фаза сопровождается динамическими эффектами, включая световые и частичные анимации, реалистичные движения частиц и подсветку редкости элементалей. Внутренний таймлайн с помощью setTimeout управляет переходами между фазами и подфазами (например, смена с показа элементаля игрока на оппонента и затем на сам бой).

Визуальные эффекты стихий (огонь, вода, земля) выделяются отдельным компонентом BattleEffects, который запускается в фазе показа элементалей. Он создаёт уникальные анимации для каждой стихии — искры, волны, кристаллы — с адаптацией под мобильные устройства для оптимальной производительности.

Пример ключевого кода запуска фазы анимации:

useEffect(() => {
  const timeline = [
    { delay: 2000, action: () => setPhase('intro') },
    { delay: 5000, action: () => setPhase('cards') },
    { delay: 9000, action: () => setPhase('elementals') },
    { delay: 21000, action: () => setPhase('result') },
    { delay: 25000, action: onAnimationComplete },
  ];

  timeline.forEach(({ delay, action }) => {
    setTimeout(action, delay);
  });
}, []);

Подфазы анимации элементалей (elementalPhase) задают динамику появления и поведения персонажей, включая эффекты победы/поражения.

Взаимосвязь с основным модулем и другими подтемами

Этот подмодуль является визуальной оболочкой боевой логики из родительской темы "Пошаговые битвы элементалей". Он тесно интегрирован с бизнес-логикой из gameLogic.ts, получая текущее состояние боя, выбранных элементалей и результатов сражения. В то время как подмодули "Выбор и подготовка боя" и "Отображение результатов" отвечают за сбор данных и их представление в UI, "Анимация и эффекты боя" обеспечивает промежуточный, живой и наглядный переход между этими этапами, создавая эффект присутствия в сражении.

Кроме того, использование отдельного компонента BattleEffects для стихийных эффектов расширяет возможности кастомизации и оптимизации, позволяя не дублировать код и упрощать поддержку графики и анимаций.

Таким образом, данный подмодуль дополняет и оживляет всю боевую механику, делая игровой процесс более ярким и запоминающимся, что не охватывается другими подмодулями.

Диаграмма процесса анимации боя

flowchart TD
    Start[Запуск анимации боя]
    Intro[Фаза: Вступление]
    Cards[Фаза: Показ карт игроков]
    Elementals[Фаза: Появление элементалей и бой]
    ElementalPlayer[Появление элементаля игрока]
    ElementalOpponent[Появление элементаля оппонента]
    Battle[Анимация боя элементалей]
    Winner[Отображение победителя]
    Result[Финальный результат боя]
    End[Завершение анимации]

    Start --> Intro --> Cards --> Elementals
    Elementals --> ElementalPlayer --> ElementalOpponent --> Battle --> Winner --> Result --> End

Данный процесс иллюстрирует ключевые этапы анимации, обеспечивающие плавный и логичный переход между визуальными состояниями боя, помогая игрокам лучше воспринимать ход сражения.