О чем этот пример
Использование динамического освещения и normal-карт — мощный инструмент для добавления глубины и атмосферы в 2D-игры. Вместо плоских спрайтов вы получаете объёмные поверхности, которые реагируют на свет, создавая иллюзию трёхмерности. Этот пример из официальной галереи Phaser демонстрирует, как загрузить тайловую карту из Tiled вместе с normal-картой для текстур, добавить источник света и управлять им курсором мыши, а камерой — с клавиатуры. Вы научитесь настраивать систему освещения и оживлять статичные уровни.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
controls;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.setPath('assets/tilemaps/');
this.load.image('tiles', [ 'tiles/cybernoid.png', 'tiles/cybernoid_n.png' ]);
this.load.tilemapTiledJSON('map', 'maps/cybernoid.json');
}
create ()
{
const light = this.lights.addLight(0, 0, 300);
this.lights.enable().setAmbientColor(0x888888);
this.input.on('pointermove', function (pointer)
{
light.x = this.cameras.main.scrollX + pointer.x;
light.y = this.cameras.main.scrollY + pointer.y;
}, this);
const map = this.make.tilemap({ key: 'map' });
const tiles = map.addTilesetImage('cybernoid', 'tiles');
const layer = map.createLayer(0, tiles, 0, 0);
layer.setLighting(true);
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
const cursors = this.input.keyboard.createCursorKeys();
const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
speed: 0.5
};
this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);
}
update (time, delta)
{
this.controls.update(delta);
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
pixelArt: true,
scene: Example
};
const game = new Phaser.Game(config);
Настройка загрузки: тайлы, normal-карты и JSON
В методе preload() загружаются все необходимые ресурсы. Ключевой момент — загрузка изображения тайлов. Phaser позволяет загрузить основную текстуру и соответствующую ей normal-карту одним вызовом, передав массив путей.
this.load.image('tiles', [ 'tiles/cybernoid.png', 'tiles/cybernoid_n.png' ]);Первый элемент массива — обычная цветная текстура (cybernoid.png). Второй — её normal-карта (cybernoid_n.png). Normal-карта кодирует информацию о направлении поверхности (нормалях) в цветах RGB, что позволяет системе освещения рассчитать, как свет должен падать на каждый пиксель.
Также загружается сама карта, созданная в редакторе Tiled и экспортированная в формат JSON.
this.load.tilemapTiledJSON('map', 'maps/cybernoid.json');Создание сцены: свет, карта и управление
В методе create() происходит инициализация игрового мира.
Сначала создаётся точечный источник света и включается система освещения для всей сцены.
const light = this.lights.addLight(0, 0, 300);
this.lights.enable().setAmbientColor(0x888888);this.lights.addLight(0, 0, 300) создаёт свет с радиусом 300 пикселей. this.lights.enable() активирует систему освещения в сцене. setAmbientColor(0x888888) устанавливает цвет окружающего (фонового) света. Без него области вне радиуса основного источника были бы полностью чёрными.
Затем свет привязывается к движению указателя мыши. Координаты света обновляются с учётом прокрутки камеры, чтобы свет всегда был под курсором относительно игрового мира.
this.input.on('pointermove', function (pointer) {
light.x = this.cameras.main.scrollX + pointer.x;
light.y = this.cameras.main.scrollY + pointer.y;
}, this);Создание тайлового слоя с поддержкой освещения
Далее создаётся тайловая карта и слой.
const map = this.make.tilemap({ key: 'map' });
const tiles = map.addTilesetImage('cybernoid', 'tiles');
const layer = map.createLayer(0, tiles, 0, 0);
layer.setLighting(true);this.make.tilemap({ key: 'map' }) создаёт объект тайловой карты из загруженных данных JSON.
map.addTilesetImage('cybernoid', 'tiles') связывает имя тайлсета из JSON-файла карты ('cybernoid') с ключом загруженного изображения в кэше загрузчика ('tiles'). Именно здесь Phaser понимает, что у изображения 'tiles' есть связанная normal-карта.
map.createLayer(0, tiles, 0, 0) создаёт первый слой (индекс 0) карты.
Самая важная строка для эффекта — layer.setLighting(true). Она включает расчёт освещения для всех тайлов на этом слое. Без этого вызова normal-карта не будет работать, и свет будет равномерно заливать текстуру.
Управление камерой и конфигурация игры
Чтобы исследовать большую карту, нужна камера. Её границы устанавливаются по размеру карты в пикселях.
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);Для управления используется готовый контрол Phaser.Cameras.Controls.FixedKeyControl, который перемещает камеру при зажатии стрелок клавиатуры.
const cursors = this.input.keyboard.createCursorKeys();
const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
speed: 0.5
};
this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);В методе update() состояние контрола обновляется каждый кадр.
update (time, delta) {
this.controls.update(delta);
}Конфигурация игры (config) должна использовать Phaser.WEBGL, так как система освещения работает только в этом рендерере. Параметр pixelArt: true важен для сохранения чёткости пиксельной графики при масштабировании.
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
pixelArt: true,
scene: Example
};Что попробовать дальше
Вы реализовали интерактивную сцену с динамическим освещением на основе normal-карт. Normal-карты превращают плоские 2D-текстуры в поверхности, реагирующие на свет, что кардинально меняет восприятие уровня. Для экспериментов попробуйте: добавить несколько источников света разного цвета и радиуса, сделать свет статичным (например, от факела) и анимировать его параметры, или использовать другие типы освещения, доступные в Phaser. Не забывайте, что для работы освещения обязателен рендерер WebGL.