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

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

Встроенная настройка `transparent` в конфигурации 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('pic', 'assets/pics/forgotten-worlds.png');
    }

    create ()
    {
        //  This just injects an image into the div background, so you can see the transparency working.
        const div = document.getElementById('phaser-example');

        div.style.background = 'url(assets/demoscene/multi-color-raster.png)';

        this.add.image(400, 600, 'pic').setOrigin(0.5, 1);
    }
}

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

const game = new Phaser.Game(config);

Включаем прозрачность в конфигурации игры

Ключевой параметр для активации прозрачности находится в основном объекте конфигурации игры. Вместо сплошного цвета фон холста становится прозрачным, позволяя отображать элементы HTML-страницы, находящиеся под ним.

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

Установка свойства transparent в значение true — это всё, что требуется от Phaser. Дальнейшая работа по управлению фоном ложится на CSS и структуру вашей HTML-страницы. Без этой настройки Phaser по умолчанию создает непрозрачный черный фон.

Демонстрация работы: фон через CSS

В примере сцена использует прозрачность холста для отображения фонового изображения, заданного через CSS для родительского HTML-элемента. Это наглядно показывает, как игровые объекты могут быть наложены на любой фон.

create ()
{
    //  Получаем ссылку на родительский div и задаём ему фоновое изображение
    const div = document.getElementById('phaser-example');
    div.style.background = 'url(assets/demoscene/multi-color-raster.png)';

    //  Добавляем игровое изображение. Оно отрисуется поверх CSS-фона.
    this.add.image(400, 600, 'pic').setOrigin(0.5, 1);
}

Код в методе create выполняет две задачи. Сначала он находит HTML-элемент с id phaser-example (это контейнер, указанный в parent конфигурации) и устанавливает ему фоновое изображение через свойство style.background. Затем с помощью this.add.image добавляет игровую картинку. Поскольку холст прозрачен, мы видим эту картинку поверх узорчатого CSS-фона.

Практическое применение и идеи

Прозрачный холст — это не просто визуальный трюк, а мощный инструмент для интеграции.

* **Интерактивные виджеты:** Создание игровых элементов (например, анимированных индикаторов или мини-игр), которые встраиваются прямо в интерфейс сайта или веб-приложения. * **Сложные UI-композиции:** Когда игровой HUD (интерфейс) должен быть частью более сложной HTML/CSS-вёрстки, а не отрисовываться поверх сплошного игрового фона. * **Наложения (Overylay):** Разработка поверхностных эффектов, которые работают поверх другого контента, например, систем частиц или анимированных переходов на веб-странице.

Важно помнить, что при включенной прозрачности Phaser не очищает холст цветом в каждом кадре. Если ваши игровые объекты движутся, они могут оставлять "шлейф". Чтобы избежать этого, используйте подходящий фон внутри самой игры или очищайте холст другими методами.

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

Настройка transparent: true — это простой и эффективный способ выйти за рамки стандартного прямоугольного игрового окна. Она стирает границу между игровым холстом и веб-страницей. Для экспериментов попробуйте разместить под холстом видео, интерактивные SVG-элементы или динамический CSS-градиент. Другой интересный путь — управлять прозрачностью самого контейнера через CSS (opacity), создавая эффект постепенного появления или исчезновения всей игры.