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

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

Создание визуально привлекательных переходов — важная часть игрового дизайна. В этом примере мы рассмотрим, как с помощью встроенного фильтра `Wipe` реализовать интерактивный эффект "проявляющегося" перехода между двумя изображениями, управляемый движением курсора мыши. Этот приём можно использовать для создания интерактивных меню, кат-сцен или плавного открытия новых областей на игровой карте.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('pic1', 'assets/pics/robot-ai.jpg');
        this.load.image('pic2', 'assets/pics/baal-ai.jpg');
    }

    create ()
    {
        this.add.image(400, 300, 'pic1');

        const sprite = this.add.image(400, 300, 'pic2');

        const fx = sprite.enableFilters().filters.internal.addWipe(0.01, 0, 0);

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

            fx.progress = pointer.worldX / 800;

        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#0a0067',
    parent: 'phaser-example',
    scene: Example
};

let game = new Phaser.Game(config);

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

Первым делом мы создаём класс сцены, наследующий от Phaser.Scene, и загружаем два изображения, которые будут участвовать в переходе. Важно использовать метод load.setBaseURL для указания базового пути к ресурсам, чтобы избежать ошибок при загрузке.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('pic1', 'assets/pics/robot-ai.jpg');
    this.load.image('pic2', 'assets/pics/baal-ai.jpg');
}

Создание изображений и настройка фильтра

В методе create мы размещаем первое изображение как фоновое. Второе изображение добавляется поверх первого в той же позиции (центр экрана). Для него активируется система фильтров с помощью sprite.enableFilters(), и в её внутренний список (filters.internal) добавляется фильтр типа Wipe. Конструктор фильтра принимает три параметра: начальный прогресс перехода, направление по оси X и направление по оси Y. В нашем случае прогресс установлен в 0.01, что означает почти полное перекрытие первым изображением.

create ()
{
    this.add.image(400, 300, 'pic1');
    const sprite = this.add.image(400, 300, 'pic2');
    const fx = sprite.enableFilters().filters.internal.addWipe(0.01, 0, 0);
}

Связывание фильтра с движением курсора

Чтобы сделать переход интерактивным, мы используем событие pointermove от системы ввода Phaser (this.input). В обработчике события мы вычисляем прогресс фильтра на основе горизонтальной позиции курсора в мире игры (pointer.worldX). Поскольку ширина нашего игрового поля (width) равна 800 пикселям, деление pointer.worldX / 800 даёт нам значение прогресса от 0 (левая граница) до 1 (правая граница). Это значение присваивается свойству progress объекта фильтра fx, что динамически меняет видимость второго изображения.

this.input.on('pointermove', pointer => {
    fx.progress = pointer.worldX / 800;
});

Конфигурация игры

Пример завершается стандартной конфигурацией объекта игры Phaser.Game. Указывается тип рендерера (Phaser.AUTO), размеры холста, цвет фона и корневой класс сцены.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#0a0067',
    parent: 'phaser-example',
    scene: Example
};

let game = new Phaser.Game(config);

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

Фильтр Wipe — это мощный и простой в использовании инструмент для создания плавных переходов между визуальными элементами в Phaser. Экспериментируйте с параметрами при создании фильтра: измените направление (второй и третий аргументы addWipe) для вертикальных или диагональных переходов. Также попробуйте привязать прогресс не к курсору, а к таймеру для автоматической анимации или к прогрессу выполнения игровой задачи (например, заполнению шкалы здоровья).