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

Работа с текстом — неотъемлемая часть создания игровых интерфейсов, меню и диалогов. Когда вы выводите большие блоки текста, например, лор игры или описание предмета, плотное расположение строк может ухудшить восприятие. В Phaser 3 есть простое, но мощное свойство `lineSpacing`, которое позволяет гибко управлять вертикальным расстоянием между строками текста. В этой статье мы разберем, как его использовать как при создании текстового объекта, так и динамически, чтобы ваш текст всегда выглядел аккуратно и удобно для чтения.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const content = [
            'The sky above the port was the color of television, tuned to a dead channel.',
            '`It\'s not like I\'m using,\' Case heard someone say, as he shouldered his way ',
            'through the crowd around the door of the Chat. `It\'s like my body\'s developed',
            'this massive drug deficiency.\' It was a Sprawl voice and a Sprawl joke.',
            'The Chatsubo was a bar for professional expatriates; you could drink there for',
            'a week and never hear two words in Japanese.',
            '',
            'Ratz was tending bar, his prosthetic arm jerking monotonously as he filled a tray',
            'of glasses with draft Kirin. He saw Case and smiled, his teeth a webwork of',
            'East European steel and brown decay. Case found a place at the bar, between the',
            'unlikely tan on one of Lonny Zone\'s whores and the crisp naval uniform of a tall',
            'African whose cheekbones were ridged with precise rows of tribal scars. `Wage was',
            'in here early, with two joeboys,\' Ratz said, shoving a draft across the bar with',
            'his good hand. `Maybe some business with you, Case?\''
        ];

        this.add.text(100, 60, content, { fontFamily: 'Arial', color: '#00ff00', lineSpacing: 10 });

        //  Or you can set it like this:

        // var t = this.add.text(100, 60, content, { fontFamily: 'Arial', color: '#00ff00' });
        // t.setLineSpacing(10);
    }
}

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

const game = new Phaser.Game(config);

Создание текста с межстрочным интервалом

Основной способ задать интервал между строками — передать параметр lineSpacing в объекте стилей при создании текста через this.add.text(). Значение указывается в пикселях.

this.add.text(100, 60, content, {
  fontFamily: 'Arial',
  color: '#00ff00',
  lineSpacing: 10
});

В этом примере текст начнет отрисовываться с координат (100, 60). Переменная content содержит массив строк, которые будут объединены. Ключевой параметр lineSpacing: 10 добавляет 10 дополнительных пикселей между каждой строкой текста, что визуально "разряжает" блок, делая его менее сжатым. Без этого параметра используется интервал по умолчанию, определенный шрифтом.

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

Бывают ситуации, когда нужно изменить отступы после создания текстового объекта. Например, при смене темы интерфейса или адаптации под разные размеры экрана. Для этого у экземпляра класса Text есть метод setLineSpacing().

let t = this.add.text(100, 60, content, {
  fontFamily: 'Arial',
  color: '#00ff00'
});
// ... позже в коде
t.setLineSpacing(10);

Сначала текст создается без указания lineSpacing. Затем, в любой момент времени, вызывается метод t.setLineSpacing(10), который применяет новое значение. Это позволяет гибко управлять видом текста во время выполнения игры.

Как это работает внутри

Важно понимать, что lineSpacing — это *дополнительное* пространство. Оно добавляется к стандартной высоте строки (line height), которую рассчитывает рендерер на основе размера шрифта (fontSize).

Если fontSize равен 16px, а lineSpacing установлен в 10, то общая высота, занимаемая каждой строкой, составит примерно 26px + небольшие внутренние отступы самого шрифта. Это свойство влияет только на вертикальное расстояние между *базловыми линиями* строк и не изменяет отступы внутри текстового блока (padding) или его общую ширину.

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

1. **Тестируйте на реальном контенте.** Оптимальный lineSpacing зависит от размера шрифта, его гарнитуры и длины строк. Для мелкого шрифта может хватить 2-5px, для крупного заголовка — 10-20px. 2. **Используйте для визуального разделения.** Увеличенный интервал хорошо подходит для отделения параграфов друг от друга или выделения ключевых строк в списке. 3. **Комбинируйте с другими стилями.** lineSpacing отлично работает вместе с wordWrap для создания аккуратных многострочных текстовых блоков фиксированной ширины.

// Пример текста с переносом и увеличенным интервалом
this.add.text(100, 100, 'Очень длинная строка текста, которая будет автоматически перенесена', {
  fontFamily: 'Arial',
  fontSize: '18px',
  color: '#ffffff',
  wordWrap: { width: 300 },
  lineSpacing: 8
});

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

Управление lineSpacing — это простой, но эффективный инструмент для повышения читабельности игрового текста. Он помогает избежать "слипания" строк, особенно при использовании художественных или мелких шрифтов. Поэкспериментируйте: попробуйте анимировать это значение с помощью твинов для плавного появления текста, создавайте динамические интерфейсы, где расстояние между строками меняется при наведении, или используйте отрицательный lineSpacing (например, -2) для создания особых стилистических эффектов с моноширинными шрифтами.