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

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

При разработке игр часто возникает задача разместить объекты вдоль линии или траектории: выстроить врагов, создать эффект следования или плавно распределить элементы интерфейса. Вручную рассчитывать позиции — долго и чревато ошибками. Phaser.Geom.Line предоставляет мощный метод GetEasedPoints, который автоматически генерирует массив точек с заданным интервалом, используя функции плавности (easing). Эта статья покажет, как за несколько строк кода превратить обычную линию в готовый маршрут для ваших игровых объектов.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ fillStyle: { color: 0xff0000 }});

        const line = new Phaser.Geom.Line(100, 100, 600, 500);

        graphics.lineStyle(2, 0x00ff00);
        graphics.strokeLineShape(line);

        const points = Phaser.Geom.Line.GetEasedPoints(line, 'sine.inout', 32);

        for (let i = 0; i < points.length; i++)
        {
            const p = points[i];

            graphics.fillRect(p.x - 2, p.y - 2, 4, 4);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание линии и её визуализация

Вся работа происходит в методе create() сцены. Первым делом мы создаём объект Graphics для рисования на экране и определяем саму линию.

const graphics = this.add.graphics({ fillStyle: { color: 0xff0000 }});
const line = new Phaser.Geom.Line(100, 100, 600, 500);

Здесь line задаётся координатами начальной (100, 100) и конечной (600, 500) точек. Затем мы настраиваем стиль линии и рисуем её контур, чтобы визуально представить нашу геометрическую основу.

graphics.lineStyle(2, 0x00ff00);
graphics.strokeLineShape(line);

Магия метода GetEasedPoints

Ключевой этап — получение массива точек. Для этого используется статический метод Phaser.Geom.Line.GetEasedPoints().

const points = Phaser.Geom.Line.GetEasedPoints(line, 'sine.inout', 32);

Метод принимает три аргумента: 1. Объект линии (line). 2. Имя функции плавности ('sine.inout'). Phaser поддерживает множество стандартных функций (linear, quad, cubic и др.), которые влияют на распределение точек. 'Sine.inout' обеспечивает плавное ускорение и замедление в начале и конце линии. 3. Количество сегментов или точек (32). Фактически метод вернёт массив из 33 точек (количество точек = количество сегментов + 1), равномерно распределённых по линии с учётом выбранного easing.

Визуализация полученных точек

После получения массива points мы можем пройтись по нему циклом и отрисовать каждую точку. Это наглядно демонстрирует результат работы метода.

for (let i = 0; i < points.length; i++)
{
    const p = points[i];
    graphics.fillRect(p.x - 2, p.y - 2, 4, 4);
}

Каждая точка в массиве — это объект со свойствами `xиy`. Мы рисуем небольшой квадрат (4x4 пикселя), центрируя его на координатах точки (смещая на -2 по осям). В результате на зелёной линии появятся равномерно распределённые красные точки.

Практическое применение в играх

Полученный массив точек — это не просто визуализация. Это готовые координаты для размещения спрайтов.

// Создание группы врагов вдоль линии
points.forEach((point, index) => {
    let enemy = this.physics.add.sprite(point.x, point.y, 'enemyTexture');
    // ... настройка свойств врага
});

// Плавное перемещение объекта по точкам (как часть патрульного пути)
this.tweens.add({
    targets: playerSprite,
    x: { value: points.map(p => p.x), duration: 2000 },
    y: { values: points.map(p => p.y), duration: 2000 },
    ease: 'Linear'
});

Используйте разные функции easing (например, 'quad.out' или 'back.in') в вызове GetEasedPoints, чтобы точки группировались в начале или в конце линии, создавая уникальные паттерны движения или расстановки.

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

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