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

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

Визуальный порядок на игровом поле — это не только про эстетику, но и про ясность геймплея. Разработчикам часто требуется располагать интерфейсные элементы, иконки или декорации относительно друг друга или областей экрана. Ручной расчет координат для каждого объекта утомителен и ведет к ошибкам. Встроенный модуль выравнивания Phaser позволяет делать это одной строкой кода, избавляя от лишней математики и делая ваш код чище и устойчивее к изменениям.

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

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

const game = new Phaser.Game(config);

Зачем нужен Phaser.Display.Align?

Представьте, что вам нужно разместить панель здоровья в левом нижнем углу экрана, а рядом с ней — иконку баффа. Если изменятся размеры спрайта здоровья, иконка баффа съедет. Система выравнивания Phaser решает эту проблему, устанавливая динамическую связь между объектами.

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

Разбор примера: Центрирование и привязка

В предоставленном примере создаются два изображения: фоновая картинка (pic) и спрайт блока (block). Оба изначально помещены в точку (0, 0).

Сначала фоновая картинка центрируется внутри зоны. Зона (Zone) — это невидимый прямоугольный объект, полезный для разметки областей. Здесь создается зона размером с игровое окно (800x600) и центром в (400, 300).

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

Затем блок выравнивается относительно картинки, в ее левом нижнем углу.

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

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

API-методы выравнивания In

Ключевой метод Phaser.Display.Align.In позволяет поместить один объект внутрь другого по определенному правилу. Для этого используются его статические свойства, соответствующие сторонам и центру.

Основные методы: * TopLeft, TopCenter, TopRight * LeftCenter, Center, RightCenter * BottomLeft, BottomCenter, BottomRight

Синтаксис для всех одинаков:

Phaser.Display.Align.In.BottomLeft(child, parent);

Где child — выравниваемый объект, а parent — объект или зона, относительно которой происходит выравнивание. Phaser автоматически меняет координаты child, учитывая его точку вращения (origin) и размеры parent.

Практическое применение в играх

Этот инструмент незаменим для создания HUD (интерфейса), меню и компоновки уровней.

**Пример 1: Панель способностей.** Расположите иконки способностей в ряд в нижней части экрана, центрируя всю группу относительно зоны.

// Создаем невидимую зону-контейнер для панели
const abilityZone = this.add.zone(400, 550, 600, 100);
// Выравниваем первую иконку по центру зоны
Phaser.Display.Align.In.Center(firstAbilityIcon, abilityZone);
// Остальные иконки выравниваем относительно первой
Phaser.Display.Align.To.RightCenter(secondAbilityIcon, firstAbilityIcon);

**Пример 2: Текст над головой персонажа.** Динамическое позиционирование текста урона или имени над двигающимся спрайтом.

// В update() или после движения персонажа
Phaser.Display.Align.In.TopCenter(damageText, playerSprite);

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

Использование Phaser.Display.Align делает код управления расположением объектов декларативным, читаемым и легко изменяемым. Вместо того чтобы обновлять числа в коде, вы описываете отношения между объектами. **Идеи для экспериментов:** 1. Создайте систему окон диалога, где кнопка "Закрыть" всегда прижата к правому верхнему углу окна, независимо от его размера. 2. Реализуйте таблицу рекордов, где каждая новая запись выравнивается под предыдущей с помощью Phaser.Display.Align.To.BottomCenter. 3. Скомбинируйте выравнивание с tween-анимацией, чтобы элементы интерфейса плавно "приезжали" на свои позиции из-за границ экрана.