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

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

Этот пример демонстрирует мощь системы анимаций 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('raster', 'assets/demoscene/raster-bw-800x16.png');
    }

    create ()
    {
        const group = this.add.group();

        group.createMultiple({ key: 'raster', repeat: 64 });

        const hsv = Phaser.Display.Color.HSVColorWheel();

        let i = 0;

        const _this = this;

        group.children.forEach(child =>
        {

            child.x = 400;
            child.y = 100;
            child.depth = 64 - i;

            child.setTint(hsv[i * 4].color);

            i++;

            _this.tweens.add({
                targets: child,
                props: {
                    y: { value: 500, duration: 1500 },
                    scaleX: { value: child.depth / 64, duration: 6000, hold: 2000, delay: 2000 }
                },
                yoyo: true,
                repeat: -1,
                ease: 'Sine.easeInOut',
                delay: 32 * i
            });

        });
    }
}

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

const game = new Phaser.Game(config);

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

В методе preload загружается одно растровое изображение, которое будет использовано для создания множества спрайтов. Ключевой элемент здесь — this.add.group(). Группа в Phaser — это контейнер, упрощающий управление множеством однотипных игровых объектов.

const group = this.add.group();
group.createMultiple({ key: 'raster', repeat: 64 });

Метод createMultiple создаёт 65 спрайтов (1 оригинал + 64 повторения), используя загруженное изображение 'raster'. Все они автоматически добавляются в группу group.

Настройка позиций и цвета

Далее в цикле forEach происходит начальная настройка каждого созданного спрайта (child). Все спрайты выстраиваются в одну вертикальную линию по X=400 и Y=100.

child.x = 400;
child.y = 100;
child.depth = 64 - i;
child.setTint(hsv[i * 4].color);

Свойство depth определяет порядок отрисовки. Спрайту с большим значением depth присваивается меньший порядковый номер `i, что помещает его "ближе" к камере. Цвет задаётся черезsetTint, используя предсгенерированную палитруHSVColorWheel`. Цвет берётся из палитры с шагом в 4, чтобы пройти весь спектр на всех спрайтах.

Создание цепочки анимаций

Сердце эффекта — это система твинов. Для каждого спрайта создаётся комплексная анимация с помощью this.tweens.add.

_this.tweens.add({
    targets: child,
    props: {
        y: { value: 500, duration: 1500 },
        scaleX: { value: child.depth / 64, duration: 6000, hold: 2000, delay: 2000 }
    },
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut',
    delay: 32 * i
});

Анимация управляет двумя свойствами (props): координатой `yи масштабом по оси XscaleX. Криваяease: 'Sine.easeInOut'обеспечивает плавное ускорение и замедление. Параметрdelay: 32 * iсоздаёт последовательный запуск анимации для каждого следующего спрайта, формируя волну. Флагиyoyoиrepeat: -1` заставляют анимацию колебаться и повторяться бесконечно.

Работа с цветовой палитрой HSV

Phaser предоставляет удобный инструмент для генерации цветовых градиентов.

const hsv = Phaser.Display.Color.HSVColorWheel();

Вызов HSVColorWheel() возвращает массив из 360 объектов (по градусу на цветовом круге). Каждый объект содержит представление цвета в форматах HSV и RGB. В примере это используется для создания плавного цветового перехода через все спрайты, что усиливает волновой эффект.

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

Пример показывает, как комбинация групп, палитр и цепочек твинов позволяет создавать сложную анимацию из простых компонентов. Для экспериментов попробуйте изменить функцию ease, поиграть со значениями delay и duration для изменения ритма волны, или заменить scaleX на angle для создания спирального эффекта. Также можно динамически менять палитру hsv в ходе анимации.