Параметры стиля: шрифт, размер, цвет, тень

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

Создание текстового объекта

Базовый синтаксис создания текста:

const text = this.add.text(x, y, "Пример текста", {
    fontFamily: "Arial",
    fontSize: "32px",
    color: "#ffffff"
});
  • x и y — координаты текста на сцене.
  • "Пример текста" — строка, которая будет отображаться.
  • Объект настроек позволяет задавать основные параметры стиля.

Шрифт и размер

Свойство fontFamily задает тип шрифта. Можно использовать стандартные системные шрифты или подключенные веб-шрифты через CSS.

Пример использования нескольких шрифтов с резервным вариантом:

fontFamily: "Verdana, Arial, sans-serif"

Свойство fontSize управляет размером текста. Размер задается в пикселях или относительных единицах:

fontSize: "24px"

Поддерживается использование CSS-подобных единиц, но чаще всего для игр применяются пиксели для точного позиционирования.

Цвет текста

Цвет задается через свойство color в формате HEX, CSS-цвета или RGB:

color: "#ff0000"        // красный
color: "rgb(0,255,0)"   // зеленый
color: "blue"           // синий

Можно динамически менять цвет после создания объекта:

text.setColor("#00ffff");

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

Свойство align определяет выравнивание текста внутри текстового блока:

align: "left"   // по левому краю
align: "center" // по центру
align: "right"  // по правому краю

Для многострочного текста выравнивание особенно важно, так как Phaser автоматически переносит строки по символу \n.

Добавление тени

Свойство shadow позволяет создавать эффект тени, что увеличивает читаемость текста на фоне сложной графики:

text.setShadow(xOffset, yOffset, color, blur, shadowStroke, shadowFill);
  • xOffset и yOffset — смещение тени по осям.
  • color — цвет тени.
  • blur — размытие тени, числовое значение.
  • shadowStroke — применять тень к обводке текста.
  • shadowFill — применять тень к заливке текста.

Пример с мягкой черной тенью:

text.setShadow(2, 2, "#000000", 4, false, true);

Стиль текста через объект настроек

Все параметры можно объединить при создании объекта:

const title = this.add.text(400, 100, "Phaser 3", {
    fontFamily: "Georgia, serif",
    fontSize: "48px",
    color: "#ffcc00",
    align: "center",
    stroke: "#000000",
    strokeThickness: 3
});

title.setShadow(4, 4, "#000000", 6, true, true);
  • stroke — цвет обводки текста.
  • strokeThickness — толщина обводки в пикселях.
  • Комбинируя stroke и shadow, можно создавать ярко выделяющиеся заголовки.

Динамическое изменение стиля

Phaser позволяет динамически менять свойства текста:

text.setFontSize(36);
text.setFontFamily("Courier New");
text.setColor("#ff00ff");
text.setShadow(1, 1, "#555555", 2);

Эта возможность полезна для анимации интерфейсов, всплывающих подсказок или изменения состояния игры.

Итоговая структура стиля

Основные параметры стиля текста в Phaser можно структурировать так:

Свойство Назначение
fontFamily Шрифт текста
fontSize Размер текста
color Цвет текста
align Выравнивание (left, center, right)
stroke Цвет обводки текста
strokeThickness Толщина обводки
shadow Тень текста (setShadow)
lineSpacing Интервал между строками
wordWrap Перенос текста по ширине блока (width, useAdvancedWrap)

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

Оглавление