Многострочный текст и перенос строк

Phaser — мощная библиотека для создания 2D-игр на JavaScript, предоставляющая удобные инструменты для работы с графикой и текстом. Управление многострочным текстом является одной из ключевых задач при создании интерфейсов, диалогов, инструкций и HUD.

Создание многострочного текста

Для отображения текста в Phaser используется объект Phaser.GameObjects.Text. Многострочный текст создаётся простым добавлением символов перевода строки \n в строку или массив строк.

const text = this.add.text(100, 50, 'Первая строка\nВторая строка\nТретья строка', {
    fontFamily: 'Arial',
    fontSize: '24px',
    color: '#ffffff',
    align: 'left',
    wordWrap: { width: 400, useAdvancedWrap: true }
});

Ключевые моменты:

  • \n — стандартный символ перевода строки.
  • wordWrap — объект для автоматического переноса текста при достижении заданной ширины.
  • align — выравнивание текста (left, center, right).

Автоматический перенос строк

Для динамического текста, когда длина строки заранее неизвестна, используется свойство wordWrap. Оно позволяет Phaser автоматически переносить слова на новую строку при превышении заданной ширины.

const dynamicText = this.add.text(50, 100, 'Очень длинный текст, который нужно перенести автоматически на следующую строку при достижении заданной ширины', {
    fontFamily: 'Verdana',
    fontSize: '20px',
    color: '#ffcc00',
    wordWrap: { width: 300 }
});

Особенности:

  • width — максимальная ширина блока текста.
  • useAdvancedWrap — более сложный алгоритм переноса, учитывающий пробелы и знаки препинания.

Форматирование отдельных строк

Phaser поддерживает стилизацию текста через объекты конфигурации. Для многострочного текста можно комбинировать стили, задавая шрифт, цвет и выравнивание.

const styledText = this.add.text(50, 200, 'Заголовок\nПодзаголовок\nТекст параграфа', {
    fontFamily: 'Georgia',
    fontSize: '22px',
    color: '#ffffff',
    align: 'center',
    lineSpacing: 10
});

lineSpacing — вертикальный отступ между строками, задающий удобочитаемость текста.

Многострочный текст с интерактивностью

Phaser позволяет добавлять интерактивность к текстовым объектам, что полезно для диалогов или меню.

const menuOption = this.add.text(100, 300, 'Начать игру\nНастройки\nВыход', {
    fontFamily: 'Tahoma',
    fontSize: '26px',
    color: '#00ff00',
    align: 'left'
}).setInteractive();

menuOption.on('pointerover', () => {
    menuOption.setStyle({ fill: '#ff0000' });
});

menuOption.on('pointerout', () => {
    menuOption.setStyle({ fill: '#00ff00' });
});

Преимущества:

  • Возможность использовать одну текстовую область для нескольких пунктов меню.
  • События pointerover и pointerout позволяют реализовать подсветку выбранной строки.

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

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

let scoreText = this.add.text(20, 20, 'Очки: 0', { fontSize: '20px', fill: '#ffffff' });
let score = 0;

// Обновление текста
score += 10;
scoreText.setText(`Очки: ${score}\nЛучший результат: 100`);

Особенности:

  • setText принимает строку или массив строк.
  • При использовании массива каждая строка автоматически переносится на новую строку.

Ограничение длины и обрезка текста

Для интерфейсов с фиксированными размерами блока текста применяется свойство maxLines. Это предотвращает выход текста за пределы заданного блока.

const limitedText = this.add.text(50, 400, 'Очень длинный текст, который не должен выходить за пределы блока', {
    fontFamily: 'Arial',
    fontSize: '18px',
    color: '#ffffff',
    wordWrap: { width: 250 },
    maxLines: 3
});

Если количество строк превышает maxLines, лишние строки обрезаются.

Многострочный текст и производительность

  • Избегать частого обновления всего текста — лучше обновлять только изменяющуюся часть.
  • Использовать bitmap text для статического текста с высокой частотой обновлений, что снижает нагрузку на рендеринг.
  • Минимизировать количество объектов Text — объединять многострочные тексты в один объект.

Работа с текстом в разных координатах и масках

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

const textContainer = this.add.container(50, 50);
const dialogueText = this.add.text(0, 0, 'Длинный текст с переносами строк для диалога', { fontSize: '20px', color: '#ffffff', wordWrap: { width: 300 } });
textContainer.add(dialogueText);

// Маска для ограничения видимой области
const shape = this.add.rectangle(50, 50, 300, 100, 0x000000).setOrigin(0);
const mask = shape.createBitmapMask();
textContainer.setMask(mask);

Такой подход позволяет:

  • Создавать анимированные окна с прокруткой текста.
  • Управлять видимостью частей текста без разрушения структуры сцены.

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

Оглавление