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

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

Создание аккуратного игрового интерфейса или композиции из спрайтов — частая задача. Ручной расчёт координат для выравнивания может быть утомительным и подверженным ошибкам. В Phaser есть встроенная система выравнивания, которая позволяет центрировать, прижимать и распределять игровые объекты относительно друг друга или заданных зон всего в одну строку кода. Эта статья на практическом примере покажет, как использовать методы `Phaser.Display.Align.In` для точного позиционирования изображений. Вы научитесь центрировать фон на экране и привязывать элементы интерфейса к другим объектам, что особенно полезно для создания HUD, меню и сложных композиций.

Версия 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('pic', 'assets/pics/barbarian-loading.png');
        this.load.image('block', 'assets/sprites/block.png');
    }

    create ()
    {
        const pic = this.add.image(0, 0, 'pic');
        const block = this.add.image(0, 0, 'block');

        //  Center the picture in the game
        Phaser.Display.Align.In.Center(pic, this.add.zone(400, 300, 800, 600));

        //  Center the sprite to the picture
        Phaser.Display.Align.In.BottomCenter(block, pic);
    }
}

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

const game = new Phaser.Game(config);

Что делает пример?

В примере загружаются два изображения: фоновое (pic) и небольшой спрайт-блок (block). Изначально оба объекта создаются в точке (0, 0) — левом верхнем углу сцены.

Затем, используя методы из пространства имён Phaser.Display.Align.In, код выполняет два действия: 1. Картинка с варваром центруется в середине игровой области размером 800x600. 2. Спрайт-блок выравнивается по нижнему центру уже отпозиционированной картинки варвара.

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

Создание зоны для выравнивания

Первый вызов Phaser.Display.Align.In.Center требует двух аргументов: объекта для выравнивания (game object) и целевого объекта (target). В данном случае целью служит не другой спрайт, а специально созданная прямоугольная зона (zone).

Зона — это невидимый прямоугольник, который существует только в логике игры. Его удобно использовать как эталонную область для позиционирования, например, границы экрана или определённой части интерфейса.

// Создаёт невидимую зону размером 800x600 с центром в точке (400, 300)
this.add.zone(400, 300, 800, 600)

Метод this.add.zone(x, y, width, height) создаёт такую зону. В примере её центр (400, 300) совпадает с центром игрового холста (поскольку конфиг задаёт размер 800x600). Таким образом, мы центруем картинку ровно по центру экрана.

Выравнивание по центру целевой зоны

С помощью метода Phaser.Display.Align.In.Center мы помещаем наш объект pic в центр целевой зоны.

Phaser.Display.Align.In.Center(pic, this.add.zone(400, 300, 800, 600));

Этот метод автоматически изменяет свойства `xиyобъектаpic, устанавливая их в центр переданной зоны. Важно, что выравнивание происходит по умолчанию относительно точки происхождения (origin) самого объектаpic. По умолчанию уPhaser.GameObjects.Image` точка origin равна (0.5, 0.5), то есть центру изображения. Поэтому картинка встанет ровно по центру.

Относительное выравнивание объектов

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

Phaser.Display.Align.In.BottomCenter(block, pic);

Здесь метод Phaser.Display.Align.In.BottomCenter принимает первым аргументом выравниваемый объект (block), а вторым — целевой объект (pic). Метод вычисляет координаты нижнего центра изображения pic и устанавливает эти координаты объекту block.

Опять же, точка origin блока по умолчанию является его центром. Поэтому центр блока будет совмещён с вычисленной точкой нижнего центра картинки, и блок окажется аккуратно прикреплённым снизу.

Другие методы выравнивания

Phaser.Display.Align.In предоставляет целый набор методов для различных позиций. Паттерн имени метода прост: [ГоризонтальноеПоложение][ВертикальноеПоложение]. Например:

// Выравнивание по левому верхнему углу цели
Phaser.Display.Align.In.TopLeft(child, target);

// Выравнивание по правому нижнему углу цели
Phaser.Display.Align.In.BottomRight(child, target);

// Выравнивание по правому центру цели
Phaser.Display.Align.In.RightCenter(child, target);

Где child — объект, который нужно переместить, а target — цель (другой игровой объект или зона). Это мощный инструмент для построения интерфейсов, где кнопки, панели и иконки должны быть чётко привязаны друг к другу или к краям экрана.

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

Использование Phaser.Display.Align.In делает код позиционирования чистым, читаемым и менее подверженным ошибкам, избавляя от ручных вычислений координат. Это ключевой инструмент для создания структурированных сцен и UI. Для экспериментов попробуйте: 1. Выровнять блок не по BottomCenter, а по TopRight картинки. 2. Создать несколько блоков и выровнять их по разным сторонам одной цели. 3. Использовать зону с другими размерами и позицией, чтобы центрировать картинку только в части экрана (например, в верхней его половине).