Класс Sprite и его создание

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

Класс Sprite наследуется от Container, что означает поддержку:

  • позиционирования (x, y)
  • масштабирования (scale)
  • поворота (rotation)
  • прозрачности (alpha)
  • управления порядком отрисовки
  • вложенности (иерархии объектов)

Это делает Sprite базовым строительным блоком для 2D-игр, интерфейсов и интерактивной графики.

Текстура как основа спрайта

Спрайт не существует без текстуры. Текстура (Texture) — это область изображения, загруженного в память видеокарты. Внутри системы рендеринга она используется повторно разными спрайтами без дублирования данных.

Типовая цепочка:

Image → BaseTexture → Texture → Sprite
  • BaseTexture — исходное изображение.
  • Texture — область внутри BaseTexture.
  • Sprite — объект сцены, отображающий Texture.

Создание Sprite из изображения

Загрузка текстуры

В актуальных версиях PixiJS используется система Assets:

import { Application, Assets, Sprite } from 'pixi.js';

const app = new Application();
await app.init({ width: 800, height: 600 });

document.body.appendChild(app.canvas);

const texture = await Assets.load('images/player.png');
const sprite = new Sprite(texture);

app.stage.addChild(sprite);

После загрузки текстуры создаётся экземпляр Sprite, которому передаётся объект Texture.

Упрощённый способ создания

Для быстрого создания спрайта используется фабричный метод:

const sprite = Sprite.from('images/player.png');

Метод from() автоматически создаёт текстуру и связывает её со спрайтом. Этот подход удобен для небольших проектов или прототипирования.

Основные свойства Sprite

Позиция

sprite.x = 200;
sprite.y = 150;

или

sprite.position.set(200, 150);

Координаты задаются относительно родительского контейнера.

Масштабирование

sprite.scale.set(2);      // равномерное масштабирование
sprite.scale.x = 1.5;
sprite.scale.y = 0.5;

Масштаб влияет только на отображение, исходная текстура не изменяется.

Поворот

sprite.rotation = Math.PI / 4;

Значение задаётся в радианах.

Прозрачность

sprite.alpha = 0.5;

Диапазон значений: от 0 (полностью прозрачный) до 1 (непрозрачный).

Точка привязки (anchor)

По умолчанию спрайт позиционируется относительно левого верхнего угла. Для изменения используется свойство anchor.

sprite.anchor.set(0.5);

Значения:

  • (0, 0) — левый верхний угол
  • (0.5, 0.5) — центр
  • (1, 1) — правый нижний угол

Точка привязки особенно важна при вращении и масштабировании, так как трансформации выполняются относительно неё.

Размеры спрайта

Размер можно задать напрямую:

sprite.width = 300;
sprite.height = 200;

Следует учитывать, что изменение width и height фактически изменяет масштаб (scale), а не исходную текстуру.

Получение исходных размеров:

sprite.texture.width
sprite.texture.height

Работа с интерактивностью

Sprite поддерживает события взаимодействия.

sprite.eventMode = 'static';
sprite.cursor = 'pointer';

sprite.on('pointerdown', () => {
    sprite.scale.set(1.2);
});

Основные события:

  • pointerdown
  • pointerup
  • pointermove
  • pointerover
  • pointerout

Система событий унифицирована и поддерживает мышь, сенсорные экраны и стилусы.

Использование части текстуры (Texture Atlas)

В крупных проектах применяется текстурный атлас — единое изображение с набором спрайтов. Это снижает количество переключений текстур в GPU.

Пример загрузки атласа:

const sheet = await Assets.load('images/atlas.json');
const hero = new Sprite(sheet.textures['hero_idle.png']);

Атлас обычно создаётся внешними инструментами и содержит JSON-описание областей.

Производительность Sprite

Sprite оптимизирован для пакетной отрисовки (batching). Для максимальной производительности:

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

Если объект не меняется, можно применить кэширование:

sprite.cacheAsBitmap = true;

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

Иерархия и вложенность

Так как Sprite наследуется от Container, возможно создание иерархии:

const container = new PIXI.Container();
container.addChild(sprite);

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

Маскирование

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

const maskSprite = Sprite.from('mask.png');
target.mask = maskSprite;

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

Фильтры

К спрайту можно применять графические фильтры:

import { BlurFilter } from 'pixi.js';

sprite.filters = [new BlurFilter(5)];

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

Уничтожение спрайта

Для освобождения ресурсов:

sprite.destroy();

При необходимости можно удалить текстуру:

sprite.destroy({ texture: true, baseTexture: true });

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

Расширение класса Sprite

В игровых проектах часто создаются собственные классы на основе Sprite:

class Player extends Sprite {
    constructor(texture) {
        super(texture);
        this.speed = 5;
    }

    move(dx, dy) {
        this.x += dx * this.speed;
        this.y += dy * this.speed;
    }
}

Такой подход позволяет инкапсулировать поведение и создавать архитектурно чистую структуру проекта.

Класс Sprite является фундаментальным элементом рендеринга в PixiJS. Понимание принципов работы текстур, трансформаций и взаимодействия со сценой формирует основу для разработки производительных 2D-приложений и игр.

Оглавление