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

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

Создание сложных визуальных эффектов из простых элементов — ключ к живой и привлекательной графике в играх. Эта статья разбирает пример, где 108 спрайтов выстраиваются в идеальную сетку и затем оживают, запускаясь в плавную «волну» пульсаций. Вы научитесь использовать `Phaser.Actions.GridAlign` для точного позиционирования и мастерски управлять задержками в tween-анимациях, чтобы создавать гипнотические паттерны без написания тонн однообразного кода. Этот приём отлично подходит для создания фоновых анимаций, эффектов меню или визуализации.

Версия 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('bg', 'assets/tweens/space.png');
        this.load.image('block', 'assets/sprites/50x50.png');
    }

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

        const blocks = this.add.group({ key: 'block', repeat: 107, setScale: { x: 0.3, y: 0.3 } });

        Phaser.Actions.GridAlign(blocks.getChildren(), {
            width: 12,
            height: 9,
            cellWidth: 60,
            cellHeight: 60,
            x: 40,
            y: 30
        });

        let i = 0;

        blocks.children.forEach(child => {

            this.tweens.add({
                targets: child,
                scale: 1,
                ease: 'sine.inout',
                duration: 300,
                delay: i * 50,
                repeat: -1,
                yoyo: true,
                repeatDelay: 500
            });

            i++;

            if (i % 12 === 0)
            {
                i = 0;
            }

        });
    }
}

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

const game = new Phaser.Game(config);

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

Вся магия начинается с базовой настройки сцены. В методе preload мы загружаем два изображения: фон и спрайт блока. Обратите внимание, что для блока мы будем использовать масштабирование, поэтому исходный размер не так важен.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/tweens/space.png');
    this.load.image('block', 'assets/sprites/50x50.png');
}

В методе create первым делом добавляется фоновое изображение. Затем создаётся группа (Group) — мощный контейнер Phaser для управления множеством однотипных объектов. Параметр repeat: 107 указывает, что вместе с первым созданным спрайтом в группе окажется 108 элементов (1 + 107 повторов). Опция setScale сразу применяет уменьшение масштаба ко всем блокам.

create ()
{
    this.add.image(400, 300, 'bg');
    const blocks = this.add.group({ key: 'block', repeat: 107, setScale: { x: 0.3, y: 0.3 } });
    // ... Дальнейший код
}

Идеальное расположение с помощью GridAlign

Ручное расстановка 108 блоков — задача немыслимая. На помощь приходит Phaser.Actions.GridAlign. Этот статический метод принимает массив детей группы и конфигурационный объект, чтобы расставить их в идеальную сетку.

Phaser.Actions.GridAlign(blocks.getChildren(), {
    width: 12,
    height: 9,
    cellWidth: 60,
    cellHeight: 60,
    x: 40,
    y: 30
});

Разберём параметры: - width: 12, height: 9: Задаёт размер сетки 12x9, что в сумме даёт 108 ячеек — ровно по количеству наших блоков. - cellWidth: 60, cellHeight: 60: Определяет размер (шаг) каждой ячейки сетки в пикселях. - x: 40, y: 30: Задаёт координаты верхнего левого угла всей сетки на игровом поле.

В результате все спрайты в группе blocks мгновенно организуются в ровные строки и столбцы.

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

Сердце эффекта — это создание tween (плавной анимации) для каждого блока с уникальной задержкой. Мы перебираем всех детей группы с помощью forEach.

let i = 0;
blocks.children.forEach(child => {
    this.tweens.add({
        targets: child,
        scale: 1,
        ease: 'sine.inout',
        duration: 300,
        delay: i * 50,
        repeat: -1,
        yoyo: true,
        repeatDelay: 500
    });
    i++;
    if (i % 12 === 0)
    {
        i = 0;
    }
});

Ключевые параметры tween: - targets: child: Анимируемый объект — текущий блок. - scale: 1: Конечное значение — возврат к исходному масштабу (от 0.3 до 1). - ease: 'sine.inout': Плавная синусоидальная функция easing для естественного ускорения и замедления. - duration: 300: Длительность одного цикла анимации (в миллисекундах). - delay: i * 50: Самая важная настройка. Задержка старта анимации для каждого блока увеличивается на 50 мс. Это создаёт эффект «волны», бегущей по сетке. - repeat: -1: Бесконечное повторение анимации. - yoyo: true: Анимация будет проигрываться в прямом и обратном направлении (масштаб увеличится до 1 и уменьшится обратно до 0.3). - repeatDelay: 500: Пауза в 500 мс между циклами повторения, что даёт ритмичность эффекту.

Счётчик `i` увеличивается для каждого блока и сбрасывается каждые 12 итераций. Это значит, что в каждой колонке сетки (шириной 12 блока) анимации запускаются с одинаковыми задержками, создавая вертикальную волну.

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

Комбинируя Group, GridAlign и цепочку tween с нарастающей задержкой, вы можете генерировать сложные паттерны анимаций буквально несколькими строками кода. Для экспериментов попробуйте изменить: 1. Форму волны, сбрасывая счётчик `iпо другому условию (например,if (i % 6 === 0)`). 2. Анимируемые свойства: замените scale на alpha (прозрачность) или angle (вращение). 3. Функцию easing (например, bounce.out) для более игривого эффекта. 4. Размер сетки и шаг задержки, чтобы создать спиральные или диагональные волны.