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

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

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

    update ()
    {

    }
}

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

const game = new Phaser.Game(config);

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

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

Основные методы этого класса, которые мы используем в примере: - Phaser.Display.Align.In.Center() — центрирует объект внутри указанной зоны. - Phaser.Display.Align.In.TopLeft() — помещает объект в левый верхний угол целевого объекта.

Аналогично существуют методы для других позиций: TopRight, BottomLeft, BottomRight и так далее.

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

В методе 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');
}

Здесь 'pic' — это большое фоновое изображение, а 'block' — маленький спрайт, который мы будем выравнивать относительно картинки.

Создание объектов и их начальное положение

В методе create() мы сначала создаём оба изображения, помещая их в точку с координатами (0, 0) — левый верхний угол игрового мира. На этом этапе они наложатся друг на друга.

const pic = this.add.image(0, 0, 'pic');
const block = this.add.image(0, 0, 'block');

Важно понимать, что точка (0, 0) для изображения — это его *центр* (точка опоры или origin). По умолчанию у всех изображений в Phaser центр установлен в середине спрайта. Это критично для корректной работы методов выравнивания, так как они оперируют именно центральными точками объектов.

Центрирование картинки на игровом поле

Чтобы разместить нашу большую картинку ровно по центру игрового окна, нам нужна зона (область), внутри которой будет происходить выравнивание. Для этого создаётся невидимый прямоугольник — Zone. Мы центрируем pic внутри этой зоны.

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

Разберём аргументы: 1. pic — целевой объект, который мы хотим выровнять. 2. this.add.zone(400, 300, 800, 600) — создаёт зону. Параметры: X=400, Y=300 (центр нашего игрового окна 800x600), ширина=800, высота=600. Метод Center автоматически вычисляет разницу между центрами объекта pic и зоны и сдвигает pic так, чтобы их центры совпали.

Выравнивание спрайта в углу картинки

Теперь мы хотим прикрепить маленький блок к левому верхнему углу уже отцентрированной картинки. Для этого используем метод TopLeft.

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

Здесь: 1. block — объект, который мы выравниваем (маленький спрайт). 2. pic — объект, относительно которого происходит выравнивание (большая картинка). Метод TopLeft рассчитает положение так, чтобы *центр* спрайта block оказался в левом верхнем углу прямоугольника, описывающего картинку pic. Именно поэтому блок будет выглядеть частично "обрезанным" сверху и слева — его центр совмещён с углом картинки.

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

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