Оттенок и свойство tint

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

Свойство tint представляет собой 16-ричное значение цвета, объединяющее компоненты красного, зелёного и синего каналов (RGB). По умолчанию оно равно 0xFFFFFF, что означает отсутствие изменения цвета. Любое другое значение изменяет оттенок объекта на заданный цвет.

Пример базового использования:

const sprite = PIXI.Sprite.from('image.png');
sprite.tint = 0xff0000; // красный оттенок
app.stage.addChild(sprite);

В этом примере текстура спрайта приобретает красный оттенок без изменения исходного изображения.

Механизм работы tint

Свойство tint работает через умножение цветов пикселей текстуры на заданный цвет. Если цвет пикселя (R, G, B) умножить на компоненты tint (Rt, Gt, Bt), результат будет:

R' = R * Rt / 255
G' = G * Gt / 255
B' = B * Bt / 255

Это означает:

  • Белый цвет 0xFFFFFF не изменяет исходный цвет текстуры.
  • Чёрный 0x000000 полностью затемняет текстуру.
  • Любое промежуточное значение создаёт смешанный оттенок.

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

Форматы задания tint

Цвет в tint можно задавать несколькими способами:

  1. 16-ричное значение:
sprite.tint = 0x00ff00; // зелёный
  1. Десятичное представление (эквивалент 16-ричного):
sprite.tint = 65280; // 0x00ff00
  1. Через библиотечные функции конвертации:
const color = PIXI.utils.string2hex('#00ff00');
sprite.tint = color;

Использование функции PIXI.utils.string2hex удобно при работе с CSS-цветами.

Влияние текстуры и прозрачности

Свойство tint учитывает альфа-канал текстуры. Прозрачные области остаются прозрачными, а цвет применяется только к видимым пикселям. При этом смешивание цветов происходит независимо от текущей прозрачности объекта (alpha):

sprite.alpha = 0.5;
sprite.tint = 0xff00ff;

Результат: полупрозрачный спрайт с пурпурным оттенком.

Ограничения и особенности

  1. tint не изменяет исходную текстуру, поэтому один объект с разными tint можно использовать повторно.
  2. Эффект не всегда идеален для сложных градиентов — некоторые полутона могут выглядеть иначе из-за умножения цветов.
  3. Для применения сложных цветовых эффектов лучше использовать фильтры PixiJS, например ColorMatrixFilter.

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

Объекты PIXI.Graphics также поддерживают tint. Применение работает аналогично, но нужно учитывать, что tint применяется ко всему объекту после его рендеринга:

const graphics = new PIXI.Graphics();
graphics.beginFill(0xffffff);
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();
graphics.tint = 0x0000ff; // синий оттенок
app.stage.addChild(graphics);

Динамическое изменение цвета

С помощью tint можно реализовать анимации и интерактивные эффекты, изменяя цвет в цикле:

let color = 0xff0000;
app.ticker.add(() => {
    color += 0x000101;
    sprite.tint = color;
});

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

Резюме по применению

  • tint — быстрый способ изменить цвет спрайтов без изменения текстуры.
  • Работает через умножение RGB-компонент.
  • Поддерживает все объекты DisplayObject с цветовой фильтрацией.
  • Идеален для динамических визуальных эффектов и интерактивных интерфейсов.
  • Для сложных эффектов цвета рекомендуется сочетать с фильтрами.

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

Оглавление