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

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

В игровой механике часто нужно знать, как далеко один объект находится от другого. Phaser предоставляет элегантное решение для этой задачи через `Phaser.Math.Distance.BetweenPoints`. Эта статья покажет, как использовать эту функцию для создания визуально динамического эффекта — окружения игрока кругом, радиус которого всегда равен расстоянию до цели. Такой подход полезен для реализации систем агро, ауры, зоны обнаружения врагов или визуальных индикаторов дистанции, что делает геймплей более интуитивным и отзывчивым.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    graphic;
    ufo;
    player;
    cursors;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('eyes', 'assets/sprites/slimeeyes.png');
        this.load.image('ufo', 'assets/sprites/ufo.png');
    }

    create ()
    {
        this.cursors = this.input.keyboard.createCursorKeys();

        this.player = this.add.image(400, 300, 'eyes');

        this.ufo = this.add.image(200, 150, 'ufo');

        this.graphic = this.add.graphics({ lineStyle: { color: 0x00ffff } });
    }

    update ()
    {
        if (this.cursors.left.isDown)
        {
            this.player.x -= 5;
        }
        else if (this.cursors.right.isDown)
        {
            this.player.x += 5;
        }

        if (this.cursors.up.isDown)
        {
            this.player.y -= 5;
        }
        else if (this.cursors.down.isDown)
        {
            this.player.y += 5;
        }

        const dist = Phaser.Math.Distance.BetweenPoints(this.player, this.ufo);

        this.graphic
            .clear()
            .strokeCircle(this.player.x, this.player.y, dist);
    }
}

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

const game = new Phaser.Game(config);

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

Вся логика примера размещена в классе, расширяющем Phaser.Scene. На этапе preload мы загружаем два спрайта с удалённого URL, установленного через this.load.setBaseURL.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('eyes', 'assets/sprites/slimeeyes.png');
    this.load.image('ufo', 'assets/sprites/ufo.png');
}

Создание объектов и графики

В методе create инициализируются ключевые объекты сцены. Создаётся управление с клавиатуры, размещаются два спрайта — игрок (player) и цель (ufo). Также создаётся объект Graphics, который будет использоваться для отрисовки линий заданного стиля.

create ()
{
    this.cursors = this.input.keyboard.createCursorKeys();
    this.player = this.add.image(400, 300, 'eyes');
    this.ufo = this.add.image(200, 150, 'ufo');
    this.graphic = this.add.graphics({ lineStyle: { color: 0x00ffff } });
}

Основной игровой цикл и управление

Метод update вызывается каждый кадр. В нём обрабатывается нажатие клавиш-стрелок для перемещения спрайта игрока. Изменяются напрямую свойства `xиy` спрайта.

if (this.cursors.left.isDown)
{
    this.player.x -= 5;
}
else if (this.cursors.right.isDown)
{
    this.player.x += 5;
}
if (this.cursors.up.isDown)
{
    this.player.y -= 5;
}
else if (this.cursors.down.isDown)
{
    this.player.y += 5;
}

Расчёт расстояния и отрисовка круга

Самая важная часть кода. Каждый кадр вычисляется расстояние между центрами двух спрайтов с помощью Phaser.Math.Distance.BetweenPoints. Эта функция принимает два объекта со свойствами `xиy` и возвращает евклидово расстояние между ними.

const dist = Phaser.Math.Distance.BetweenPoints(this.player, this.ufo);

Затем объект Graphics очищается от предыдущего кадра методом .clear() и рисуется новый контур окружности. Её центр находится на позиции игрока, а радиус (dist) равен вычисленному расстоянию до НЛО. Таким образом, круг всегда будет "достигать" цели.

this.graphic
    .clear()
    .strokeCircle(this.player.x, this.player.y, dist);

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

Функция Phaser.Math.Distance.BetweenPoints — это мощный и простой инструмент для работы с геометрией в 2D-пространстве игры. Как видно из примера, она идеально подходит для создания динамических визуальных эффектов, основанных на дистанции. Для экспериментов попробуйте: изменить цвет или стиль линии в зависимости от расстояния (например, с зелёного на красный при приближении), использовать это расстояние для логики игры (начало боя, когда враг в радиусе N пикселей) или нарисовать линию между объектами вместо круга, используя .strokeLineShape.