О чем этот пример
Отображение текста — базовая задача в любой игре. Но часто простой надписи недостаточно: фон может сливаться с окружением, или текст кажется прижатым к краям элемента. Phaser предоставляет гибкую систему отступов (padding) для объектов Text, которая позволяет контролировать внутреннее пространство вокруг текста. В этой статье мы разберем, как использовать свойство `padding` в конфигурации текста. Вы научитесь задавать равномерные отступы, настраивать горизонтальные и вертикальные поля отдельно, а также устанавливать уникальные значения для каждой стороны. Это пригодится для создания читаемых подсказок, кнопок с текстом или выделения важных сообщений на игровом экране.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
create ()
{
const style = {
fontSize: '32px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#ff00ff'
};
// No padding
const config0 = {
x: 100,
y: 50,
text: 'Padding Test',
style: style
};
this.make.text(config0);
// 16px padding around the whole Text object
const config1 = {
x: 100,
y: 150,
padding: 16,
text: 'Padding Test',
style: style
};
this.make.text(config1);
// 32px padding on the left/right, 0 on the top/bottom
const config2 = {
x: 100,
y: 250,
padding: {
x: 32
},
text: 'Padding Test',
style: style
};
this.make.text(config2);
// 32px padding on the left/right, 16 on the top/bottom
const config3 = {
x: 100,
y: 350,
padding: {
x: 32,
y: 16
},
text: 'Padding Test',
style: style
};
this.make.text(config3);
// Variable padding around all edges
const config4 = {
x: 100,
y: 450,
padding: {
left: 64,
right: 16,
top: 20,
bottom: 40
},
text: 'Padding Test',
style: style
};
this.make.text(config4);
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Базовый текст без отступов
Для начала создадим простой текстовый объект. Это будет наша точка отсчета, чтобы видеть разницу при добавлении padding.
Мы определяем стиль текста, задавая шрифт, размер и цвета. Затем создаем конфигурационный объект для метода this.make.text(). Обратите внимание, что в config0 свойство padding отсутствует.
const style = {
fontSize: '32px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#ff00ff'
};
const config0 = {
x: 100,
y: 50,
text: 'Padding Test',
style: style
};
this.make.text(config0);В результате мы получим текст с розовым фоном (backgroundColor), который вплотную прилегает к буквам. Это может выглядеть тесно, особенно если фон нужен для визуального выделения.
Равномерный отступ для всех сторон
Самый простой способ добавить воздух вокруг текста — использовать числовое значение для padding. Это значение в пикселях будет применено ко всем четырем сторонам: верх, низ, лево, право.
В конфигурации config1 мы добавляем padding: 16. Фон объекта увеличится, создав равномерную белую рамку (цвет фона сцены) шириной 16 пикселей вокруг розового блока с текстом.
const config1 = {
x: 100,
y: 150,
padding: 16, // 16px со всех сторон
text: 'Padding Test',
style: style
};
this.make.text(config1);Этот подход идеален, когда нужно быстро добавить стандартное пространство вокруг текстового блока, например, для сообщений в диалоговом окне.
Разные отступы по горизонтали и вертикали
Часто требуется задать разные значения для горизонтальных и вертикальных отступов. Для этого padding должен быть объектом со свойствами `xиy`.
- `x` управляет отступами слева и справа. - `y` управляет отступами сверху и снизу.
В config2 задан только padding.x. Это создаст пространство слева и справа от текста, но не сверху и снизу.
const config2 = {
x: 100,
y: 250,
padding: {
x: 32 // Слева и справа по 32px
},
text: 'Padding Test',
style: style
};
this.make.text(config2);А в config3 используются оба свойства, что позволяет независимо контролировать две оси.
const config3 = {
x: 100,
y: 350,
padding: {
x: 32, // Слева и справа
y: 16 // Сверху и снизу
},
text: 'Padding Test',
style: style
};
this.make.text(config3);Такой способ полезен для создания широких кнопок или вытянутых по вертикали текстовых полей.
Полный контроль над каждой стороной
Для максимальной гибкости можно задать уникальный отступ для каждой из четырех сторон. В этом случае padding — это объект со свойствами left, right, top, bottom.
Это позволяет создавать асимметричные отступы, которые часто требуются для сложных интерфейсов или художественного оформления текста.
const config4 = {
x: 100,
y: 450,
padding: {
left: 64,
right: 16,
top: 20,
bottom: 40
},
text: 'Padding Test',
style: style
};
this.make.text(config4);В примере выше текст смещен влево внутри своего блока, так как левый отступ больше правого. Большой отступ снизу (bottom) можно использовать, например, для визуального отделения текста от следующего элемента интерфейса.
Важные детали и практическое применение
1. **Порядок свойств:** При использовании объекта padding с полными именами сторон (left, right и т.д.) можно указать не все свойства. Неуказанные стороны получат отступ, равный 0.
2. **Влияние на размер:** Отступы увеличивают общую ширину и высоту игрового объекта Text. Это влияет на его границы (bounding box) и может быть важно для расчетов столкновений или выравнивания.
3. **Сочетание со стилем:** padding работает совместно с backgroundColor. Если фон не задан, отступы будут невидимыми, но пространство все равно зарезервируется.
Практический совет: используйте отступы для создания текстовых кнопок.
function createButton(scene, x, y, label) {
const btnText = scene.make.text({
x: x,
y: y,
text: label,
style: {
fontSize: '24px',
color: '#000',
backgroundColor: '#ccc'
},
padding: { x: 20, y: 10 } // Делаем текст похожим на кнопку
});
btnText.setInteractive(); // Делаем кликабельным
return btnText;
}Такой объект будет выглядеть как аккуратная прямоугольная кнопка, готовая к добавлению обработчика клика.
Что попробовать дальше
Свойство padding в Phaser — это мощный и простой инструмент для улучшения читаемости и внешнего вида текста в вашей игре. Начиная с простого числа для равномерных отступов и заканчивая детальной настройкой каждой стороны, вы получаете полный контроль над композицией текстовых элементов.
**Идеи для экспериментов:**
1. Создайте анимированную кнопку, у которой padding.y плавно увеличивается при наведении курсора.
2. Используйте разные отступы для текста с тенью (shadow), чтобы тень не обрезалась краями фона.
3. Скомбинируйте padding с fixedWidth и fixedHeight, чтобы создать текстовые поля выровненного размера с текстом по центру.