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

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

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

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

const game = new Phaser.Game(config);

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

Вся логика примера содержится в классе сцены, унаследованном от Phaser.Scene. В методе preload мы загружаем два изображения: фоновую картинку 'pic' и спрайт 'block'. Базовый URL задаётся для удобства, чтобы использовать ресурсы из репозитория примеров Phaser.

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 создаются игровые объекты — изображения. Изначально они помещаются в точку с координатами (0, 0), то есть в левый верхний угол игрового мира. Их фактическое позиционирование произойдёт дальше с помощью методов выравнивания.

create ()
{
    const pic = this.add.image(0, 0, 'pic');
    const block = this.add.image(0, 0, 'block');
    // ... выравнивание
}

Центрирование фонового изображения

Перед тем как выравнивать один объект относительно другого, нужно задать позицию базового объекта. В нашем случае это изображение 'pic'.

Для его размещения по центру игровой области используется метод Phaser.Display.Align.In.Center. Первым аргументом он принимает объект, который нужно выровнять ('pic'), а вторым — целевую зону. Зона создаётся динамически с помощью this.add.zone(400, 300, 800, 600). Эта зона имеет размеры 800x600 и центр в точке (400, 300), что соответствует центру игрового холста, заданного в конфигурации.

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

После этого вызова изображение 'pic' будет отцентрировано относительно указанной зоны, то есть по центру экрана.

Выравнивание спрайта по правому центру

Вот ключевой момент примера — позиционирование спрайта 'block' относительно уже отцентрированного изображения 'pic'. Для этого используется метод Phaser.Display.Align.In.RightCenter.

Этот метод делает две важные вещи: 1. **Горизонтальное позиционирование**: Размещает правый край объекта 'block' на одной вертикальной линии с правым краем объекта 'pic'. 2. **Вертикальное позиционирование**: Совмещает вертикальные центры (ось Y) обоих объектов.

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

В результате спрайт 'block' будет аккуратно прикреплён к правой стороне изображения 'pic', будучи выровненным по его центру по вертикали. Phaser сам рассчитывает необходимые координаты, основываясь на размерах и точках происхождения (origin) обоих объектов.

Конфигурация и запуск игры

Работа сцены инициируется стандартной конфигурацией игры. В ней задаётся тип рендерера (Phaser.AUTO), родительский HTML-элемент, размеры холста и класс основной сцены.

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

const game = new Phaser.Game(config);

После создания экземпляра Phaser.Game с этой конфигурацией автоматически запускается жизненный цикл сцены: preload, create, а затем update. В нашем примера логика полностью выполняется в методе create.

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

Использование Phaser.Display.Align — это профессиональный и эффективный способ управления расположением объектов. Вместо ручных вычислений вы получаете чистый, читаемый код, который автоматически адаптируется к изменению размеров объектов. Для экспериментов попробуйте: 1. Использовать другие методы из Phaser.Display.Align.In, например TopLeft, BottomCenter или LeftCenter. 2. Динамически менять размер или положение базового объекта ('pic') и наблюдать, как спрайт 'block' сохраняет своё относительное положение. 3. Выравнивать объект не относительно другого изображения, а относительно зоны (zone) или даже границ камеры.