О чем этот пример
Интерактивное освещение — мощный инструмент для создания атмосферы в 2D-играх. Phaser предоставляет встроенную систему освещения, которая работает в паре с нормальными картами, позволяя реалистично имитировать падение света на поверхности. В этой статье мы разберем практический пример, где игрок может не только перемещать источник света, но и "рисовать" им на текстуре, создавая динамичные световые эффекты в реальном времени. Этот подход можно использовать для создания интерактивных головоломок, атмосферных исследований или просто визуально впечатляющих элементов геймплея.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('brick', [ 'assets/normal-maps/brick.jpg', 'assets/normal-maps/brick_n.png' ]);
this.load.image('brush', [ 'assets/tests/lights/skull.png', 'assets/tests/lights/skull-n.png' ]);
}
create ()
{
const brick = this.add.sprite(0, 0, 'brick');
brick.setOrigin(0.0);
brick.setLighting(true);
const rt = this.add.renderTexture(0, 0, 800, 600).setLighting(true).setOrigin(0, 0);
const brush = this.textures.getFrame('brush');
const light = this.lights.addLight(400, 300, 200).setIntensity(2);
this.lights.enable().setAmbientColor(0x555555);
this.input.on('pointermove', pointer =>
{
light.x = pointer.x;
light.y = pointer.y;
});
this.input.on('pointerdown', pointer =>
{
rt.draw(brush, pointer.x - 60, pointer.y - 80).render();
});
this.add.text(10, 10, 'Click to paint');
}
}
const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Подготовка ресурсов: нормальные карты и свечение
Для работы системы освещения Phaser необходимы не только обычные текстуры, но и нормальные карты (normal maps). Нормальная карта кодирует информацию о направлении поверхности каждого пикселя, что позволяет движку рассчитывать, как свет должен на нее падать, создавая иллюзию объема на плоском спрайте.
В методе preload мы загружаем два набора изображений. Ключевой момент — использование массива путей для метода load.image. Первый элемент массива — это путь к диффузной текстуре (основному цвету), а второй — путь к соответствующей нормальной карте.
this.load.image('brick', [ 'assets/normal-maps/brick.jpg', 'assets/normal-maps/brick_n.png' ]);
this.load.image('brush', [ 'assets/tests/lights/skull.png', 'assets/tests/lights/skull-n.png' ]);После загрузки текстуры 'brick' и 'brush' будут содержать оба канала, что необходимо для последующего включения освещения.
Сцена и базовое освещение
В методе create мы настраиваем сцену. Сначала создается фон — спрайт кирпичной стены. Для него активируется свойство lighting, что сообщает системе рендеринга, что этот объект должен реагировать на источники света.
const brick = this.add.sprite(0, 0, 'brick');
brick.setOrigin(0.0);
brick.setLighting(true);Далее создается объект RenderTexture. Это особая текстура в памяти, на которую можно рисовать другие текстуры в реальном времени, как на холсте. Ей также включается поддержка освещения.
const rt = this.add.renderTexture(0, 0, 800, 600).setLighting(true).setOrigin(0, 0);Затем создается собственно источник света с помощью this.lights.addLight. Указываются его начальные координаты, радиус и интенсивность.
const light = this.lights.addLight(400, 300, 200).setIntensity(2);Наконец, глобально включается система освещения для сцены и задается фоновый (ambient) цвет. Ambient-свет освещает все объекты равномерно, предотвращая полную темноту вне зоны действия основного источника.
this.lights.enable().setAmbientColor(0x555555);Интерактивность: перемещение света и рисование
Интерактивная часть реализуется через обработку событий ввода. Событие pointermove (движение курсора) привязывается к обновлению координат источника света, заставляя его следовать за указателем мыши или касанием.
this.input.on('pointermove', pointer => {
light.x = pointer.x;
light.y = pointer.y;
});Более интересная механика — рисование светом. При событии pointerdown (клик) на RenderTexture наносится отпечаток текстуры-кисти 'brush'. Важно: так как RenderTexture сама является светящимся объектом, нарисованная на ней кисть тоже будет взаимодействовать с нашим подвижным источником света.
this.input.on('pointerdown', pointer => {
rt.draw(brush, pointer.x - 60, pointer.y - 80).render();
});Метод draw принимает кадр текстуры (brush) и координаты для его отрисовки. Вычитание 60 и 80 пикселей — это простой способ центрирования изображения кисти относительно точки клика. Вызов .render() после draw обновляет текстуру, делая изменения видимыми.
Конфигурация игры и важное замечание
Ключевой момент конфигурации — использование Phaser.WEBGL. Система динамического освещения с нормальными картами работает только в режиме WebGL-рендеринга. Canvas-рендерер не поддерживает эту функциональность.
const config = {
type: Phaser.WEBGL, // Обязательно WEBGL
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};Инициализация игры стандартна:
const game = new Phaser.Game(config);Без установки type: Phaser.WEBGL освещение не будет работать, и вы, скорее всего, увидите только плоские спрайты.
Что попробовать дальше
Мы рассмотрели гибкую комбинацию системы освещения Phaser и RenderTexture для создания интерактивного светового холста. Вы можете экспериментировать: меняйте интенсивность света setIntensity, цвет источника setColor, ambient-освещение. Попробуйте использовать разные текстуры для кисти или сделать несколько независимых источников света. Интересный эксперимент — сохранять состояние RenderTexture и использовать его как динамическую текстуру для других игровых объектов, создавая сложные световые следы или "засвеченные" области.