Динамическая смена набора кадров

В PixiJS управление анимацией спрайтов реализуется через AnimatedSprite, который позволяет отображать последовательность текстур для создания эффекта движения. Основная идея динамической смены набора кадров заключается в том, чтобы менять текстуры спрайта на лету, без необходимости создавать новый объект или полностью перезапускать анимацию.

Создание AnimatedSprite

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

const texturesIdle = [
    PIXI.Texture.from('idle1.png'),
    PIXI.Texture.from('idle2.png'),
    PIXI.Texture.from('idle3.png')
];

const texturesRun = [
    PIXI.Texture.from('run1.png'),
    PIXI.Texture.from('run2.png'),
    PIXI.Texture.from('run3.png'),
    PIXI.Texture.from('run4.png')
];

Затем на основе массива текстур создается объект AnimatedSprite:

const sprite = new PIXI.AnimatedSprite(texturesIdle);
sprite.animationSpeed = 0.1;
sprite.play();
app.stage.addChild(sprite);

Ключевой момент: animationSpeed задает скорость анимации, а метод play() запускает проигрывание кадров.

Смена набора кадров

Для динамической смены текстур используется свойство textures. Если нужно переключить анимацию с состояния «idle» на «run», это делается так:

sprite.textures = texturesRun;
sprite.gotoAndPlay(0);

Здесь gotoAndPlay(0) гарантирует, что анимация начнется с первого кадра нового набора.

Управление скоростью и повторением

Свойство loop контролирует зацикливание анимации:

sprite.loop = true; // анимация будет повторяться бесконечно
sprite.loop = false; // анимация проиграется один раз

Смена скорости анимации возможна в любой момент:

sprite.animationSpeed = 0.2; // увеличиваем скорость

Комбинирование с событиями

PixiJS позволяет отслеживать завершение анимации через событие onComplete:

sprite.onCompl ete = () => {
    sprite.textures = texturesIdle;
    sprite.gotoAndPlay(0);
};

Такой подход удобен для перехода между разными состояниями персонажей, например, «атака → возвращение в idle».

Динамическая загрузка текстур

Иногда набор кадров может загружаться асинхронно:

PIXI.Loader.shared.add('jump1.png').add('jump2.png').load((loader, resources) => {
    const jumpTextures = [
        resources['jump1.png'].texture,
        resources['jump2.png'].texture
    ];
    sprite.textures = jumpTextures;
    sprite.gotoAndPlay(0);
});

Этот метод позволяет экономить память, загружая текстуры только по необходимости.

Оптимизация

  • Повторное использование текстур: лучше создавать текстуры один раз и использовать их в разных анимациях, чтобы избежать лишней нагрузки на GPU.
  • Контроль памяти: при смене больших наборов кадров следует удалять ссылки на старые текстуры, если они больше не нужны.
  • Frame rate: использование меньшего количества кадров с плавной интерполяцией помогает снизить нагрузку без заметной потери качества анимации.

Смешанные анимации

В PixiJS можно комбинировать несколько AnimatedSprite для сложных эффектов, например, наложение оружия на персонажа или эффекты частиц. В этом случае динамическая смена кадров у одного слоя не влияет на другие:

const weaponSprite = new PIXI.AnimatedSprite(weaponTexturesIdle);
weaponSprite.animationSpeed = 0.15;
weaponSprite.play();
sprite.addChild(weaponSprite);

Динамическая смена текстур на weaponSprite осуществляется по аналогичному принципу.

Итоговые рекомендации

  • Использовать массивы текстур для каждого состояния.
  • Всегда запускать gotoAndPlay(0) после смены набора кадров.
  • Контролировать свойства animationSpeed и loop.
  • При больших проектах загружать текстуры асинхронно и по мере необходимости.
  • Оптимизировать повторное использование текстур для экономии памяти и повышения производительности.

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

Оглавление