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

При разработке игр часто требуется реализовать движение объектов по заданным траекториям: от патрулирования врагов до анимации пролета снарядов. Phaser предоставляет мощный инструмент — `Follower`, который позволяет объекту автоматически перемещаться по кривой линии, заданной через точки. Эта статья покажет, как создать сплайн-кривую и запустить по ней несколько объектов с разной начальной позицией, используя простой и эффективный API фреймворка.

Версия 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('ball', 'assets/sprites/shinyball.png');
    }

    create ()
    {
        const points = [ 50, 400, 200, 200, 350, 300, 500, 500, 700, 400 ];

        const curve = new Phaser.Curves.Spline(points);

        const graphics = this.add.graphics();

        graphics.lineStyle(1, 0xffffff, 1);

        curve.draw(graphics, 64);

        graphics.fillStyle(0x00ff00, 1);

        for (let i = 0; i < points.length; i++)
        {
            graphics.fillCircle(points[i].x, points[i].y, 4);
        }

        const ball1 = this.add.follower(curve, 50, 350, 'ball');
        const ball2 = this.add.follower(curve, 50, 400, 'ball');
        const ball3 = this.add.follower(curve, 50, 450, 'ball');

        //  Providing just a number sets the duration for following the path

        ball1.startFollow(4000);
        ball2.startFollow(4000);
        ball3.startFollow(4000);
    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов и подготовка кривой

В методе preload мы устанавливаем базовый URL для ресурсов и загружаем текстуру мяча.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('ball', 'assets/sprites/shinyball.png');

В create создается массив точек, которые определяют кривую. Каждая точка представлена координатами x и y. Эти точки передаются в конструктор Phaser.Curves.Spline, который создает сплайн-кривую — гладкую линию, проходящую через заданные точки.

const points = [ 50, 400, 200, 200, 350, 300, 500, 500, 700, 400 ];
const curve = new Phaser.Curves.Spline(points);

Визуализация кривой и точек

Для отображения кривой на экране создается графический объект graphics. Устанавливается стиль линии: толщина 1, цвет белый (0xffffff), альфа 1. Метод curve.draw рисует кривую на графическом объекте с 64 точками интерполяции, обеспечивая гладкий вид.

const graphics = this.add.graphics();
graphics.lineStyle(1, 0xffffff, 1);
curve.draw(graphics, 64);

Затем точки, через которые проходит кривая, отображаются зелеными кружками.

graphics.fillStyle(0x00ff00, 1);
for (let i = 0; i < points.length; i++)
{
    graphics.fillCircle(points[i].x, points[i].y, 4);
}

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

Объекты Follower создаются с помощью метода this.add.follower. Первый аргумент — кривая, по которой будет двигаться объект. Второй и третий аргументы — начальные координаты x и y объекта на кривой (в данном случае они соответствуют первой точке кривой). Четвертый аргумент — ключ текстуры.

const ball1 = this.add.follower(curcurve, 50, 350, 'ball');
const ball2 = this.add.follower(curve, 50, 400, 'ball');
const ball3 = this.add.follower(curve, 50, 450, 'ball');

Разные начальные координаты по оси y создают эффект разного начального положения объектов относительно кривой, хотя они начинают движение из одной точки x.

Запуск движения по кривой

Метод startFollow запускает движение объекта по кривой. Если передать только число (в миллисекундах), оно определяет продолжительность движения от начала до конца кривой. Все три мяча начинают движение одновременно и завершают его через 4000 миллисекунд (4 секунды).

ball1.startFollow(4000);
ball2.startFollow(4000);
ball3.startFollow(4000);

Это простейший способ задания движения, где скорость автоматически рассчитывается исходя из длины кривой и заданного времени.

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

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

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

Затем создается экземпляр игры с этой конфигурацией.

const game = new Phaser.Game(config);

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

Система Follower в Phaser позволяет легко создавать сложные траектории движения объектов без написания собственной логики перемещения. Для экспериментов попробуйте изменить массив точек кривой, чтобы создать новые траектории, или используйте другие методы кривых, например Phaser.Curves.Path. Также можно настроить параметры движения, передавая в startFollow объект конфигурации с параметрами вроде delay, repeat или yoyo, чтобы создать циклическое или возвратное движение.