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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const rect = new Phaser.Geom.Rectangle();

        const graphics = this.add.graphics({ lineStyle: { color: 0x0000ff } });

        for (let i = 0; i < 34; i++)
        {
            rect.setSize(i * 24, i * 18);

            graphics.strokeRectShape(rect);
        }
    }
}

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

const game = new Phaser.Game(config);

Основы: Класс Phaser.Geom.Rectangle

Класс Phaser.Geom.Rectangle является частью геометрического модуля Phaser и представляет собой прямоугольник, определяемый координатами верхнего левого угла (x, y), шириной и высотой. Он полезен для расчетов столкновений, отрисовки областей и хранения границ объектов.

По умолчанию, создавая прямоугольник без аргументов, мы получаем объект с нулевыми координатами и размерами.

const rect = new Phaser.Geom.Rectangle();

Динамическое изменение размера с помощью setSize

Метод setSize позволяет изменить ширину и высоту существующего прямоугольника, не создавая новый объект. Это эффективно по памяти и производительности. Метод принимает два аргумента: новую ширину (width) и новую высоту (height).

В примере из исходника этот метод вызывается в цикле, где размеры рассчитываются на основе переменной `i`, создавая эффект постепенного увеличения.

rect.setSize(i * 24, i * 18);

Здесь при каждой итерации ширина становится равна i * 24, а высота — i * 18. Это линейное увеличение, но формула может быть любой, подходящей под вашу задачу (например, квадратичной для ускоренного роста).

Визуализация изменений: Использование Graphics

Чтобы увидеть изменения прямоугольника, его нужно нарисовать. Для этого в Phaser используется объект Graphics, который позволяет рисовать примитивы. В коде создается объект graphics с синим цветом линии.

const graphics = this.add.graphics({ lineStyle: { color: 0x0000ff } });

После каждого изменения размера прямоугольника мы вызываем метод strokeRectShape, который рисует контур (обводку) переданного прямоугольника. Важно, что мы рисуем один и тот же объект rect, но с новыми размерами.

graphics.strokeRectShape(rect);

Поскольку отрисовка происходит в цикле 34 раза, на экране появляется серия вложенных прямоугольников, наглядно демонстрирующая работу setSize.

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

Динамическое изменение размеров прямоугольника — это не просто учебный пример. Вот несколько практических сценариев из игр:

* **Анимация индикатора здоровья или зарядки:** Прямоугольник, ширина которого зависит от текущего значения здоровья/заряда. * **Область эффекта навыка:** Визуализация радиуса действия заклинания, которая может увеличиваться по мере прокачки навыка. * **Выделение объектов (Hover/Select эффект):** Плавное увеличение рамки вокруг выбранного предмета в инвентаре. * **Генерация procedural контента:** Создание комнат случайного размера в rogue-like играх.

Ключевое преимущество — вы работаете с одним объектом, что упрощает логику и обновление его состояния.

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

Метод setSize класса Phaser.Geom.Rectangle — это простой, но мощный инструмент для динамического управления размерами прямоугольных областей в вашей игре. Он отлично сочетается с объектом Graphics для быстрой визуализации. **Идеи для экспериментов:** 1. Попробуйте изменить формулу расчета размеров внутри цикла, используя Math.sin(i) для создания пульсирующего эффекта. 2. Свяжите размер прямоугольника с положением курсора мыши, используя координаты из события pointermove. 3. Создайте несколько прямоугольников с разными начальными точками и изменяйте их размеры независимо в одном цикле. 4. Используйте полученные прямоугольники не только для отрисовки, но и для проверки столкновений с помощью Phaser.Geom.Rectangle.Contains.