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

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

Создание интерфейсов, меню или сложных композиций из спрайтов часто требует их точного размещения друг относительно друга или внутри заданной области. Ручной расчёт координат отнимает время и усложняет поддержку кода. Встроенный модуль `Phaser.Display.Align` предоставляет готовые методы для решения этой задачи. Эта статья покажет, как использовать `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.TopCenter(block, pic);
    }
}

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

const game = new Phaser.Game(config);

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

Всё начинается с базовой настройки сцены. В методе preload мы загружаем два изображения, которые будем использовать для демонстрации. Обратите внимание на использование setBaseURL — это удобный способ задать общий путь для всех загружаемых файлов.

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

В качестве цели мы создаём зону (Zone) размером 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.TopCenter.

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

Метод автоматически рассчитает координаты так, чтобы нижний центр спрайта block совпал с верхним центром картинки pic. В модуле Align.In есть и другие методы, например TopLeft, RightCenter или BottomRight, которые позволяют привязать объект к любому краю или углу другого объекта.

Полная конфигурация игры

Для полноты картины приведём конфигурационный объект игры. Важно, что в нём заданы размеры окна (800x600), которые соответствуют размерам зоны, созданной для центрирования. Это гарантирует, что фоновая картинка окажется ровно по центру экрана.

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

const game = new Phaser.Game(config);

Если изменить width и height в конфиге, но не обновить параметры зоны, то выравнивание фона станет некорректным. Зону следует создавать, опираясь на актуальные размеры игровой области.

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

Модуль Phaser.Display.Align — это мощный и простой инструмент для компоновки игровых объектов. Он избавляет от рутинных математических расчётов и делает код чище. Для экспериментов попробуйте изменить метод выравнивания для спрайта block на BottomRight или LeftCenter. Также можно создать несколько зон разного размера и выравнивать в них различные группы объектов для построения сложных макетов экрана.