Формат TexturePacker и JSON-хэш

PixiJS предоставляет мощные инструменты для работы с текстурами и спрайтами, включая поддержку атласов текстур, созданных в сторонних утилитах, таких как TexturePacker. Атласы позволяют объединять множество изображений в один файл, снижая количество загрузок и оптимизируя производительность рендеринга. Формат JSON, сгенерированный TexturePacker, содержит полную информацию о позициях, размерах и смещениях каждого спрайта, что делает его удобным для интеграции с PixiJS.

Подключение атласа текстур

Для использования атласа необходимо загрузить JSON-файл и соответствующее изображение:

import * as PIXI from 'pixi.js';

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

PIXI.Loader.shared
    .add('atlas', 'spritesheet.json')
    .load(onAssetsLoaded);

function onAssetsLoaded() {
    const sheet = PIXI.Loader.shared.resources['atlas'].spritesheet;
    const sprite = new PIXI.Sprite(sheet.textures['hero.png']);
    sprite.x = 100;
    sprite.y = 150;
    app.stage.addChild(sprite);
}

Ключевой момент: spritesheet.textures — это объект, где ключи соответствуют именам изображений в JSON. Они могут включать подпапки и расширения файлов, точно так, как экспортировано из TexturePacker.

Структура JSON от TexturePacker

Файл JSON содержит два основных блока:

  1. frames — информация о каждом спрайте:
"frames": {
    "hero.png": {
        "frame": { "x": 0, "y": 0, "w": 64, "h": 64 },
        "rotated": false,
        "trimmed": true,
        "spriteSourceSize": { "x": 0, "y": 0, "w": 64, "h": 64 },
        "sourceSize": { "w": 64, "h": 64 }
    }
}
  • frame — координаты и размер спрайта на атласе.
  • rotated — указывает, повернут ли спрайт на 90° для оптимизации места.
  • trimmed — показывает, было ли удалено прозрачное пространство.
  • spriteSourceSize — оригинальные размеры спрайта до обрезки.
  • sourceSize — фактический размер исходного изображения.
  1. meta — общие данные об атласе:
"meta": {
    "app": "https://www.codeandweb.com/texturepacker",
    "image": "spritesheet.png",
    "format": "RGBA8888",
    "size": { "w": 512, "h": 512 },
    "scale": "1"
}
  • image — путь к изображению атласа.
  • size — размеры всего атласа.
  • scale — масштаб изображения, важен при работе с HiDPI.

Использование анимаций из JSON

PixiJS поддерживает анимации через массив текстур:

const sheet = PIXI.Loader.shared.resources['atlas'].spritesheet;
const frames = [];

for (let i = 1; i <= 10; i++) {
    frames.push(sheet.textures[`run${i}.png`]);
}

const anim = new PIXI.AnimatedSprite(frames);
anim.animationSpeed = 0.15;
anim.play();
app.stage.addChild(anim);

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

Работа с обрезанными и повернутыми спрайтами

TexturePacker часто оптимизирует атлас, обрезая прозрачные пиксели или поворачивая спрайты. PixiJS автоматически учитывает эти параметры через SpriteSheet:

  • trimmed: true — PixiJS корректирует позицию спрайта на основе spriteSourceSize.
  • rotated: true — текстура автоматически поворачивается при создании Texture.

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

Советы по оптимизации

  • Использовать power-of-two размеры атласа (например, 512×512 или 1024×1024) для совместимости с WebGL.
  • Разделять большие наборы анимаций на несколько атласов, чтобы ускорить загрузку и снизить потребление памяти.
  • Проверять scale для поддержки Retina-дисплеев, создавая отдельные атласы для @2x и @3x.

Динамическая загрузка спрайтов

PixiJS позволяет подгружать отдельные спрайты из атласа без создания всех объектов сразу:

const texture = PIXI.Texture.from('atlas.json:enemy.png');
const enemy = new PIXI.Sprite(texture);
enemy.x = 200;
enemy.y = 300;
app.stage.addChild(enemy);

Формат atlas.json:имя_спрайта — удобный синтаксис для мгновенного доступа к конкретной текстуре внутри атласа.

Интеграция с инструментами сборки

При использовании Webpack, Vite или Parcel JSON-файл и атлас можно импортировать напрямую как модули:

import atlasData from './spritesheet.json';
import atlasImage from './spritesheet.png';

const sheet = new PIXI.Spritesheet(
    PIXI.BaseTexture.from(atlasImage),
    atlasData
);

sheet.parse(() => {
    const sprite = new PIXI.Sprite(sheet.textures['hero.png']);
    app.stage.addChild(sprite);
});

Такой подход упрощает управление зависимостями и уменьшает вероятность ошибок при работе с относительными путями.

Выводы по использованию JSON-хэша

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

Работа с TexturePacker и JSON-хэшом в PixiJS обеспечивает гибкость и эффективность при создании 2D-графики и анимаций.

Оглавление