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

Объект Rope в Phaser — мощный инструмент для создания динамических, изгибающихся элементов в вашей игре. В этой статье мы разберём пример горизонтальной верёвки, которая плавно колеблется, и покажем, как вы можете адаптировать этот код для создания реалистичных канатов, лент, флагов или даже хвостов персонажей. Вы научитесь управлять сегментами верёвки и анимировать их в реальном времени, добавив живости в игровой мир.

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

Живой запуск

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

Исходный код


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

        this.rope;
        this.count = 0;
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bg', 'assets/rope/background-red.png');
        this.load.image('banner', 'assets/rope/fade-one.png');
    }

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

        //  This creates a Rope Game Object.
        //  The value 20 instructs the Rope to split itself into 20 segments.
        //  The rope will be split horizontally, with the vertices arranged in a horizontal strip.

        //  The minimum number of segments you can have are 1, which is the same as a quad.
        //  The rope will use the defined texture to determine its width. The texture will not
        //  repeat should the Rope be shorter / longer, it will instead stretch (or shrink)
        this.rope = this.add.rope(400, 300, 'banner', null, 20);
    }

    update ()
    {
        this.count += 0.1;

        let points = this.rope.points;

        for (let i = 0; i < points.length; i++)
        {
            points[i].y = Math.sin(i * 0.5 + this.count) * 16;
        }

        this.rope.setDirty();
    }
}

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

let game = new Phaser.Game(config);

Инициализация сцены и загрузка ресурсов

В конструкторе класса сцены мы инициализируем свойства для хранения объекта верёвки и счётчика анимации.

В методе preload загружаются две текстуры: фон и изображение для самой верёвки (или ленты). Обратите внимание на использование setBaseURL — это удобно для загрузки из удалённого репозитория, но в реальном проекте вы, скорее всего, будете использовать локальные пути.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/rope/background-red.png');
    this.load.image('banner', 'assets/rope/fade-one.png');
}

Создание объекта Rope

Ключевой момент происходит в методе create. После добавления фона мы создаём объект верёвки с помощью this.add.rope.

Параметры метода: 1. X-координата (400). 2. Y-координата (300). 3. Ключ текстуры ('banner'). 4. Кадр текстуры (null, что означает использование всего изображения). 5. Количество сегментов (20).

Именно последний параметр определяет, на сколько частей будет разбита верёвка. Чем больше сегментов, тем плавнее изгибы, но выше нагрузка на рендеринг. Верёвка создаётся горизонтально, растягиваясь на ширину исходной текстуры.

this.rope = this.add.rope(400, 300, 'banner', null, 20);

Анимация верёвки через управление точками

Магия анимации происходит в update. На каждом кадре мы увеличиваем счётчик this.count, который выступает в роли общего времени для анимации.

Затем мы получаем массив points объекта верёвки. Каждая точка в этом массиве соответствует вершине, соединяющей сегменты. В цикле мы изменяем вертикальную координату `yкаждой точки, используя синусоидальную функциюMath.sin. Формулаi * 0.5 + this.count` обеспечивает сдвиг фазы для каждой следующей точки, создавая эффект волны.

После изменения координат точек, мы должны уведомить Phaser, что геометрия верёвки изменилась. Для этого вызывается критически важный метод this.rope.setDirty(). Без этого вызова изменения координат не отобразятся на экране.

update ()
{
    this.count += 0.1;

    let points = this.rope.points;

    for (let i = 0; i < points.length; i++)
    {
        points[i].y = Math.sin(i * 0.5 + this.count) * 16;
    }

    this.rope.setDirty();
}

Настройка игры (Config)

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

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

let game = new Phaser.Game(config);

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

Объект Rope в Phaser предоставляет простой, но эффективный способ создания гибких и анимированных поверхностей. Вы можете экспериментировать: измените множитель (16) в формуле синуса для увеличения амплитуды волны, поиграйте со сдвигом фазы (0.5), чтобы изменить частоту, или попробуйте анимировать координату `x` для создания вертикальных волн. Попробуйте привязать движение верёвки к курсору мыши или физическому телу, чтобы создать интерактивные элементы вроде упругой резинки или висящего моста.