Создание текстуры из canvas-элемента

PixiJS предоставляет мощные инструменты для работы с текстурами, включая возможность создавать их напрямую из HTML <canvas> элементов. Такой подход полезен, когда требуется динамическая генерация графики, процедурные изображения или отрисовка пользовательского контента перед использованием в сцене.

Использование PIXI.Texture.from

Основной способ создания текстуры из canvas — метод PIXI.Texture.from. Он автоматически преобразует содержимое <canvas> в текстуру, готовую для рендеринга:

const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = '48px Arial';
ctx.fillText('PixiJS', 20, 130);

const texture = PIXI.Texture.from(canvas);
const sprite = new PIXI.Sprite(texture);

sprite.x = 100;
sprite.y = 100;

app.stage.addChild(sprite);

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

  • PIXI.Texture.from(canvas) автоматически определяет источник как canvas.
  • Любые изменения на canvas можно синхронизировать с текстурой, вызвав texture.update().

Обновление текстуры после изменений canvas

Если canvas изменяется после создания текстуры, PixiJS не обновляет её автоматически. Для применения изменений нужно вручную вызвать метод update у текстуры:

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

// Обновление текстуры, чтобы изменения стали видимыми
texture.update();

Это позволяет создавать анимированные или интерактивные спрайты, управляемые через canvas.

Использование PIXI.BaseTexture для тонкого контроля

Для более гибкого управления можно создавать базовую текстуру (BaseTexture) напрямую:

const baseTexture = new PIXI.BaseTexture(canvas);
const textureFromBase = new PIXI.Texture(baseTexture);

const sprite2 = new PIXI.Sprite(textureFromBase);
sprite2.x = 400;
sprite2.y = 100;

app.stage.addChild(sprite2);

Преимущества использования BaseTexture:

  • Можно делить одну базовую текстуру на несколько спрайтов через Texture с указанием frame.
  • Позволяет управлять масштабированием, форматом пикселей и режимами фильтрации на низком уровне.

Создание спрайтов из части canvas

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

const frame = new PIXI.Rectangle(0, 0, 128, 128);
const partialTexture = new PIXI.Texture(baseTexture, frame);

const sprite3 = new PIXI.Sprite(partialTexture);
sprite3.x = 100;
sprite3.y = 300;

app.stage.addChild(sprite3);

Это особенно полезно при работе с тайлсетами или при разделении одного canvas на несколько визуальных элементов.

Производительность и оптимизация

  • Слежение за обновлениями: Частые вызовы texture.update() могут быть ресурсоёмкими, особенно на больших canvas. Для анимаций стоит обновлять текстуру только при изменении содержимого.
  • Размер canvas: Чем меньше canvas, тем быстрее рендеринг. При необходимости использовать высокое разрешение стоит рассмотреть масштабирование спрайта вместо увеличения canvas.
  • Формат и фильтры: Для пиксельной графики рекомендуется устанавливать baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST, чтобы избежать размытия при масштабировании.

Практическое применение

  • Генерация процедурной графики, например, шумовых текстур или динамических градиентов.
  • Создание пользовательских интерфейсов, где элементы рисуются на canvas и затем превращаются в спрайты.
  • Анимация с использованием canvas как промежуточного рендеринга кадров.
  • Тайловые карты и мини-карты, где один canvas содержит множество фрагментов сцены.

Итоговые рекомендации

Создание текстур из canvas в PixiJS обеспечивает гибкость и динамичность при работе с графикой. Для больших проектов важно грамотно управлять обновлением текстур, использовать BaseTexture для повторного использования и оптимизировать размеры canvas для поддержания высокой производительности.

Оглавление