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

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

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

Версия 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('red', 'assets/sprites/gem.png');
        this.load.image('blue', 'assets/sprites/columns-blue.png');
    }

    create ()
    {
        const gems = [];

        //  This is our 'lead' Sprite, the first one in the array

        gems.push(this.add.sprite(200, 300, 'red'));

        for (let i = 0; i < 8; i++)
        {
            //  All of the blue gems will be aligned to the right of the red gem
            gems.push(this.add.sprite(0, 0, 'blue'));
        }

        Phaser.Actions.AlignTo(gems, Phaser.Display.Align.RIGHT_CENTER);
    }
}

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

const game = new Phaser.Game(config);

Зачем нужно автоматическое выравнивание?

Представьте, что вам нужно создать интерфейс с кнопками, выстроить отряд юнитов или расположить элементы инвентаря. Ручной расчет координат (X, Y) для каждого объекта неэффективен, особенно при изменении дизайна. Phaser.Actions.AlignTo решает эту проблему.

Метод принимает массив объектов и выравнивает их относительно первого элемента в этом массиве (или другого объекта) согласно заданному правилу. Все последующие объекты в массиве будут перемещены.

Анализ примера кода

Давайте разберем предоставленный исходный код по шагам.

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

this.load.image('red', 'assets/sprites/gem.png');
this.load.image('blue', 'assets/sprites/columns-blue.png');

В методе create создается массив gems. Первым в него помещается красный спрайт — это наш «лидер» (опорный объект).

gems.push(this.add.sprite(200, 300, 'red'));

Затем в цикле создаются 8 синих спрайтов. Обратите внимание: их начальные координаты — (0, 0), но это не имеет значения, так как их положение будет переопределено.

for (let i = 0; i < 8; i++)
{
    gems.push(this.add.sprite(0, 0, 'blue'));
}

Волшебство одного вызова: Phaser.Actions.AlignTo

Вся логика выравнивания заключена в одной строке. Метод AlignTo вызывается для массива gems.

Phaser.Actions.AlignTo(gems, Phaser.Display.Align.RIGHT_CENTER);

Первый аргумент — массив объектов для выравнивания. Второй аргумент — константа, определяющая правило выравнивания. Phaser.Display.Align.RIGHT_CENTER означает: «выровнять объекты по правому краю относительно лидера, центрируя их по вертикали».

**Как это работает:** 1. Первый элемент массива (красный спрайт) считается целью. 2. Все последующие элементы (8 синих спрайтов) будут выровнены относительно него. 3. Синие спрайты будут размещены так, чтобы их правые края находились на одной вертикальной линии с правым краем красного спрайта, а их центры по оси Y совпадали с центром красного спрайта по Y. Поскольку координата X для них не задается, они будут наложены друг на друга в одной и той же позиции.

Практическое применение и другие правила

Чтобы спрайты не накладывались, их нужно изначально размещать с некоторым смещением или использовать дополнительные параметры AlignTo для создания сетки. Основная сила метода — в вариативности правил.

Доступные константы для второго аргумента включают: - Phaser.Display.Align.LEFT_TOP, LEFT_CENTER, LEFT_BOTTOM - Phaser.Display.Align.RIGHT_TOP, RIGHT_CENTER, RIGHT_BOTTOM - Phaser.Display.Align.TOP_LEFT, TOP_CENTER, TOP_RIGHT - Phaser.Display.Align.BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT - Phaser.Display.Align.CENTER

Например, чтобы выстроить объекты вертикально под лидером:

// Объекты будут выстроены под красным спрайтом, центрированные по горизонтали
Phaser.Actions.AlignTo(gems, Phaser.Display.Align.BOTTOM_CENTER);

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

Phaser.Actions.AlignTo — это простой, но чрезвычайно полезный метод для организации игровых объектов. Он идеально подходит для построения интерфейсов, формирования рядов противников или расположения элементов уровня. **Идеи для экспериментов:** 1. Попробуйте выровнять объекты не относительно первого в массиве, а относительно произвольного спрайта на сцене (третий аргумент метода). 2. Создайте интерфейсное меню из кнопок, используя комбинацию AlignTo и цикла для задания смещения. 3. Поэкспериментируйте с разными константами выравнивания, чтобы понять логику позиционирования.