Phaser.js: всё об играх и разработке

О чем этот пример

Освещение — мощный инструмент для погружения игрока в атмосферу вашей игры. Phaser 3 позволяет легко добавлять динамические источники света, которые взаимодействуют не только со спрайтами, но и с текстом. В этой статье мы разберем, как создать интерактивный прожектор, который подсвечивает текст с различными стилями теней, превращая статичный интерфейс в живой и отзывчивый элемент игрового мира. Вы научитесь настраивать свечение, тени и реагировать на действия игрока.

Версия 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('sonic', 'assets/sprites/sonic_havok_sanity.png');
        this.load.image('bg', [ 'assets/textures/gold.png', 'assets/textures/gold-n.png' ]);
    }

    create ()
    {
        this.add.sprite(400, 300, 'bg').setLighting(true).setAlpha(0.5);

        const text1 = this.add.text(20, 50, 'Shadow Stroke', { fontFamily: 'Arial Black', fontSize: 74, color: '#00a6ed' });
        text1.setStroke('#2d2d2d', 16);
        text1.setShadow(4, 4, '#000000', 8, true, false);
        text1.setLighting(true);

        const text2 = this.add.text(20, 180, 'Shadow Fill', { fontFamily: 'Arial Black', fontSize: 74, color: '#00a6ed' });
        text2.setStroke('#2d2d2d', 16);
        text2.setShadow(4, 4, '#000000', 2, false, true);
        text2.setLighting(true);

        const text3 = this.add.text(20, 310, 'Shadow Both', { fontFamily: 'Arial Black', fontSize: 74, color: '#00a6ed' });
        text3.setStroke('#2d2d2d', 16);
        text3.setShadow(4, 4, '#000000', 2, true, true);
        text3.setLighting(true);

        const text4 = this.add.text(20, 440, 'Shadow None', { fontFamily: 'Arial Black', fontSize: 74, color: '#00a6ed' });
        text4.setStroke('#2d2d2d', 16);
        text4.setShadow(4, 4, '#000000', 2, false, false);
        text4.setLighting(true);

        this.add.sprite(680, 600, 'sonic').setOrigin(0.5, 1);

        this.lights.enable();
        this.lights.setAmbientColor(0x808080);

        const spotlight = this.lights.addLight(400, 300, 280).setIntensity(3);

        this.input.on('pointermove', pointer =>
        {

            spotlight.x = pointer.x;
            spotlight.y = pointer.y;

        });

        const colors = [
            0xffffff, 0xff0000, 0x00ff00, 0x00ffff, 0xff00ff, 0xffff00
        ];

        let currentColor = 0;

        this.input.on('pointerdown', pointer =>
        {

            currentColor++;

            if (currentColor === colors.length)
            {
                currentColor = 0;
            }

            spotlight.setColor(colors[currentColor]);

        });
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};


const game = new Phaser.Game(config);

Подготовка сцены и загрузка ресурсов

Класс Example расширяет Phaser.Scene. В методе preload() мы загружаем два изображения. Обратите внимание на загрузку фона: вторым параметром передается массив из двух путей. Это позволяет загрузить текстуру и соответствующую ей нормальную карту (normal map), которая используется для корректного расчета освещения.

this.load.image('bg', [ 'assets/textures/gold.png', 'assets/textures/gold-n.png' ]);

После загрузки в методе create() мы сразу добавляем спрайт фона. Метод setLighting(true) включает для этого спрайта взаимодействие со светом, а setAlpha(0.5) делает его полупрозрачным, чтобы световые эффекты на тексте были более заметны.

Создание текста со стилями и светом

Далее создаются четыре текстовых объекта с разными настройками теней. Это демонстрирует, как эффекты освещения сочетаются с базовыми стилями текста Phaser.

- setStroke(color, thickness): добавляет контур (обводку) указанного цвета и толщины. - setShadow(offsetX, offsetY, color, blur, shadowStroke, shadowFill): настраивает тень. Ключевые параметры — shadowStroke и shadowFill. Они определяют, будет ли тень применена к обводке, к заливке текста или к обоим элементам. - setLighting(true): включает для текстового объекта взаимодействие с системой освещения. Без этого вызова свет будет проходить сквозь текст.

const text1 = this.add.text(20, 50, 'Shadow Stroke', { fontFamily: 'Arial Black', fontSize: 74, color: '#00a6ed' });
text1.setStroke('#2d2d2d', 16);
text1.setShadow(4, 4, '#000000', 8, true, false);
text1.setLighting(true);

Включение системы освещения и настройка света

Чтобы свет начал работать, необходимо активировать систему освещения на сцене и создать источник света.

this.lights.enable();
this.lights.setAmbientColor(0x808080);

Метод this.lights.enable() включает систему динамического освещения для текущей сцены. this.lights.setAmbientColor(0x808080) устанавливает цвет окружающего (фонового) освещения. В данном случае это серый цвет, чтобы объекты не погружались в полную темноту вне зоны действия прожектора.

Затем создается точечный источник света — прожектор.

const spotlight = this.lights.addLight(400, 300, 280).setIntensity(3);

Метод this.lights.addLight(x, y, radius) создает свет с заданными координатами и радиусом. Цепочкой вызывается setIntensity(3), который увеличивает интенсивность (яркость) света в три раза относительно базовой.

Связывание света с вводом данных от игрока

Свет становится по-настоящему интерактивным, когда реагирует на действия игрока. В примере это реализовано через два слушателя событий от this.input.

Первый слушатель pointermove перемещает прожектор за курсором мыши или касанием.

this.input.on('pointermove', pointer => {
    spotlight.x = pointer.x;
    spotlight.y = pointer.y;
});

Координаты света (spotlight.x, spotlight.y) просто обновляются координатами указателя (pointer.x, pointer.y). Это создает эффект фонарика.

Второй слушатель pointerdown меняет цвет прожектора при каждом клике, перебирая заранее заданный массив цветов.

this.input.on('pointerdown', pointer => {
    currentColor++;
    if (currentColor === colors.length) {
        currentColor = 0;
    }
    spotlight.setColor(colors[currentColor]);
});

Метод spotlight.setColor(hexColor) изменяет цвет испускаемого света. Индекс currentColor сбрасывается по кругу, когда достигает конца массива.

Конфигурация игры и запуск

Важнейший момент для работы освещения — указание правильного рендерера в конфигурации игры. Система динамического освещения в Phaser 3 работает только с рендерером WebGL.

const config = {
    type: Phaser.WEBGL, // Обязательно WEBGL, а не CANVAS
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

Если установить type: Phaser.CANVAS, освещение работать не будет. После определения конфигурации создается экземпляр игры new Phaser.Game(config), который запускает весь процесс.

Что попробовать дальше

Как видите, добавление динамического освещения к тексту и интерфейсным элементам в Phaser 3 — задача, решаемая буквально в несколько строк. Вы можете экспериментировать: попробуйте добавить несколько независимых источников света, сделать их мерцающими с помощью таймера, или привязать свет не к курсору, а к движущемуся персонажу. Используйте нормальные карты для спрайтов, чтобы создать иллюзию рельефа. Комбинируя setLighting(), тени и цвета, вы сможете создавать уникальные атмосферные меню, диалоговые окна или внутриигровые надписи, которые органично впишутся в игровой мир.