Заливки: цвет, alpha, градиентные заливки

В PixiJS заливка графических объектов реализуется через объекты типа Graphics. Основные свойства заливки — цвет, прозрачность (alpha) и возможность создания градиентных эффектов через дополнительные методы и текстуры. Управление заливкой осуществляется сочетанием методов beginFill, lineStyle и endFill.

Цвет заливки

Для установки сплошного цвета используется метод:

const graphics = new PIXI.Graphics();

// Сплошная заливка красным цветом
graphics.beginFill(0xFF0000);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();
  • Параметр 0xFF0000 задаёт цвет в шестнадцатеричной форме.
  • Метод beginFill(color, alpha) принимает вторым параметром прозрачность (alpha) от 0 до 1. Например:
graphics.beginFill(0x00FF00, 0.5); // зелёный полупрозрачный
graphics.drawCircle(200, 200, 50);
graphics.endFill();

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

Прозрачность (alpha)

Прозрачность может быть задана как на уровне заливки, так и на уровне всего объекта Graphics:

graphics.alpha = 0.3; // применится ко всем фигурам объекта

Использование alpha в beginFill применяется только к конкретной заливке. При необходимости изменения прозрачности всех элементов объекта следует использовать свойство graphics.alpha.

Градиентные заливки

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

1. Использование текстур с градиентом

Создаётся объект PIXI.Texture с заранее подготовленным градиентом, затем используется Sprite:

const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
const ctx = canvas.getContext('2d');

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 200);

const texture = PIXI.Texture.from(canvas);
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);
  • Метод createLinearGradient(x0, y0, x1, y1) создаёт линейный градиент.
  • Можно использовать createRadialGradient для радиальных эффектов.

2. Использование фильтров

Градиенты можно накладывать через шейдеры и фильтры PixiJS. Например, PIXI.filters.GradientFilter позволяет динамически создавать плавные переходы цветов по координатам:

const graphics = new PIXI.Graphics();
graphics.drawRect(0, 0, 300, 150);
app.stage.addChild(graphics);

const gradientFilter = new PIXI.filters.GradientFilter();
graphics.filters = [gradientFilter];

Фильтры дают гибкость: градиенты можно изменять анимационно, менять угол наклона, диапазон и цвета.

Комбинации цвета и alpha с градиентами

Для сложных визуальных эффектов можно комбинировать сплошные заливки и градиентные текстуры, контролируя прозрачность отдельных слоёв. Например:

  1. Создать сплошной цвет через Graphics.beginFill.
  2. Наложить градиент через Sprite с текстурой.
  3. Применить прозрачность через alpha.

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

Практические советы

  • Сохранять производительность: для большого числа объектов предпочтительно использовать текстуры с готовым градиентом, а не пересоздавать заливку на лету.
  • Использование контейнеров: объединение объектов Graphics в PIXI.Container позволяет управлять общими параметрами прозрачности и позицией сразу для группы фигур.
  • Комбинирование с линиями: методы lineStyle и beginFill можно использовать совместно для создания рамок с градиентной или сплошной заливкой.

Заключение по заливкам

В PixiJS сплошная заливка и прозрачность обеспечиваются средствами Graphics.beginFill и alpha, а градиенты реализуются через текстуры и фильтры. Комбинация этих методов позволяет создавать богатые визуальные эффекты и анимации, управлять прозрачностью, наложением цветов и плавными переходами внутри сцены.

Сбалансированное использование этих инструментов обеспечивает высокую производительность и гибкость при разработке графики в браузере.

Оглавление