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

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

Работа с геометрическими объектами — основа для многих игровых механик: от коллизий до построения уровней. В этой статье разберем, как использовать класс `Phaser.Geom.Triangle` для создания интерактивного треугольника и динамического вычисления его периметра. Вы научитесь визуализировать геометрические фигуры и реагировать на действия игрока, что полезно для создания редакторов уровней, инструментов отладки или игр с процедурной геометрией.

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

Живой запуск

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

Исходный код

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

        const triangle = new Phaser.Geom.Triangle(100, 100, 150, 500, 400, 300);

        const text = this.add.text(50, 50, '');

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

            triangle.x3 = pointer.x;
            triangle.y3 = pointer.y;

            redraw();
        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            graphics.strokeTriangleShape(triangle);

            text.setText(`Perimeter : ${Phaser.Geom.Triangle.Perimeter(triangle)}`);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и базовых объектов

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

const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xaaaa00 } });
const triangle = new Phaser.Geom.Triangle(100, 100, 150, 500, 400, 300);
const text = this.add.text(50, 50, '');

- `this.add.graphics()` создает холст для векторной графики. В `lineStyle` задаем стиль линии: толщину 2 пикселя и желто-зеленый цвет (`0xaaaa00`).
- `new Phaser.Geom.Triangle()` создает треугольник с тремя вершинами: (100,100), (150,500), (400,300). Координаты передаются последовательно: x1, y1, x2, y2, x3, y3.
- `this.add.text()` добавляет текстовый блок в координатах (50,50). Изначально он пустой — мы заполним его позже.

Обработка движения указателя

Чтобы сделать пример интерактивным, мы подписываемся на событие перемещения указателя (мыши или касания). При движении меняется положение третьей вершины треугольника, после чего вызывается функция перерисовки.

this.input.on('pointermove', pointer => {
    triangle.x3 = pointer.x;
    triangle.y3 = pointer.y;
    redraw();
});

- this.input.on('pointermove', ...) регистрирует обработчик события движения указателя. - Внутри обработчика мы обновляем свойства x3 и y3 объекта triangle, присваивая им текущие координаты указателя (pointer.x, pointer.y). - Вызов redraw() обновляет отображение на основе новых данных.

Функция перерисовки и вычисление периметра

Функция redraw() отвечает за очистку холста, отрисовку треугольника и обновление текста с периметром.

function redraw ()
{
    graphics.clear();
    graphics.strokeTriangleShape(triangle);
    text.setText(`Perimeter : ${Phaser.Geom.Triangle.Perimeter(triangle)}`);
}

- graphics.clear() удаляет все предыдущие рисунки с графического объекта. - graphics.strokeTriangleShape(triangle) рисует контур треугольника с заданным в create() стилем линии. - Phaser.Geom.Triangle.Perimeter(triangle) — статический метод, который вычисляет периметр треугольника. Он возвращает число (сумму длин всех сторон), которое мы подставляем в текстовую строку. - text.setText() обновляет содержимое текстового блока. Шаблонная строка (обратные кавычки) позволяет легко встроить вычисленное значение.

Конфигурация и запуск игры

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

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

const game = new Phaser.Game(config);

- В объекте config задаются основные параметры: размеры холста (800x600), тип рендерера (Phaser.AUTO выбирает WebGL или Canvas автоматически), ID родительского HTML-элемента и класс сцены. - new Phaser.Game(config) создает и запускает игровой экземпляр с нашей сценой.

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

Теперь вы умеете создавать интерактивные геометрические объекты в Phaser и вычислять их свойства, такие как периметр. Этот подход можно расширить: например, реализовать перетаскивание всех вершин треугольника, добавить вычисление площади или углов, использовать треугольники для создания полигональных коллайдеров. Экспериментируйте с другими классами из модуля Phaser.Geom — Circle, Rectangle, Line — чтобы создавать сложные игровые пространства.