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

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

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

Версия 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.LeftCenter(block, pic);
    }
}

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

const game = new Phaser.Game(config);

Зачем нужен Display.Align?

Класс Phaser.Display.Align содержит статические методы для точного позиционирования игровых объектов. Вместо того чтобы вручную задавать координаты X и Y, вы указываете два объекта и тип выравнивания между ними. Это особенно полезно для центрирования картинок на экране, размещения кнопок в интерфейсе или создания сеток.

Основная работа ведётся через вложенный объект Phaser.Display.Align.In, который отвечает за выравнивание одного объекта *внутри* границ другого.

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

Часто нужно выровнять объект не относительно другого спрайта, а относительно области на экране. Для этого используется this.add.zone(). Зона — это невидимый прямоугольник с заданными координатами и размерами.

В нашем примере мы создаём зону, совпадающую по размеру с игровым полем (800x600), и центрируем её на экране (координаты 400, 300 — это середина области 800x600).

// Создаём невидимую прямоугольную зону размером 800x600 в центре сцены
const gameZone = this.add.zone(400, 300, 800, 600);

Центрирование картинки на экране

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

Здесь мы центрируем загруженное изображение pic внутри созданной ранее зоны gameZone. Визуально это поместит картинку ровно по центру игрового окна.

// Центрируем картинку 'pic' внутри зоны gameZone
Phaser.Display.Align.In.Center(pic, gameZone);

Выравнивание спрайта относительно картинки

Следующий шаг — позиционирование одного спрайта относительно другого. Метод Phaser.Display.Align.In.LeftCenter выравнивает первый объект по левому краю второго, одновременно центрируя его по вертикали.

В примере спрайт block (маленький квадрат) привязывается к левому краю уже отцентрированной картинки pic. Его вертикальная позиция будет равна центру картинки по оси Y.

// Выравниваем спрайт 'block' по левому краю картинки 'pic' с центрированием по вертикали
Phaser.Display.Align.In.LeftCenter(block, pic);

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

Phaser.Display.Align.In предлагает множество вариантов, покрывающих практически все потребности в вёрстке: - TopLeft, TopCenter, TopRight — выравнивание по верхнему краю. - LeftCenter, Center, RightCenter — выравнивание по центру с смещением по горизонтали. - BottomLeft, BottomCenter, BottomRight — выравнивание по нижнему краю.

Каждый метод работает по одному принципу: первый аргумент — целевой объект, второй — объект-контейнер или репер.

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

Использование Phaser.Display.Align делает код позиционирования чистым, выразительным и независимым от конкретных числовых значений. Для экспериментов попробуйте: 1. Создать сетку из спрайтов, выравнивая их последовательно с разными методами. 2. Динамически менять размер зоны и наблюдать, как объекты автоматически перестраиваются. 3. Комбинировать выравнивание с анимацией для плавного перемещения UI-элементов.