Многострочный текст

PixiJS — это высокопроизводительная библиотека для работы с 2D-графикой в браузере на JavaScript. Она использует WebGL для рендеринга, с автоматическим резервным переходом на Canvas при отсутствии поддержки WebGL. Основной объект для отображения графики — PIXI.Application, который инкапсулирует рендерер, сцену и цикл обновления.

Создание приложения выглядит следующим образом:

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

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

  • width и height задают размеры области рендеринга.
  • backgroundColor задаёт цвет фона в формате 0xRRGGBB.
  • app.view — это <canvas> элемент, который автоматически создаётся библиотекой.

Спрайты и текстуры

Спрайт представляет собой базовый визуальный элемент в PixiJS. Для его создания используется класс PIXI.Sprite, а источник изображения задаётся через PIXI.Texture.

const texture = PIXI.Texture.from('image.png');
const sprite = new PIXI.Sprite(texture);
sprite.x = 100;
sprite.y = 150;
sprite.anchor.set(0.5); // Центрирование спрайта
app.stage.addChild(sprite);

Особенности работы с текстурами:

  • anchor задаёт точку привязки спрайта относительно его текстуры (от 0 до 1).
  • position можно задавать через x и y или объект sprite.position.set(x, y).
  • scale позволяет изменять размер спрайта по осям x и y.

Контейнеры и иерархия объектов

Для группировки элементов используется PIXI.Container. Все визуальные объекты сцены являются наследниками PIXI.DisplayObject, а контейнеры позволяют создавать сложные иерархии.

const container = new PIXI.Container();
container.addChild(sprite);
app.stage.addChild(container);
container.x = 200;
container.y = 100;

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

  • Перемещение контейнера автоматически сдвигает все вложенные объекты.
  • Контейнеры поддерживают масштабирование и вращение, влияя на все дочерние элементы.
  • Можно комбинировать несколько уровней вложенности для сложных сцен.

Работа с текстом

Для отображения текста используется класс PIXI.Text, который позволяет настраивать шрифт, цвет, выравнивание и стили.

const style = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 36,
    fill: '#ffffff',
    stroke: '#ff3300',
    strokeThickness: 4,
    dropShadow: true,
    dropShadowDistance: 6
});

const message = new PIXI.Text('Hello PixiJS', style);
message.x = 400;
message.y = 300;
message.anchor.set(0.5);
app.stage.addChild(message);

Особенности текста:

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

Цикл рендеринга и анимация

В PixiJS для обновления сцены используется встроенный цикл анимации.

app.ticker.add((delta) => {
    sprite.rotation += 0.01 * delta;
});

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

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

Фильтры и эффекты

PixiJS поддерживает применение фильтров к спрайтам и контейнерам, используя WebGL шейдеры.

const blurFilter = new PIXI.filters.BlurFilter();
sprite.filters = [blurFilter];
blurFilter.blur = 5;

Особенности фильтров:

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

Взаимодействие с пользователем

PixiJS поддерживает интерактивность через события.

sprite.interactive = true;
sprite.buttonMode = true;

sprite.on('pointerdown', () => {
    sprite.scale.x *= 1.1;
    sprite.scale.y *= 1.1;
});

Особенности интерактивности:

  • interactive делает объект чувствительным к событиям мыши и касания.
  • buttonMode изменяет курсор при наведении.
  • События включают pointerdown, pointerup, pointerover, pointerout и другие.

Рендеринг сложных сцен

Для оптимизации больших сцен используется:

  • renderTexture — позволяет рендерить контейнер в текстуру для повторного использования.
  • batching — объединение нескольких спрайтов с одинаковой текстурой в один вызов WebGL.
  • culling — отключение рендеринга объектов за пределами видимой области.
const renderTexture = PIXI.RenderTexture.create({ width: 500, height: 500 });
app.renderer.render(container, { renderTexture });
const finalSprite = new PIXI.Sprite(renderTexture);
app.stage.addChild(finalSprite);

Заключение по работе с PixiJS

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

Оглавление