О чем этот пример
Отображение текста в играх часто требует тонкой подстройки, особенно когда он размещён на цветном фоне. Нативный CSS-стиль `padding` для текста в Canvas не работает, но Phaser предоставляет мощный метод `setPadding()` у текстовых объектов. Эта статья покажет, как гибко управлять внутренними отступами текста, чтобы идеально вписать его в интерфейсы, кнопки или информационные панели, используя все варианты синтаксиса этого метода. Мы разберём пример из официальной документации, который демонстрирует пять различных способов задания отступов. Вы научитесь задавать равные отступы со всех сторон, разные значения для горизонтальных и вертикальных осей, а также независимо управлять каждым из четырёх сторон текстового блока. Это полезно для создания аккуратного и визуально сбалансированного UI.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
create ()
{
const style = {
fontSize: '32px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#ff00ff'
};
// 16px padding around all sides
this.add.text(100, 10, 'Phaser', style).setPadding(16);
// 64px horizontal padding and 16px vertical padding
this.add.text(100, 110, 'Phaser', style).setPadding(64, 16);
// The same again but specified in an object
this.add.text(100, 210, 'Phaser', style).setPadding({ x: 64, y: 16 });
// 16px vertical padding, 48px on the left and 128px on the right
this.add.text(100, 310, 'Phaser', style).setPadding({ y: 16, left: 48, right: 128 });
// 32px horizontal padding, 4px on the top and 16px on the bottom
this.add.text(100, 410, 'Phaser', style).setPadding({ x: 32, top: 4, bottom: 16 });
// Different values for each side
this.add.text(100, 510, 'Phaser', style).setPadding({ left: 8, right: 128, top: 0, bottom: 32 });
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Базовое создание текстового объекта
Прежде чем настраивать отступы, нужно создать сам текстовый объект. В примере для этого используется метод this.add.text(). Первые два аргумента — это координаты X и Y на холсте. Третий аргумент — строка с отображаемым текстом. Четвёртый аргумент — объект стиля, который определяет внешний вид текста.
Обратите внимание, что в стиле задан цвет фона (backgroundColor). Без внутренних отступов текст будет прижат вплотную к границам этого фона, что выглядит некрасиво. Метод setPadding() решает эту проблему.
const style = {
fontSize: '32px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#ff00ff'
};
this.add.text(100, 10, 'Phaser', style);Равные отступы со всех сторон
Самый простой способ — задать одно числовое значение. Оно будет применено как отступ сверху, справа, снизу и слева. Это аналогично CSS-свойству padding: 16px.
В примере первый текстовый объект получает отступ в 16 пикселей по всему периметру своего фона. Это быстро создаёт визуально комфортное расстояние между текстом и краем его цветного блока.
this.add.text(100, 10, 'Phaser', style).setPadding(16);Разные отступы по горизонтали и вертикали
Часто требуется сделать отступы по ширине больше, чем по высоте, или наоборот. Для этого методу setPadding() можно передать два аргумента. Первый аргумент отвечает за горизонтальные отступы (лево и право), второй — за вертикальные (верх и низ).
Во втором примере текстовый блок получает широкие боковые отступы (64px) и небольшие верхний/нижний (16px). Это можно использовать, например, для создания широких кнопок.
// 64px horizontal padding and 16px vertical padding
this.add.text(100, 110, 'Phaser', style).setPadding(64, 16);Гибкое управление через объект конфигурации
Наиболее мощный и гибкий способ — передача объекта конфигурации. Это позволяет задавать значения для отдельных сторон или использовать сокращённые свойства `xиy`.
1. **Сокращённая запись через `xиy:** Свойствоxустанавливает отступы слева и справа, свойствоy` — сверху и снизу. Результат идентичен вызову с двумя аргументами.
2. **Комбинирование сокращённых и полных свойств:** Можно смешивать свойства. Например, задать общий вертикальный отступ через `y, но при этом переопределить левый и правый отступ индивидуально черезleftиright`. Phaser корректно обрабатывает такие комбинации.
3. **Полный контроль над каждой стороной:** Передав объект с полями left, right, top, bottom, можно задать уникальное значение для каждой из четырёх сторон текстового блока.
// Сокращённая запись через объект
this.add.text(100, 210, 'Phaser', style).setPadding({ x: 64, y: 16 });
// Комбинирование: общий Y, но разные left/right
this.add.text(100, 310, 'Phaser', style).setPadding({ y: 16, left: 48, right: 128 });
// Комбинирование: общий X, но разные top/bottom
this.add.text(100, 410, 'Phaser', style).setPadding({ x: 32, top: 4, bottom: 16 });
// Полный контроль по всем сторонам
this.add.text(100, 510, 'Phaser', style).setPadding({ left: 8, right: 128, top: 0, bottom: 32 });Важные детали и порядок применения
Метод setPadding() применяется к уже созданному объекту текста и возвращает этот же объект, что позволяет использовать цепочку вызовов (chaining).
Порядок разрешения свойств в объекте конфигурации:
1. Если задано свойство left или right, они имеют приоритет над общим свойством `x`.
2. Если задано свойство top или bottom, они имеют приоритет над общим свойством `y`.
3. Если задано только `x, оно копируется вleftиright`.
4. Если задано только `y, оно копируется вtopиbottom`.
Это позволяет создавать сложные схемы отступов с минимальным дублированием кода. Все значения задаются в пикселях.
Что попробовать дальше
Метод setPadding() — это незаменимый инструмент для точного позиционирования текста внутри его фонового блока в Phaser. Используя разные формы записи — от простого числа до детализированного объекта — вы можете быстро создавать адаптивные и визуально приятные текстовые элементы для меню, HUD, диалоговых окон и кнопок.
**Идеи для экспериментов:**
1. Создайте кнопку меню, где отступы слева и справа динамически рассчитываются в зависимости от длины текстовой строки.
2. Реализуйте анимированное изменение отступов (например, top и bottom) при наведении на кнопку, чтобы создать эффект «нажатия».
3. Используйте нулевой отступ с одной стороны (top: 0), чтобы текст прижимался к верхнему краю панели, создавая нестандартный дизайн.