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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

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

    create ()
    {
        const rect = new Phaser.Geom.Rectangle(100, 100, 256, 256);

        const group = this.add.group({ key: 'ball', frameQuantity: 32 });

        Phaser.Actions.PlaceOnRectangle(group.getChildren(), rect);
    }
}

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

const game = new Phaser.Game(config);

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

Как и в любом проекте на Phaser, мы начинаем с создания класса сцены. В методе preload загружается необходимый спрайт.

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

Здесь setBaseURL задает базовый путь для загрузки, что удобно, если все ресурсы хранятся в одном месте. Метод load.image регистрирует текстуру под ключом 'ball' для последующего создания спрайтов.

Создание геометрической области и группы спрайтов

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

const rect = new Phaser.Geom.Rectangle(100, 100, 256, 256);

Конструктор Phaser.Geom.Rectangle принимает координаты верхнего левого угла (x, y), ширину и высоту. Наш прямоугольник будет расположен в точке (100, 100) и иметь размер 256x256 пикселя.

Далее создается группа (Group) спрайтов. Группы в Phaser — это удобный способ управлять множеством однотипных объектов.

const group = this.add.group({ key: 'ball', frameQuantity: 32 });

При создании группы мы передаем конфигурационный объект. Параметр key указывает на ключ загруженного ранее изображения ('ball'). Параметр frameQuantity задает количество создаваемых спрайтов — в нашем случае 32. Все спрайты создаются сразу, но их позиции по умолчанию равны (0, 0).

Магия метода PlaceOnRectangle

Теперь самое интересное — распределение всех спрайтов группы по контуру прямоугольника. Для этого используется статический метод Phaser.Actions.PlaceOnRectangle.

Phaser.Actions.PlaceOnRectangle(group.getChildren(), rect);

Этот метод принимает два аргумента: 1. Массив объектов для размещения. Мы получаем его, вызвав group.getChildren(). 2. Объект прямоугольника (rect), созданный нами ранее.

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

Настройка и запуск игры

Финальный шаг — конфигурация и инстанцирование самого игрового объекта Phaser.Game.

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

const game = new Phaser.Game(config);

В объекте конфигурации задаются основные параметры: type рендерера, размеры холста (width, height), цвет фона (backgroundColor), ID HTML-элемента для встраивания (parent) и класс основной сцены (scene). После создания экземпляра игры Phaser автоматически запускает жизненный цикл сцены (preload, create, update).

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

Метод Phaser.Actions.PlaceOnRectangle — это мощный и лаконичный инструмент для автоматического расположения объектов по контуру прямоугольника. Он идеально подходит для создания круговой обороны, границ уровня, спецэффектов или любых других сцен, требующих точного геометрического размещения. **Идеи для экспериментов:** * Попробуйте использовать другие геометрические фигуры из модуля Phaser.Geom, например, Circle или Triangle. Для них существуют аналогичные методы PlaceOnCircle и PlaceOnTriangle. * Скомбинируйте действие PlaceOnRectangle с другими действиями из Phaser.Actions, например, RandomEllipse для более органичного, "разбросанного" размещения. * Анимируйте получившийся круг шариков, применив к группе действие RotateAround для вращения вокруг центра сцены.