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

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

В создании игр часто требуется перемещать объекты по сложным траекториям. Прямой расчёт координат может быть громоздким. В этом примере мы используем геометрические методы Phaser, чтобы заставить прямоугольник двигаться по спирали, просто вращая точку смещения. Это демонстрирует мощь встроенных классов `Phaser.Geom` и `Phaser.Math` для создания плавной анимации с минимальным кодом.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    rect;
    point;
    step = 0.5;
    graphics;

    create ()
    {
        this.graphics = this.add.graphics({ fillStyle: { color: 0x0000aa } });

        this.rect = new Phaser.Geom.Rectangle(395, 295, 10, 10);

        this.point = new Phaser.Math.Vector2(7, 7);
    }

    update ()
    {
        if (this.rect.y < 600)
        {
            this.graphics.fillRectShape(this.rect);

            Phaser.Geom.Rectangle.OffsetPoint(this.rect, this.point);

            Phaser.Math.Rotate(this.point, this.step);

            this.step *= 0.995;
        }
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и объектов

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

this.graphics = this.add.graphics({ fillStyle: { color: 0x0000aa } });
this.rect = new Phaser.Geom.Rectangle(395, 295, 10, 10);
this.point = new Phaser.Math.Vector2(7, 7);

Графический объект (graphics) настроен на заливку синим цветом. Прямоугольник (rect) создаётся в центре экрана с небольшим размером 10x10 пикселей. Точка (point) задаёт начальное смещение по осям X и Y. Переменная step будет использоваться для угла вращения.

Цикл анимации в update()

Основная логика движения заключена в методе update(), который вызывается на каждом кадре. Пока прямоугольник не достиг нижней границы экрана (y < 600), выполняются четыре ключевых действия.

this.graphics.fillRectShape(this.rect);

Сначала текущая позиция прямоугольника отрисовывается на холсте.

Phaser.Geom.Rectangle.OffsetPoint(this.rect, this.point);

Затем статический метод OffsetPoint смещает прямоугольник на вектор, заданный точкой point. Это изменяет свойства rect.x и rect.y.

Вращение вектора смещения

Чтобы движение не было линейным, мы вращаем вектор point вокруг начала координат (0, 0). Это меняет его направление, что при следующем вызове OffsetPoint даёт новую траекторию.

Phaser.Math.Rotate(this.point, this.step);

Метод Rotate поворачивает вектор point на угол, указанный в радианах в переменной step. Изначально step = 0.5 радиан.

this.step *= 0.995;

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

Ключевые концепции Phaser API

Пример эффективно использует несколько важных классов:

* Phaser.Geom.Rectangle: Представляет прямоугольник с свойствами x, y, width, height. Статический метод OffsetPoint — основное средство для его перемещения. * Phaser.Math.Vector2: Вектор в 2D-пространстве. Здесь он используется как контейнер для значений смещения (dx, dy). * Phaser.Math.Rotate: Утилитарная функция для вращения вектора. Работает напрямую с переданным объектом, модифицируя его. * this.add.graphics(): Фабричный метод для создания объекта, который рисует примитивы на экране.

Важно: все преобразования (OffsetPoint, Rotate) происходят "на месте", изменяя исходные объекты rect и point.

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

Этот пример — отличная отправная точка для экспериментов с движением. Попробуйте изменить начальный вектор point или логику изменения угла step. Например, привяжите step к синусу от времени для колебательного эффекта или заставьте прямоугольник менять цвет в зависимости от скорости. Используя Phaser.Geom.Rectangle.CenterOn, можно легко вернуть объект в центр после выхода за границы, создавая бесконечную анимацию.