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

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

Создание плавного и синхронизированного движения множества объектов — ключевая задача в аркадных и стратегических играх. Вместо того чтобы вручную прописывать координаты для каждого спрайта, Phaser предлагает мощный и элегантный инструмент — систему путей (Paths) и последователей (Followers). Эта статья покажет, как загрузить путь из JSON-файла и заставить целый отряд кораблей следовать по нему с задержкой, создавая эффект организованной эскадры.

Версия 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.json('waves', 'assets/paths/waves.json');
        this.load.image('ship', 'assets/sprites/bsquadron1.png');
    }

    create ()
    {
        const path = new Phaser.Curves.Path(this.cache.json.get('waves'));

        const graphics = this.add.graphics().lineStyle(1, 0x2d2d2d, 1);

        path.draw(graphics);

        for (let i = 0; i < 20; i++)
        {
            const follower = this.add.follower(path, 0, 0, 'ship');

            follower.startFollow({
                duration: 5000,
                positionOnPath: true,
                repeat: -1,
                ease: 'Linear',
                delay: i * 70
            });
        }
    }
}

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

const game = new Phaser.Game(config);

Загрузка данных: путь как ресурс

В Phaser путь можно не только создавать программно, но и загружать как внешний ресурс — например, из JSON-файла. Это особенно удобно для сложных траекторий, созданных в редакторах.

В методе preload мы используем this.load.json для загрузки файла с описанием пути. Он сохраняется в кэше под ключом 'waves'. Одновременно загружается изображение спрайта корабля.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.json('waves', 'assets/paths/waves.json');
    this.load.image('ship', 'assets/sprites/bsquadron1.png');
}

Создание и отрисовка пути

В методе create мы извлекаем данные пути из кэша и создаем объект Phaser.Curves.Path. Этот объект инкапсулирует всю информацию о кривой.

Затем, для наглядности отладки, мы создаем объект graphics и рисуем на нем наш путь с помощью метода path.draw(graphics). Это позволяет увидеть траекторию на экране.

create ()
{
    const path = new Phaser.Curves.Path(this.cache.json.get('waves'));
    const graphics = this.add.graphics().lineStyle(1, 0x2d2d2d, 1);
    path.draw(graphics);
    // ... Дальше создание последователей
}

Создание последователей (Followers)

Последователь — это специальный игровой объект (Follower), привязанный к пути. Мы создаем 20 таких объектов в цикле, используя фабричный метод this.add.follower. Первые три аргумента — это сам путь, стартовые координаты X, Y (они будут проигнорированы из-за positionOnPath) и ключ текстуры.

for (let i = 0; i < 20; i++)
{
    const follower = this.add.follower(path, 0, 0, 'ship');
    // ... Настройка движения
}

Настройка движения: старт с задержкой

Ключевой метод для запуска движения — follower.startFollow(). Он принимает объект конфигурации:

* duration: Время в миллисекундах, за которое последователь проходит весь путь. * positionOnPath: Если true, объект стартует с начала пути, а не с переданных координат (0,0). * repeat: Количество повторений (-1 для бесконечного цикла). * ease: Функция плавности. 'Linear' обеспечивает постоянную скорость. * delay: Задержка перед стартом для каждого объекта. Умножение i * 70 создает эффект «гусеницы».

follower.startFollow({
    duration: 5000,
    positionOnPath: true,
    repeat: -1,
    ease: 'Linear',
    delay: i * 70
});

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

Стандартная конфигурация игры Phaser. Важно убедиться, что parent соответствует ID HTML-элемента на вашей странице, куда будет встроен Canvas.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: Example
};
const game = new Phaser.Game(config);

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

Система Path и Follower в Phaser — это мощный инструмент для создания сложного патрульного движения, траекторий снарядов или путей для кат-сцен. Вы можете экспериментировать: изменять ease-функции для ускорения/замедления, динамически менять путь в реальном времени или привязывать к пути камеру для следования за лидером. Попробуйте генерировать пути алгоритмически или загружать более сложные из редакторов уровней.