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

Для работы с PixiJS необходимо подключить библиотеку через npm или CDN. После подключения создается экземпляр приложения:

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
});
document.body.appendChild(app.view);

PIXI.Application автоматически создает рендерер и сцену (stage). Это базовая структура для добавления спрайтов, текстур и контейнеров.

Загрузка текстурного атласа

Текстурный атлас объединяет несколько изображений в один файл, а отдельные кадры описываются JSON-файлом с координатами.

PIXI.Loader.shared
    .add('spritesheet', 'assets/spritesheet.json')
    .load(setup);

Метод add принимает ключ и путь к JSON-файлу, который содержит описание всех фреймов атласа.

Структура JSON текстурного атласа обычно включает:

  • frames – объект с названиями кадров и их координатами (x, y, w, h) в атласе.
  • meta – информация о изображении атласа, масштабах и формате.

Пример фрагмента JSON:

{
  "frames": {
    "hero_idle_01.png": { "frame": { "x":0, "y":0, "w":64, "h":64 } },
    "hero_idle_02.png": { "frame": { "x":64, "y":0, "w":64, "h":64 } }
  },
  "meta": {
    "image": "spritesheet.png",
    "size": { "w": 256, "h": 64 }
  }
}

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

После загрузки атласа кадры становятся доступны через PIXI.utils.TextureCache или через PIXI.Texture.from.

function setup() {
    const heroTexture = PIXI.Texture.from('hero_idle_01.png');
    const heroSprite = new PIXI.Sprite(heroTexture);

    heroSprite.x = app.screen.width / 2;
    heroSprite.y = app.screen.height / 2;
    heroSprite.anchor.set(0.5);

    app.stage.addChild(heroSprite);
}

Ключевые моменты:

  • PIXI.Texture.from('frame_name') извлекает текстуру кадра по имени.
  • anchor.set(0.5) центрирует спрайт по середине текстуры.
  • Координаты x и y задаются относительно сцены (stage).

Использование AnimatedSprite для анимаций

Если атлас содержит несколько кадров для анимации, можно создать PIXI.AnimatedSprite.

function setup() {
    const frames = [
        PIXI.Texture.from('hero_idle_01.png'),
        PIXI.Texture.from('hero_idle_02.png'),
        PIXI.Texture.from('hero_idle_03.png')
    ];

    const heroAnimation = new PIXI.AnimatedSprite(frames);
    heroAnimation.animationSpeed = 0.1;
    heroAnimation.play();

    heroAnimation.x = app.screen.width / 2;
    heroAnimation.y = app.screen.height / 2;
    heroAnimation.anchor.set(0.5);

    app.stage.addChild(heroAnimation);
}

Особенности AnimatedSprite:

  • animationSpeed – скорость воспроизведения кадров (0.1 = 10% от стандартной частоты).
  • play(), stop(), gotoAndStop(frameNumber) – управление воспроизведением.
  • Можно комбинировать с tint, scale и другими свойствами Sprite.

Эффективность и оптимизация

Использование текстурного атласа значительно снижает количество загрузок и переключений текстур при рендеринге, что повышает производительность.

  • Лучше загружать все кадры заранее через PIXI.Loader и не создавать текстуры динамически в игровом цикле.
  • Для большого количества одинаковых спрайтов использовать PIXI.ParticleContainer.
  • Анимации с AnimatedSprite можно кешировать, если кадры повторяются на разных объектах.

Работа с кадрами вручную

Иногда требуется выделить кадр из текстурного атласа напрямую:

const sheetTexture = PIXI.Loader.shared.resources['spritesheet'].textures;
const customFrame = new PIXI.Sprite(sheetTexture['hero_idle_02.png']);

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

Преобразования спрайтов

После добавления спрайта на сцену можно применять трансформации:

heroSprite.scale.set(2, 2);   // увеличение в 2 раза
heroSprite.rotation = Math.PI / 4;  // поворот на 45 градусов
heroSprite.alpha = 0.8;       // прозрачность

Важное: Все трансформации применяются относительно anchor. Если anchor не установлен, вращение и масштаб будут происходить от верхнего левого угла.

Комбинация с контейнерами

Для группировки нескольких спрайтов используется PIXI.Container:

const heroContainer = new PIXI.Container();
heroContainer.addChild(heroSprite);
heroContainer.addChild(heroShadow); // спрайт тени

heroContainer.x = 400;
heroContainer.y = 300;

app.stage.addChild(heroContainer);

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

Работа с фильтрами

Фильтры позволяют применять визуальные эффекты к спрайтам и контейнерам. Например:

const blurFilter = new PIXI.filters.BlurFilter();
heroSprite.filters = [blurFilter];
blurFilter.blur = 2;

Фильтры поддерживают размытие, цветокоррекцию, световые эффекты и могут применяться к отдельным спрайтам или к целым контейнерам.

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

Оглавление