О чем этот пример
Визуальные эффекты — ключ к созданию запоминающейся игровой атмосферы. Плавное изменение оттенков, яркости или насыщенности объектов может подчеркнуть их состояние, выделить важный элемент или просто добавить игре стиля. Встроенный в Phaser 3 пост-обработчик эффектов (PostFX) предоставляет для этого мощный и простой инструмент — Color Matrix. Эта статья покажет, как использовать Color Matrix и твины (tweens) для создания плавных цветовых переходов прямо во время выполнения игры. Вы научитесь динамически менять цвет спрайтов, что отлично подходит для визуализации получения урона, подсветки интерактивных предметов или создания психоделических эффектов.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
// const fx = myGameObject.postFx.addColorMatrix();
// scene.tweens.addCounter({
// from: 0,
// to: 1,
// duration: 100,
// onUpdate: (tween) => fx.brightness(tween.getValue()),
// onComplete: () => obj.postFX.remove(fx), // `fx as any` would work just fine
// });
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('egg', 'assets/sprites/bombstar.png');
}
create ()
{
this.add.sprite(200, 300, 'egg');
const bomb = this.add.sprite(600, 300, 'egg');
const fx = bomb.postFX.addColorMatrix();
const tween = this.tweens.addCounter({
from: 0,
to: 360,
duration: 1000,
// loop: -1,
onUpdate: () =>
{
fx.hue(tween.getValue());
},
onComplete: () => bomb.postFX.remove(fx)
});
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d66',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Что такое Color Matrix?
Color Matrix (цветовая матрица) — это математический фильтр, который применяется к пикселям графического объекта для изменения его визуальных свойств: цвета, яркости, контрастности, насыщенности и оттенка (hue). В Phaser 3 этот фильтр доступен через систему пост-обработки (postFX).
Важно, что эффект применяется в реальном времени и не требует предварительной подготовки отдельных текстур для каждого состояния. Это экономит память и позволяет создавать бесконечное разнообразие переходов программно.
Для добавления фильтра к любому игровому объекту, поддерживающему postFX (например, спрайту), используется метод addColorMatrix().
Добавляем эффект к спрайту
Первым шагом создаем сам спрайт и получаем экземпляр цветового фильтра. В данном примере мы берем спрайт с изображением бомбы.
const bomb = this.add.sprite(600, 300, 'egg');
const fx = bomb.postFX.addColorMatrix();Теперь переменная fx хранит ссылку на объект Color Matrix, привязанный к спрайту bomb. По умолчанию фильтр не вносит изменений. Чтобы увидеть эффект, нужно вызвать один из его методов, например, hue(), brightness() или saturate().
Анимируем изменение с помощью твинов
Для плавной анимации параметров фильтра идеально подходит система твинов Phaser. Вместо того чтобы менять спрайты, мы будем анимировать числовое значение, которое передадим в метод фильтра.
Создаем твин-счетчик (addCounter), который плавно меняет значение от 0 до 360 за 1 секунду.
const tween = this.tweens.addCounter({
from: 0,
to: 360,
duration: 1000,
onUpdate: () => {
fx.hue(tween.getValue());
},
onComplete: () => bomb.postFX.remove(fx)
});Ключевой момент — колбэк onUpdate. На каждом кадре анимации он берет текущее значение твина с помощью tween.getValue() и передает его в метод fx.hue(). Это заставляет оттенок спрайта плавно пройти через все цвета цветового круга (0-360 градусов). После завершения анимации (onComplete) фильтр удаляется с объекта.
Почему именно твин-счетчик?
Можно было бы попробовать затвинить сам спрайт или его свойство, но твин-счетчик (addCounter) здесь — наиболее правильный и гибкий подход. Фильтр Color Matrix не имеет "твинабельных" свойств в классическом понимании системы твинов Phaser. Его методы (как hue) нужно вызывать, передавая новое значение.
Твин-счетчик генерирует эти промежуточные значения за нас, а в onUpdate мы сами решаем, куда и как их применить. Этот паттерн работает для анимации любых параметров, которые не являются прямыми свойствами игровых объектов.
// Пример анимации яркости (brightness) от 0 до 1
this.tweens.addCounter({
from: 0,
to: 1,
duration: 500,
onUpdate: (tween) => fx.brightness(tween.getValue())
});Важные детали и очистка
Эффекты postFX потребляют ресурсы. Если динамический эффект больше не нужен, его стоит удалить, чтобы освободить память и вычислительную мощность. Это делается методом remove().
// Удаление конкретного эффекта
bomb.postFX.remove(fx);
// Удаление всех эффектов с объекта
bomb.postFX.clear();В примере удаление происходит автоматически по завершении твина в колбэке onComplete. Однако в реальной игре вы можете управлять жизненным циклом эффекта на основе игровых событий (например, удалять свечение после окончания действия зелья). Также помните, что добавление множества активных фильтров на большое количество объектов может сказаться на производительности.
Что попробовать дальше
Связка postFX.addColorMatrix() и tweens.addCounter() открывает простой путь к динамическим визуальным преобразованиям в Phaser 3. Вы можете не только вращать оттенок, но и создавать мигание яркости, пульсацию насыщенности или плавное обесцвечивание объектов.
Для экспериментов попробуйте:
1. Зациклить твин с помощью параметра loop: -1, чтобы эффект повторялся бесконечно.
2. Комбинировать несколько фильтров на одном объекте, последовательно вызывая addColorMatrix().
3. Анимировать другие методы фильтра: saturate() для контроля насыщенности или contrast() для изменения контраста.
4. Привязывать изменение параметра фильтра не ко времени, а к игровой логике, например, к уровню здоровья персонажа.