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

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

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

    update ()
    {

    }
}

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

const game = new Phaser.Game(config);

Что такое Phaser.Display.Align.In?

Phaser.Display.Align.In — это статический класс, содержащий набор методов для выравнивания одного игрового объекта (например, спрайта или изображения) **внутри** области другого объекта. Это идеально подходит для позиционирования элементов интерфейса, создания рамок или компоновки сложных графических сцен.

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

Основные методы этого класса, которые мы рассмотрим: .Center() и .TopRight().

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

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

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');
    // ... выравнивание будет здесь
}

Центрирование объекта в зоне

Первый шаг — поместить наше фоновое изображение pic в центр игрового поля. Для этого нам нужна целевая область (контейнер). Её можно создать с помощью this.add.zone(x, y, width, height). Зона — это невидимый прямоугольник, идеально подходящий для таких задач.

Метод Phaser.Display.Align.In.Center(child, parent) принимает два аргумента: выравниваемый объект (child) и объект-область (parent). Он автоматически изменяет координаты child, чтобы его центр совпал с центром parent.

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

Здесь мы создаём зону размером с наше игровое окно (800x600) с центром в точке (400, 300) и выравниваем в ней изображение pic.

Выравнивание одного спрайта относительно другого

Теперь разместим спрайт block относительно уже отцентрированного изображения pic. Мы хотим, чтобы блок находился в его правом верхнем углу.

Для этого используется метод Phaser.Display.Align.In.TopRight(child, parent). Логика та же: child (блок) будет выровнен внутри области, определяемой parent (изображением pic), по правому верхнему углу.

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

После выполнения этого кода спрайт block мгновенно "прилипнет" к нужному углу изображения pic. Важно, что в качестве parent можно использовать любой объект, у которого есть свойства width, height, `xиy`, а не только зону.

Полный список методов и их применение

Класс Phaser.Display.Align.In предлагает полный набор методов для всех возможных позиций внутри родительской области. Используйте их по ситуации:

* TopLeft, TopCenter, TopRight * LeftCenter, Center, RightCenter * BottomLeft, BottomCenter, BottomRight

Все методы работают по одному принципу: Phaser.Display.Align.In.MethodName(child, parent, offsetX, offsetY). Необязательные аргументы offsetX и offsetY позволяют добавить смещение от выбранной позиции, что полезно для создания отступов (паддингов).

// Разместить блок в центре картинки со смещением 10px вниз
Phaser.Display.Align.In.Center(block, pic, 0, 10);

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

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