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

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

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

const game = new Phaser.Game(config);

Суть примера: Выравнивание без вычислений

В данном примере мы загружаем два изображения: фоновую картинку pic и спрайт block. Цель — расположить фоновое изображение точно по центру игрового поля, а затем прикрепить спрайт к его нижнему правому углу. Вся магия происходит в методе create() с помощью статических методов Phaser.Display.Align.In.

Ключевая идея — мы не вычисляем координаты (x, y) для каждого объекта вручную. Вместо этого мы говорим движку: "выровняй этот объект относительно этой зоны по заданному правилу". Это декларативный и безошибочный подход.

Создание опорных точек: Зоны (Zones)

Для выравнивания объекта нам нужна точка или область отсчета. Phaser предоставляет невидимый игровой объект Zone. В примере он используется как целевая область для выравнивания фоновой картинки.

this.add.zone(400, 300, 800, 600)

Эта строка создает зону шириной 800 пикселей и высотой 600 пикселей с центром в точке (400, 300). Поскольку размеры игры (config.width, config.height) также 800x600, эта зона идеально совпадает с видимой областью игрового мира (Viewport). Зоны — это легковесные контейнеры, идеально подходящие для логического размечения других объектов.

Базовое выравнивание: Центрирование

Первый вызов Phaser.Display.Align.In.Center размещает нашу картинку pic.

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

Метод принимает два аргумента: child (объект для выравнивания) и parent (область или объект, относительно которого происходит выравнивание). После этого вызова центр изображения pic будет совпадать с центром переданной зоны. Важно: метод **модифицирует свойства `xиy** объектаpic. Мы создали объект в точке (0,0), ноAlign` мгновенно переместил его.

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

Второй вызов демонстрирует еще более полезную технику — выравнивание одного игрового объекта относительно другого.

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

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

Полный арсенал: Другие методы Align.In

Phaser.Display.Align.In — это целый набор методов для любого случая. Вот основные из них:

// Выравнивание по сторонам
Phaser.Display.Align.In.TopLeft(child, parent);
Phaser.Display.Align.In.TopCenter(child, parent);
Phaser.Display.Align.In.TopRight(child, parent);
Phaser.Display.Align.In.LeftCenter(child, parent);
Phaser.Display.Align.In.RightCenter(child, parent);
Phaser.Display.Align.In.BottomLeft(child, parent);
Phaser.Display.Align.In.BottomCenter(child, parent);

// Абсолютное центрирование (как в примере)
Phaser.Display.Align.In.Center(child, parent);

Каждый метод работает по одному принципу: центрирует child относительно указанного края или центра parent. Запомните, что parent может быть любым объектом, имеющим свойства `x,y,displayWidthиdisplayHeight(например,Image,Sprite,Container,Zone`).

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

Использование Phaser.Display.Align.In превращает рутинную задачу позиционирования в простое и надежное действие. Это основа для создания адаптивных интерфейсов и сложных сцен. Для экспериментов попробуйте

  1. Выровнять несколько объектов относительно одной зоны для создания сетки
  2. Использовать Container как parent, чтобы все его дочерние элементы можно было двигать группой, сохраняя выравнивание
  3. Комбинировать Align.In с анимацией для плавного перемещения объектов к новым точкам привязки