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

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

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

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

Живой запуск

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

Исходный код

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

        const triangle = Phaser.Geom.Triangle.BuildEquilateral(400, 300, 150);

        this.input.on('pointermove', pointer =>
        {

            Phaser.Geom.Triangle.Rotate(triangle, 0.05);

            Phaser.Geom.Triangle.CenterOn(triangle, pointer.x, pointer.y);

            redraw();
        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            graphics.fillTriangleShape(triangle);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и базовой геометрии

В методе create() сцены мы создаем два ключевых объекта: графический контекст для отрисовки и сам треугольник.

Графический контекст (graphics) — это наше "полотно". Мы задаем ему стиль заливки желтым цветом (0xaaaa00). Все, что будет нарисовано с помощью этого объекта, получит этот цвет.

Треугольник создается с помощью статического метода Phaser.Geom.Triangle.BuildEquilateral. Этот метод — удобный конструктор для равностороннего треугольника.

const graphics = this.add.graphics({ fillStyle: { color: 0xaaaa00 } });
const triangle = Phaser.Geom.Triangle.BuildEquilateral(400, 300, 150);

Параметры метода: 400 (центр по X), 300 (центр по Y) — это начальные координаты центра треугольника. Число 150 — длина стороны. Изначально треугольник появляется в центре игрового окна.

Обработка движения мыши и трансформации фигуры

Далее мы настраиваем обработчик события перемещения указателя (pointermove). При каждом движении мыши выполняются две операции над объектом triangle.

1. **Вращение:** Метод Phaser.Geom.Triangle.Rotate поворачивает треугольник вокруг его собственного центра. Второй аргумент 0.05 — это угол поворота в радианах. Таким образом, треугольник будет плавно вращаться. 2. **Центрирование:** Метод Phaser.Geom.Triangle.CenterOn — главный герой примера. Он перемещает весь треугольник так, чтобы его геометрический центр совпал с заданными координатами — в нашем случае, с положением курсора (pointer.x, pointer.y).

После этих преобразований вызывается функция redraw() для обновления изображения на экране.

this.input.on('pointermove', pointer => {
    Phaser.Geom.Triangle.Rotate(triangle, 0.05);
    Phaser.Geom.Triangle.CenterOn(triangle, pointer.x, pointer.y);
    redraw();
});

Функция перерисовки

Функция redraw() отвечает за визуализацию. Внутри нее мы сначала очищаем графический буфер с помощью graphics.clear(). Это важно, иначе каждый кадр будет рисовать новый треугольник поверх старых, создавая "шлейф".

Затем командой graphics.fillTriangleShape(triangle) мы передаем наш обновленный геометрический объект в графический контекст для отрисовки залитой фигуры.

function redraw ()
{
    graphics.clear();
    graphics.fillTriangleShape(triangle);
}

Функция вызывается один раз в create() для начальной отрисовки, а затем при каждом движении мыши.

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

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

* **Изменение формы:** Вместо BuildEquilateral используйте Phaser.Geom.Triangle.BuildRight для прямоугольного треугольника или создавайте произвольный треугольник через new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3). * **Динамический размер:** Меняйте размер треугольника в рантайме, используя Phaser.Geom.Triangle.Scale. * **Сложная графика:** Используйте graphics.lineStyle и strokeTriangleShape для контура вместо заливки или комбинируйте оба метода.

// Пример: треугольник с контуром
function redraw() {
    graphics.clear();
    graphics.lineStyle(3, 0xff0000);
    graphics.fillTriangleShape(triangle);
    graphics.strokeTriangleShape(triangle);
}

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

Метод Phaser.Geom.Triangle.CenterOn — это простой и эффективный способ позиционирования сложной фигуры по одной точке — её центру. Комбинируя его с другими методами геометрии, такими как Rotate или Scale, можно легко анимировать интерфейсы и игровые объекты. Для экспериментов попробуйте привязать центр не к курсору, а к движущемуся спрайту, измените скорость вращения в зависимости от расстояния до центра экрана или создайте несколько треугольников, которые следуют за курсором с небольшой задержкой, создавая "змею".