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

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

Версия 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');
        this.load.image('ball', 'assets/sprites/shinyball.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)';

        console.log(this.sys.renderer);
        console.log(this.cameras.main);

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

        const ball = this.add.image(400, 100, 'ball');

        this.tweens.add({
            targets: ball,
            y: 600,
            ease: 'Sine.inOut',
            yoyo: true,
            repeat: -1
        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: 'rgba(100,0,0,0)',
    transparent: true,
    clearBeforeRender: false,
    scene: Example
};

const game = new Phaser.Game(config);

Ключевые настройки конфигурации

Чтобы активировать прозрачность, нужно изменить несколько параметров в объекте конфигурации игры. Основная магия происходит здесь.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: 'rgba(100,0,0,0)',
    transparent: true,
    clearBeforeRender: false,
    scene: Example
};

- backgroundColor: 'rgba(100,0,0,0)' устанавливает цвет фона. Последнее значение `0` в формате RGBA означает полную прозрачность альфа-канала. Первые три числа (100,0,0) в данном случае не имеют значения, так как альфа равна нулю. - transparent: true — это главный флаг, который сообщает рендереру (WebGL или Canvas), что фон холста должен быть прозрачным. - clearBeforeRender: false — важная настройка, которая отключает автоматическую очистку буфера кадра перед каждым рендером. Если оставить значение true, прозрачный фон будет затираться черным цветом на каждом кадре, и эффект не сработает.

Практический пример: игра и HTML-фон

В методе create() сцены демонстрируется, как можно совместить прозрачный холст Phaser с фоном, заданным через CSS. Это открывает возможности для интеграции.

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 ball = this.add.image(400, 100, 'ball');
    // ... твин
}

1. Сначала код получает ссылку на DOM-элемент с id phaser-example (это тот же элемент, который указан как parent в конфиге). 2. Этому элементу через style.background задается фоновое изображение. Теперь фон веб-страницы виден сквозь прозрачные области игры. 3. Далее добавляются игровые изображения: статичная картинка pic и спрайт ball. Они будут отрисовываться поверх нового HTML-фона, создавая эффект слоев.

Анимация поверх прозрачного фона

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

this.tweens.add({
    targets: ball,
    y: 600,
    ease: 'Sine.inOut',
    yoyo: true,
    repeat: -1
});

- targets: ball указывает, что анимация применяется к спрайту мяча. - Свойство y: 600 — это конечная координата по вертикали. - ease: 'Sine.inOut' задает плавную, синусоидальную функцию easing для движения. - yoyo: true заставляет анимацию проигрываться в обратном порядке после завершения основного движения. - repeat: -1 запускает анимацию на бесконечное повторение. Движущийся мяч наглядно показывает, как игровые объекты взаимодействуют с внешним фоном.

Отладка и проверка рендерера

При работе с прозрачностью полезно знать, какой именно рендерер используется, так как поведение WebGL и Canvas может отличаться. В примере есть две отладочные строки.

console.log(this.sys.renderer);
console.log(this.cameras.main);
- `this.sys.renderer` выведет в консоль информацию об активном рендерере (WebGL или Canvas). Это свойство экземпляра `Renderer`.
- `this.cameras.main` выведет данные о главной камере сцены. В данном контексте это может быть полезно для проверки ее параметров, хотя напрямую к прозрачности не относится. Убедитесь, что в продакшене эти `console.log` убраны.

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

Настройка прозрачного холста — мощный прием для интеграции игры в веб-страницу. Вы можете создавать UI, где игровая сцена плавно перетекает в интерфейс сайта, или использовать сложные CSS-эффекты в качестве фона. Для экспериментов попробуйте: изменить clearBeforeRender на true и увидеть разницу; добавить несколько слоев DOM-элементов под и над игровым холстом; или использовать анимированный CSS-градиент в качестве фона, поверх которого двигаются спрайты Phaser.