Выравнивание и отступы

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

sprite.setOrigin(0.5, 0.5); // центр объекта по горизонтали и вертикали

Значения origin задаются в диапазоне от 0 до 1, где (0,0) — верхний левый угол, (1,1) — нижний правый угол, (0.5,0.5) — центр объекта. Использование origin особенно важно при анимациях и вращениях объектов, так как точка привязки определяет центр вращения.

Использование сеток и координатной системы

Для упрощения выравнивания объектов часто применяется сетка. Phaser предоставляет возможность расчета позиций через математические операции и циклы. Например, равномерное размещение нескольких спрайтов можно выполнить с помощью цикла и вычисления координат:

const spacing = 100;
for (let i = 0; i < 5; i++) {
    const sprite = this.add.sprite(i * spacing, 200, 'star');
    sprite.setOrigin(0.5, 0.5);
}

Здесь объекты будут равномерно распределены по горизонтали с центром каждого спрайта на линии y = 200.

Контейнеры и вложенные объекты

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

const container = this.add.container(400, 300);
const sprite1 = this.add.sprite(0, 0, 'star');
const sprite2 = this.add.sprite(50, 50, 'star');
container.add([sprite1, sprite2]);

В этом примере контейнер перемещается вместе с дочерними спрайтами, сохраняя их относительные позиции.

Выравнивание по центру и краям

Phaser не предоставляет встроенных методов типа alignCenter, поэтому выравнивание объектов выполняется через расчет координат с учетом размеров сцены и объектов. Для горизонтального центрирования используется формула:

const centerX = this.cameras.main.width / 2;
sprite.setX(centerX - sprite.displayWidth / 2);

Для вертикального центрирования:

const centerY = this.cameras.main.height / 2;
sprite.setY(centerY - sprite.displayHeight / 2);

Для выравнивания по краям сцены координаты рассчитываются аналогично, с использованием размеров объекта и границ камеры.

Отступы и интервалы между объектами

Создание аккуратных интерфейсов и сеток требует учета отступов между объектами. Отступы задаются путем добавления или вычитания фиксированного значения из координат объектов:

const padding = 20;
for (let i = 0; i < 3; i++) {
    const sprite = this.add.sprite(50 + i * (spriteWidth + padding), 100, 'icon');
}

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

Выравнивание текста

Текстовые объекты в Phaser имеют свойства align и origin. Свойство align влияет на выравнивание внутри текстового блока (например, left, center, right), а origin — на позицию всего блока на сцене.

const text = this.add.text(400, 300, 'Phaser', { fontSize: '32px', color: '#ffffff', align: 'center' });
text.setOrigin(0.5, 0.5);

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

Автоматическое распределение объектов

Для динамического выравнивания и распределения объектов удобно использовать вычисления на основе размеров сцены и объектов. Например, для равномерного распределения кнопок по горизонтали:

const buttons = ['Play', 'Settings', 'Exit'];
const spacing = this.cameras.main.width / (buttons.length + 1);
buttons.forEach((label, index) => {
    const btn = this.add.text((index + 1) * spacing, 500, label, { fontSize: '24px', color: '#ffffff' });
    btn.setOrigin(0.5, 0.5);
});

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

Масштабирование и адаптивное позиционирование

При масштабировании сцены или объектов важно учитывать displayWidth и displayHeight, а не оригинальные размеры текстур. Это позволяет сохранять правильное выравнивание при изменении размера окна игры или адаптации под разные устройства.

sprite.setDisplaySize(100, 100);
sprite.setX(this.cameras.main.width / 2);
sprite.setY(this.cameras.main.height / 2);

Использование этих методов совместно с origin гарантирует, что объекты останутся визуально центрированными независимо от изменений масштаба.

Итоговые принципы выравнивания

  • x и y определяют позицию объекта относительно родителя или сцены.
  • origin влияет на точку привязки и центр вращения.
  • Контейнеры упрощают управление группой объектов и их относительными координатами.
  • Расчет координат с учетом размеров сцены и объектов обеспечивает точное центрирование и выравнивание по краям.
  • Отступы и интервалы создаются через добавление фиксированных значений к координатам.
  • Текстовые объекты используют align и origin для контроля позиции и выравнивания текста.
  • Динамическое распределение элементов позволяет создавать адаптивные интерфейсы.

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

Оглавление