О чем этот пример
Шейдеры открывают дверь в мир визуальных эффектов, которые невозможно достичь стандартными средствами графики. В этой статье мы разберем, как в Phaser 3 применить собственный GLSL-шейдер к отдельным игровым объектам, чтобы создавать динамические, «живые» искажения их цветов прямо во время выполнения игры. Этот подход позволяет точечно украсить игру уникальными эффектами, не перегружая производительность.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
const fragShader = `
precision mediump float;
uniform sampler2D uMainSampler;
uniform float uTime;
varying vec2 outTexCoord;
varying vec4 outTint;
void main()
{
vec4 texture = texture2D(uMainSampler, outTexCoord);
texture *= vec4(outTint.rgb * outTint.a, outTint.a);
vec3 p = vec3(outTexCoord.xy,sin(uTime * 0.2));
for (int i = 0; i < 10; i++)
{
p.xzy = vec3(1.3,0.999,0.7)*(abs((abs(p)/dot(p,p)-vec3(1.0,1.0,cos(uTime * 0.2)*0.5))));
}
gl_FragColor.rgb = texture.rgb * p;
gl_FragColor.a = texture.a;
}
`;
// This custom render node uses a custom shader to warp the color of the texture.
class CustomSingleRender extends Phaser.Renderer.WebGL.RenderNodes.BatchHandlerQuadSingle
{
constructor (manager)
{
super (manager, {
name: 'CustomSingleRender',
shaderName: 'SINGLE_COLOR_WARP',
fragmentSource: fragShader,
maxTexturesPerBatch: 1
});
}
}
class Example extends Phaser.Scene
{
constructor ()
{
super();
this.t = 0;
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.setPath('assets/tests/pipeline/');
this.load.image('cake', 'cake.png');
this.load.image('crab', 'crab.png');
this.load.image('fish', 'fish.png');
this.load.image('pudding', 'pudding.png');
}
create ()
{
this.customRenderNode = new CustomSingleRender(this.renderer.renderNodes);
this.add.sprite(100, 300, 'pudding');
this.crab = this.add.sprite(400, 300, 'crab').setScale(1.5);
this.crab.setRenderNodeRole('BatchHandler', this.customRenderNode);
this.fish = this.add.sprite(400, 300, 'fish');
this.fish.setRenderNodeRole('BatchHandler', this.customRenderNode);
this.add.sprite(700, 300, 'cake');
this.input.on('pointermove', pointer => {
this.fish.x = pointer.worldX;
this.fish.y = pointer.worldY;
});
this.input.on('pointerdown', () => {
if (this.fish.customRenderNodes.BatchHandler)
{
this.fish.setRenderNodeRole('BatchHandler', null);
}
else
{
this.fish.setRenderNodeRole('BatchHandler', this.customRenderNode);
}
});
}
update ()
{
this.customRenderNode.programManager.setUniform('uTime', this.t);
this.t += 0.05;
this.fish.rotation -= 0.01;
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#0a0067',
parent: 'phaser-example',
scene: Example
};
let game = new Phaser.Game(config);
Сердце эффекта: Пишем фрагментный шейдер
Весь визуальный магический эффект создается в фрагментном шейдере на языке GLSL. Его задача — для каждого пикселя спрайта рассчитать итоговый цвет, основываясь на исходной текстуре и дополнительной математике.
const fragShader = `
precision mediump float;
uniform sampler2D uMainSampler;
uniform float uTime;
varying vec2 outTexCoord;
varying vec4 outTint;
void main()
{
vec4 texture = texture2D(uMainSampler, outTexCoord);
texture *= vec4(outTint.rgb * outTint.a, outTint.a);
vec3 p = vec3(outTexCoord.xy,sin(uTime * 0.2));
for (int i = 0; i < 10; i++)
{
p.xzy = vec3(1.3,0.999,0.7)*(abs((abs(p)/dot(p,p)-vec3(1.0,1.0,cos(uTime * 0.2)*0.5))));
}
gl_FragColor.rgb = texture.rgb * p;
gl_FragColor.a = texture.a;
}
`;Ключевые моменты:
* uMainSampler — это текстура нашего спрайта (например, изображение краба).
* uTime — uniform-переменная, которую мы будем обновлять каждый кадр из кода игры. Она делает эффект анимированным.
* outTexCoord — координаты текущего пикселя в текстуре.
* Сначала мы получаем исходный цвет пикселя из текстуры и применяем к нему стандартный tint-цвет Phaser.
* Далее создается трехмерный вектор `p`, зависящий от координат текстуры и синуса времени. С ним производится цикл из 10 итераций нелинейных преобразований, которые и генерируют сложный, плавно меняющийся узор.
* Итоговый цвет пикселя (gl_FragColor) — это умножение исходного цвета текстуры на вычисленный вектор `p`. Это создает эффект «прожигания» или «неонового свечения» исходного изображения.
Интеграция в Phaser: Создаем кастомный Render Node
Чтобы Phaser использовал наш шейдер, нужно создать специальный класс, расширяющий встроенный обработчик отрисовки. В Phaser 3 для этого существует система Render Nodes.
class CustomSingleRender extends Phaser.Renderer.WebGL.RenderNodes.BatchHandlerQuadSingle
{
constructor (manager)
{
super (manager, {
name: 'CustomSingleRender',
shaderName: 'SINGLE_COLOR_WARP',
fragmentSource: fragShader,
maxTexturesPerBatch: 1
});
}
}Что здесь происходит:
* Мы наследуемся от BatchHandlerQuadSingle — класса, отвечающего за пакетную отрисовку одиночных текстур (спрайтов).
* В конструкторе передаем конфигурационный объект: даем имя нашему обработчику, указываем имя шейдера, подставляем написанный ранее исходный код шейдера (fragmentSource) и ограничиваем пакет одной текстурой за раз (maxTexturesPerBatch: 1).
* Теперь у нас есть CustomSingleRender — полноценный узел рендеринга, который можно назначить любому спрайту.
Применение эффекта к объектам в сцене
Создадим сцену, загрузим ресурсы и применим наш эффект к выбранным спрайтам.
create ()
{
// 1. Создаем экземпляр нашего кастомного узла отрисовки
this.customRenderNode = new CustomSingleRender(this.renderer.renderNodes);
// 2. Добавляем спрайты. Некоторые будут обычными, к некоторым применим эффект.
this.add.sprite(100, 300, 'pudding'); // Обычный спрайт
this.crab = this.add.sprite(400, 300, 'crab').setScale(1.5);
this.crab.setRenderNodeRole('BatchHandler', this.customRenderNode); // Применяем эффект!
this.fish = this.add.sprite(400, 300, 'fish');
this.fish.setRenderNodeRole('BatchHandler', this.customRenderNode); // Применяем эффект!
this.add.sprite(700, 300, 'cake'); // Обычный спрайт
}Ключевой метод — setRenderNodeRole('BatchHandler', this.customRenderNode). Он говорит движку: «Для отрисовки этого конкретного спрайта (crab или fish) используй не стандартный обработчик, а мой кастомный CustomSingleRender». Остальные спрайты (pudding, cake) отрисовываются стандартным путем.
Анимация и интерактивность
Чтобы эффект ожил, нужно обновлять uniform-переменную uTime в шейдере каждый кадр. Также добавим интерактивности для наглядности.
update ()
{
// Передаем в шейдер текущее время, увеличивая его каждым кадром
this.customRenderNode.programManager.setUniform('uTime', this.t);
this.t += 0.05;
this.fish.rotation -= 0.01; // Вращаем рыбку для большей динамики
}
// В create() добавляем обработчики событий мыши/тача:
this.input.on('pointermove', pointer => {
this.fish.x = pointer.worldX;
this.fish.y = pointer.worldY;
});
this.input.on('pointerdown', () => {
// По клику переключаем применение эффекта к рыбке
if (this.fish.customRenderNodes.BatchHandler)
{
this.fish.setRenderNodeRole('BatchHandler', null); // Убираем эффект
}
else
{
this.fish.setRenderNodeRole('BatchHandler', this.customRenderNode); // Возвращаем эффект
}
});Метод programManager.setUniform('uTime', this.t) — это мост между JavaScript и GLSL. Значение this.t передается в шейдер и используется в вычислениях синуса и косинуса, заставляя геометрический узор плавно пульсировать и меняться. Интерактивность демонстрирует, как эффект можно динамически включать и выключать для объектов во время игры.
Что попробовать дальше
Мы разобрали полный цикл создания и применения кастомного шейдерного эффекта к отдельным спрайтам в Phaser 3. Этот мощный механизм позволяет выйти за рамки стандартного рендеринга. Для экспериментов попробуйте: изменить математику внутри шейдера для создания эффектов воды, огня или дисторсии; передавать в шейдер другие uniform-переменные (например, положение курсора или здоровье персонажа); или применить разные кастомные Render Node к разным группам объектов для создания сложных визуальных слоев.