Кадры из спрайт-листа

В PixiJS обработка анимаций часто осуществляется через спрайт-листы — изображения, содержащие последовательность кадров, которые формируют анимацию. Работа со спрайт-листами позволяет значительно повысить производительность и упростить управление графикой.

Создание текстуры из спрайт-листа

Спрайт-лист обычно сопровождается JSON-файлом или другим форматом данных, описывающим координаты и размеры каждого кадра. В PixiJS для загрузки спрайт-листа используется PIXI.Loader:

const loader = new PIXI.Loader();

loader.add('character', 'assets/character.json').load((loader, resources) => {
    const sheet = resources.character.spritesheet;
});

Ключевой момент: JSON-файл должен содержать данные о каждом кадре: его позицию в изображении, размеры, и при необходимости точки привязки (anchor). PixiJS автоматически преобразует эти данные в объекты PIXI.Texture.

Создание анимированного спрайта

После загрузки спрайт-листа можно создавать анимированные спрайты через класс PIXI.AnimatedSprite:

const frames = [];

for (let i = 0; i < 4; i++) {
    frames.push(PIXI.Texture.from(`walk_${i}.png`));
}

const walkingSprite = new PIXI.AnimatedSprite(frames);
walkingSprite.animationSpeed = 0.1;
walkingSprite.play();
app.stage.addChild(walkingSprite);
  • frames — массив текстур, полученных из спрайт-листа.
  • animationSpeed — скорость анимации. Значение 1 соответствует стандартной частоте кадра.
  • play() запускает анимацию. Для остановки используется метод stop().

Управление анимацией

PixiJS предоставляет гибкие инструменты для управления анимациями:

  • loop — определяет, будет ли анимация повторяться:

    walkingSprite.loop = false;

  • onComplete — колбэк при завершении воспроизведения:

    walkingSprite.onCompl ete = () => {
    console.log('Анимация завершена');
};

  • gotoAndStop(index) и gotoAndPlay(index) позволяют перейти к конкретному кадру:

    walkingSprite.gotoAndStop(2);
walkingSprite.gotoAndPlay(0);

Оптимизация спрайт-листов

Для повышения производительности рекомендуется использовать текстурные атласы, объединяющие несколько спрайт-листов в один большой PNG. PixiJS эффективно работает с такими атласами, минимизируя переключение текстур в WebGL.

Также полезно:

  • Использовать PIXI.BaseTexture для повторного применения одной текстуры в нескольких спрайтах.
  • Минимизировать количество кадров, сохраняя при этом плавность анимации.
  • Предварительно загружать спрайт-листы через Loader до начала анимации, чтобы избежать мерцаний и задержек.

Трансформация анимированного спрайта

Анимированные спрайты наследуют все свойства PIXI.Sprite:

  • position — позиция на сцене:

    walkingSprite.x = 100;
walkingSprite.y = 200;

  • scale — масштаб:

    walkingSprite.scale.set(1.5, 1.5);

  • rotation — вращение:

    walkingSprite.rotation = Math.PI / 4;

  • anchor — точка привязки для вращения и позиционирования:

    walkingSprite.anchor.set(0.5, 0.5);

Работа с многокадровыми анимациями

Если спрайт-лист содержит несколько анимаций (например, ходьба, прыжок, атака), рекомендуется создавать отдельные массивы текстур для каждой анимации:

const animations = {
    walk: [],
    jump: []
};

for (let i = 0; i < 4; i++) animations.walk.push(PIXI.Texture.from(`walk_${i}.png`));
for (let i = 0; i < 3; i++) animations.jump.push(PIXI.Texture.from(`jump_${i}.png`));

const sprite = new PIXI.AnimatedSprite(animations.walk);
sprite.play();

Переключение между анимациями можно выполнять через:

sprite.textures = animations.jump;
sprite.play();

Использование спрайт-листов в интерактивных сценах

Анимированные спрайты можно сочетать с интерактивными событиями:

walkingSprite.interactive = true;
walkingSprite.buttonMode = true;

walkingSprite.on('pointerdown', () => {
    walkingSprite.textures = animations.jump;
    walkingSprite.play();
});

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

Особенности работы с WebGL

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

Основы работы с кадрами из спрайт-листа в PixiJS позволяют создавать плавные, управляемые анимации, интегрируемые в интерактивные сцены. Правильное использование атласов, оптимизация количества кадров и управление анимацией через PIXI.AnimatedSprite обеспечивают стабильное и высокопроизводительное отображение графики.

Оглавление