Phaser.js: всё об играх и разработке

О чем этот пример

Столкнулись с тем, что курсивный или полужирный текст в Phaser обрезается по краям, особенно заметно с иероглифами или шрифтами с засечками? Это не баг, а особенность рендеринга. К счастью, встроенный метод `setPadding` позволяет быстро и элегантно решить эту проблему, добавляя «воздуха» вокруг текстового объекта. В этой статье мы разберем практический пример из официальной документации Phaser, который наглядно демонстрирует проблему и её решение. Вы узнаете, как управлять отступами вокруг текста, чтобы ваши надписи всегда выглядели идеально, независимо от начертания шрифта.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        this.add.text(100, 20, 'Without Padding');

        this.add.text(100, 100, 'Phaser').setFontSize(64).setFontStyle('bold italic').setFontFamily('Arial').setBackgroundColor('#0000ff');
        this.add.text(100, 200, '继续').setFontSize(64).setFontStyle('bold italic').setFontFamily('Open Sans').setBackgroundColor('#0000ff');

        this.add.text(450, 20, 'With Padding');

        this.add.text(450, 100, 'Phaser').setFontSize(64).setFontStyle('bold italic').setFontFamily('Arial').setPadding({ right: 16 }).setBackgroundColor('#0000ff');
        this.add.text(450, 200, '继续').setFontSize(64).setFontStyle('bold italic').setFontFamily('Open Sans').setPadding({ right: 16 }).setBackgroundColor('#0000ff');
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

В чём проблема? Обрезка курсивных символов

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

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

this.add.text(100, 200, '继续').setFontSize(64).setFontStyle('bold italic').setFontFamily('Open Sans').setBackgroundColor('#0000ff');

В примере выше иероглифы, заданные жирным курсивом, скорее всего, будут обрезаны по правому краю, если не использовать паддинг. Синий фон (setBackgroundColor) помогает визуализировать реальные границы текстового блока.

Решение: метод setPadding

Phaser предоставляет метод setPadding для объектов текста. Он позволяет задать внутренние отступы (паддинги) со всех четырёх сторон: top, right, bottom, left. Эти отступы расширяют область, которую Phaser резервирует под рендеринг текста, предотвращая обрезку.

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

// Добавление отступа только справа
.setPadding({ right: 16 })

// Добавление равных отступов со всех сторон
.setPadding(10)

Паддинг увеличивает размер текстового объекта (его width и height), что важно учитывать при позиционировании, особенно если вы используете физическое тело или выравнивание.

Сравнение «до» и «после» на практике

Исходный код примера создаёт две колонки: левая демонстрирует проблему, правая — её решение. Визуальное сравнение становится очевидным благодаря синему фону.

В левой колонке текст создаётся без дополнительных отступов. В правой — для каждого текстового объекта применяется setPadding({ right: 16 }), что добавляет 16 пикселей пространства справа от текста.

// Левая колонка: БЕЗ паддинга (текст обрезается)
this.add.text(100, 100, 'Phaser')
    .setFontSize(64)
    .setFontStyle('bold italic')
    .setFontFamily('Arial')
    .setBackgroundColor('#0000ff');

// Правая колонка: С паддингом (текст целый)
this.add.text(450, 100, 'Phaser')
    .setFontSize(64)
    .setFontStyle('bold italic')
    .setFontFamily('Arial')
    .setPadding({ right: 16 }) // Ключевое добавление
    .setBackgroundColor('#0000ff');

Запустив этот пример, вы увидите, что в правой колонке закруглённый край курсивной буквы «r» в слове «Phaser» и конечные черты иероглифов полностью сохраняются. Синий прямоугольник фона также становится шире.

Как подобрать правильное значение паддинга?

Не существует универсального числа. Необходимое значение padding зависит от трёх основных факторов: 1. **Размер шрифта (setFontSize)**: Чем крупнее текст, тем больше может быть «свес» у курсивных символов. 2. **Конкретный шрифт (setFontFamily)**: У разных гарнитур разная метрика и форма засечек. 3. **Начертание (setFontStyle)**: Обычный (normal), курсив (italic), жирный (bold) или их комбинация.

**Рекомендация:** Начните с визуальной проверки. Установите для текста фоновый цвет с помощью setBackgroundColor – это самый простой способ увидеть его истинные границы. Затем экспериментальным путём подберите минимальное значение паддинга (часто хватает 2-10px для шрифта среднего размера), при котором обрезка исчезает. Добавляйте паддинг только с той стороны, где происходит обрезка (чаще всего right).

Что попробовать дальше

Метод setPadding — это простой и мощный инструмент контроля над рендерингом текста в Phaser. Он решает не только проблему обрезки курсива, но и может использоваться для чисто дизайнерских задач, например, создания более воздушных текстовых кнопок или выделения заголовков. **Идеи для экспериментов:** * Попробуйте анимировать значение паддинга с помощью Tweens, чтобы создать эффект «раскрывающегося» текстового поля. * Используйте разные значения паддинга для каждой стороны, чтобы сместить текст внутри его блока, создав нестандартное выравнивание. * Скомбинируйте setPadding с setOrigin для ещё более гибкого позиционирования текстовых элементов в вашем интерфейсе.