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.setPath('assets/sprites');

        this.load.image('image1', 'advanced_wars_tank.png');
        this.load.image('image2', 'amiga-cursor.png');
        this.load.image('image3', 'apple.png');
        this.load.image('image4', 'asuna_by_vali233.png');
        this.load.image('image5', 'beball1.png');
        this.load.image('image6', 'flectrum.png');
        this.load.image('image7', 'brain.png');
        this.load.image('image8', 'budbrain_chick.png');
        this.load.image('image9', 'carrot.png');
        this.load.image('image10', 'clown.png');
        this.load.image('image11', 'blue_ball.png');
        this.load.image('image12', 'flower-exo.png');
        this.load.image('image13', 'mushroom-32x32.png');
        this.load.image('image14', 'orange-cat1.png');
        this.load.image('image15', 'phaser-dude.png');
    }

    create ()
    {
        this.add.rectangle(0, 500, 800, 100, 0x9d2d9d).setOrigin(0, 0);

        const sprites = [];

        for (let i = 1; i < 15; i++)
        {
            sprites.push(this.add.sprite(150, 493, `image${i}`));
        }

        //  Align all of the sprites against the first one, using RIGHT_BOTTOM
        Phaser.Actions.AlignTo(sprites, Phaser.Display.Align.RIGHT_BOTTOM);
    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов и создание платформы

В методе preload с помощью this.load.setBaseURL и this.load.setPath задается базовый путь для загрузки изображений. Загружается 14 спрайтов с именами от image1 до image14.

В create первым делом рисуется прямоугольник-платформа. Это визуальный ориентир, к которому позже будут выровнены спрайты. Важно, что прямоугольник создается с началом координат в его левом верхнем углу (setOrigin(0, 0)), поэтому его координаты (0, 500) точно указывают его положение на сцене.

this.add.rectangle(0, 500, 800, 100, 0x9d2d9d).setOrigin(0, 0);

Создание массива спрайтов

Перед выравниванием необходимо создать и собрать объекты в массив. В цикле создаются 14 спрайтов с помощью this.add.sprite. Каждому задается одинаковая начальная позиция (150, 493), которая находится чуть выше платформы. Все созданные спрайты помещаются в массив sprites.

const sprites = [];
for (let i = 1; i < 15; i++)
{
    sprites.push(this.add.sprite(150, 493, `image${i}`));
}

Изначально все спрайты накладываются друг на друга в одной точке. Массив sprites — это коллекция, с которой будет работать Phaser.Actions.AlignTo.

Магия выравнивания: Phaser.Actions.AlignTo

Ключевая строка примера — вызов статического метода Phaser.Actions.AlignTo. Этот метод принимает три основных аргумента: массив игровых объектов, константу выравнивания и опционально — объект, относительно которого выполняется выравнивание.

Phaser.Actions.AlignTo(sprites, Phaser.Display.Align.RIGHT_BOTTOM);

В нашем случае: 1. sprites — массив из 14 спрайтов, которые нужно выровнять. 2. Phaser.Display.Align.RIGHT_BOTTOM — константа, определяющая правило выравнивания. Она указывает, что спрайты должны быть выровнены по правому нижнему углу. 3. Третий аргумент (относительный объект) не указан. По умолчанию выравнивание происходит относительно **первого элемента переданного массива**. Таким образом, все спрайты из массива sprites (со второго по последний) выстроятся в линию, прижав свои правые нижние углы к правому нижнему углу первого спрайта (image1). Визуально первый спрайт останется на месте, а остальные "прилипнут" к нему с правой стороны, образуя горизонтальную цепочку.

Настройка сцены и конфигурация игры

Работа метода AlignTo напрямую зависит от точности системы координат Phaser. В конфигурационном объекте config для этого примера установлен флаг pixelArt: true. Этот параметр отключает сглаживание пиксельной графики, что обеспечивает четкое, пошаговое позиционирование спрайтов без размытия. Это критически важно для пиксель-арт стиля игры.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    pixelArt: true, // Важно для четкого позиционирования
    scene: Example
};

Сцена Example передается в конфиг, а экземпляр игры создается с этими настройками.

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

Метод Phaser.Actions.AlignTo — это мощный и лаконичный способ управления layout'ом игровых объектов. Он избавляет от ручных расчетов позиций в циклах. Для экспериментов попробуйте заменить константу выравнивания на Phaser.Display.Align.LEFT_CENTER или Phaser.Display.Align.BOTTOM_CENTER. Также передайте третьим аргументом объект this.add.zone(400, 250, 50, 50), чтобы выровнять спрайты относительно произвольной зоны на сцене, а не первого элемента массива.