Обращение к отдельным кадрам по имени

PixiJS предоставляет мощный инструментарий для работы с анимированными спрайтами, основанными на спрайт-листах (spritesheets). Один из ключевых аспектов управления анимацией — возможность обращаться к отдельным кадрам по их именам, что обеспечивает гибкость при воспроизведении анимаций и управлении состояниями объектов.

Структура спрайт-листа

Спрайт-лист в PixiJS обычно создаётся с использованием формата JSON + текстура. JSON-файл описывает все кадры, их размеры и позиции на текстуре, а также позволяет присвоить каждому кадру уникальное имя. Пример структуры:

{
  "frames": {
    "walk_01": { "frame": { "x":0, "y":0, "w":64, "h":64 } },
    "walk_02": { "frame": { "x":64, "y":0, "w":64, "h":64 } },
    "jump": { "frame": { "x":128, "y":0, "w":64, "h":64 } }
  },
  "meta": {
    "image": "spritesheet.png",
    "scale": "1"
  }
}

В этом примере кадры "walk_01", "walk_02" и "jump" имеют уникальные имена, что позволяет обращаться к ним напрямую.

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

После загрузки текстур через PIXI.Loader, отдельные кадры можно использовать для создания анимации:

const frames = [
    PIXI.Texture.from("walk_01"),
    PIXI.Texture.from("walk_02"),
    PIXI.Texture.from("jump")
];

const animatedSprite = new PIXI.AnimatedSprite(frames);
animatedSprite.animationSpeed = 0.1;
animatedSprite.loop = true;
animatedSprite.play();
app.stage.addChild(animatedSprite);

Ключевой момент: PIXI.Texture.from(name) принимает именно имя кадра из JSON, а не индекс. Это позволяет обращаться к кадрам семантически понятными идентификаторами.

Управление кадрами по имени

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

// Получение кадра "jump"
const jumpTexture = PIXI.Texture.from("jump");

// Замена текущего кадра
animatedSprite.texture = jumpTexture;

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

Использование AnimatedSprite с именованными кадрами

Для более сложных анимаций удобно создавать объекты с несколькими состояниями, каждый из которых хранит свой набор именованных текстур:

const spriteStates = {
    walk: ["walk_01", "walk_02"],
    jump: ["jump"]
};

function setState(sprite, stateName) {
    const textures = spriteStates[stateName].map(name => PIXI.Texture.from(name));
    sprite.textures = textures;
    sprite.play();
}

// Переключение на состояние "jump"
setState(animatedSprite, "jump");

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

Оптимизация работы с кадрами

При обращении к кадрам по имени PixiJS кэширует текстуры. Это означает, что повторные вызовы PIXI.Texture.from("frameName") не создают новых объектов, а возвращают существующую текстуру, что экономит память и повышает производительность.

Для больших спрайт-листов рекомендуется заранее создавать карты текстур:

const texturesMap = {};
for (const frameName in spriteSheetData.frames) {
    texturesMap[frameName] = PIXI.Texture.from(frameName);
}

// Быстрый доступ
animatedSprite.texture = texturesMap["jump"];

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

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

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

animatedSprite.onFrameCha nge = (currentFrame) => {
    if (animatedSprite.currentFrame === animatedSprite.textures.indexOf(texturesMap["jump"])) {
        console.log("Персонаж прыгает");
    }
};

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

Принципы работы с именованными кадрами

  1. Семантические имена — каждый кадр должен иметь понятное имя, отражающее действие или состояние.
  2. Кэширование текстур — минимизирует использование памяти и ускоряет рендеринг.
  3. Массивы состояний — упрощают управление сложными анимациями.
  4. События по кадрам — позволяют интегрировать логику игры или визуальные эффекты с конкретными моментами анимации.
  5. Гибкая смена текстур — sprite.texture = PIXI.Texture.from("name") обеспечивает мгновенный переход между кадрами.

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

Оглавление