Обводка и тень текста

В Phaser, начиная с версии 3, текстовые объекты создаются с помощью класса Phaser.GameObjects.Text. Для добавления обводки используется свойство stroke, которое задаёт цвет линии вокруг текста, и strokeThickness, определяющее толщину этой линии.

Пример создания текста с обводкой:

const text = this.add.text(400, 300, 'Пример текста', {
    fontFamily: 'Arial',
    fontSize: '48px',
    color: '#ffffff',
    stroke: '#ff0000',
    strokeThickness: 4
});
text.setOrigin(0.5); // центрирование текста по координатам

Особенности работы обводки:

  • Цвет обводки задаётся в формате HEX или CSS-цвета (#RRGGBB, 'red').
  • strokeThickness влияет на толщину линии по всему контуру символов.
  • Обводка рисуется поверх основного цвета текста, поэтому комбинация цветовой гаммы должна быть продумана для контраста.

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

text.setStroke('#00ff00', 6);

Это позволит изменять цвет и толщину линии на лету в зависимости от игровой логики.

Тень текста

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

text.setShadow(x, y, color, blur, shadowStroke, shadowFill);
  • x и y — смещение тени по горизонтали и вертикали.
  • color — цвет тени.
  • blur — степень размытия.
  • shadowStroke — включение тени для обводки (true/false).
  • shadowFill — включение тени для заливки текста (true/false).

Пример использования:

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

Эта настройка создаёт мягкую чёрную тень с размерами смещения 2 пикселя и размытия 4 пикселя, применяемую как к заливке текста, так и к обводке.

Советы по использованию тени:

  • Для чёткого визуального эффекта лучше сочетать умеренную толщину обводки с небольшой тенью.
  • Слишком сильная тень может снизить читаемость текста, особенно при динамических фоновых сценах.
  • Тень эффективно создаёт глубину и объём текста, делая интерфейс более выразительным.

Комбинирование обводки и тени

Для наиболее эффектного визуального представления текста часто применяют одновременно обводку и тень. Это позволяет создать трёхмерный вид текста, подчёркивая контраст между элементами UI и фоновыми объектами.

Пример комплексного применения:

const title = this.add.text(400, 150, 'Phaser 3', {
    fontFamily: 'Verdana',
    fontSize: '64px',
    color: '#ffffff',
    stroke: '#ff9900',
    strokeThickness: 6
});
title.setOrigin(0.5);
title.setShadow(4, 4, '#333333', 5, true, true);

В этом примере:

  • Основной цвет текста — белый.
  • Обводка — ярко-оранжевая с толщиной 6 пикселей.
  • Тень смещена на 4 пикселя и размыта на 5 пикселей, создавая эффект объёма.

Динамическое изменение параметров

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

this.tweens.add({
    targets: text,
    strokeThickness: 10,
    duration: 1000,
    yoyo: true,
    repeat: -1
});

text.setShadow(5, 5, '#000000', 10, true, false);

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

Практические рекомендации

  • Для заголовков лучше использовать толстую обводку с мягкой тенью.
  • Для игрового интерфейса (очки, сообщения) часто достаточно тонкой обводки и лёгкой тени.
  • Контраст цвета текста, обводки и тени должен быть достаточным для читаемости на любых фонах.
  • При работе с динамическими эффектами важно балансировать между визуальной выразительностью и производительностью, так как сложные тени могут нагрузить рендеринг на слабых устройствах.

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

Оглавление